Question

所以我有一个表单，我正在尝试验证它以确保没有提交其他字符我知道他们的验证表达式但我不知道如何应用它。我只想要它在哪里如果用户放任何无效可能会干扰的字符然后返回false。我试过但它似乎不起作用，如果有任何方式，请帮助我提高我的代码效率

function validateForm() {
    var name = document.forms["theForm"]["fname"].value;
    var lastName = document.forms["theForm"]["lname"].value;
    var email = document.forms["theForm"]["femail"].value;
    var subject = document.forms["theForm"]["subject"].value;
    
    if  (name == "") {
    
    	window.alert("Missing First Name.");
    	name.focus();
    	return false;
    }
    
    if (lastName == "") {
        alert("Missing Last Name");
        return false;
    }
    
    if (email == "") {
        alert("Missing Email");
        return false;
    }
    
    if (subject == "") {
        alert("Incomplete Action");
        return false;
    }
    
}

  input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }

  input[type=submit] {
    background-color: #993b3b;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }

  input[type=submit]:hover {
    background-color: #B0B0B0;
  }

  .formCont {
    text-align: left;
    margin: 152.5px 0;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }

<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body>

<div class="formCont">
      <form name="theForm" onsubmit="return validateForm()" method="post">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="firstname" placeholder="Your name..">

      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lastname" placeholder="Your last name..">

      <label for="femail">Email</label>
      <input type="text" id="femail" name="Email" placeholder="Your email.."


      <label for="subject">Subject</label>
      <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

      <input type="submit" value="Submit">
    </form>

    </div>

</body>
</html>

Answer 1

好的，因为这是一个大学项目。我假设你必须写香草JS（如果不是jQuery是一个更好的选择）。

开始时要做的几件事：

name === "" 优于name == ""因为JavaScript的类型强制。此外，HTML现在具有email输入类型。所以 <input type="email" id="femail" name="Email" placeholder="Your email.."> 为什么你在一个地方有window.alert而在其他地方有alert。我的天啊。这正在成为代码审查：）。

无论如何，就像我之前说过的，如果jQuery是一个选择，请，请做。

Answer 2

@peterb这里正确提到的是使用jquery

的一个例子

    function validateForm() {
        var name = $("#fname").val();
        var lastName = $("#lname").val();
        var email = $("#femail").val();
        var subject =$("#subject").val();
        
        if  (name == "" || name ==null || name==undefined) {
        
        	alert("Missing First Name.");        	
           markerror("#fname")
        	return false;
        }
        
        if (lastName == "" || lastName ==null || lastName==undefined) {
            alert("Missing Last Name");            
             markerror("#lname")
            return false;
        }
        
        if (email == ""  || email ==null || email==undefined) {
            alert("Missing Email");
            markerror("#femail")
            return false;
        }
        
        if (subject == "" || subject ==null || subject==undefined) {
            alert("Incomplete Action");             
             markerror("#subject")
            return false;
        }
        
    }
    
    function markerror(index){
   
            $(index).css("border", "1px solid red");
            $(index).focus();
            setTimeout(function () {
                $(index).css("border", "1px solid #ccc");
            }, 4000);
    }

      input[type=text], select, textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        margin-top: 6px;
        margin-bottom: 16px;
        resize: vertical;
      }

      input[type=submit] {
        background-color: #993b3b;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      input[type=submit]:hover {
        background-color: #B0B0B0;
      }

      .formCont {
        text-align: left;
        margin: 152.5px 0;
        border-radius: 5px;
        background-color: #f2f2f2;
        padding: 20px;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

          <form name="theForm" onsubmit="return validateForm()" method="post">
          <label for="fname">First Name</label>
          <input type="text" id="fname" name="firstname" placeholder="Your name..">

          <label for="lname">Last Name</label>
          <input type="text" id="lname" name="lastname" placeholder="Your last name..">

          <label for="femail">Email</label>
          <input type="text" id="femail" name="Email" placeholder="Your email.."


          <label for="subject">Subject</label>
          <textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>

          <input type="submit" value="Submit">
        </form>

使用带有验证表达式的javascript验证表单

2 个答案: