使用jQuery验证表单

Question

我已经尝试过，已经研究过，但仍然不知道如何使用jQuery验证此表单。 我什至试图检查jQuery API，但我没有运气。 这不应该看起来那么难。 我还没有使用一些ID，因为我想在继续之前得到我到目前为止的工作。 我能找到的用于验证电子邮件的最佳方法就是JavaScript。 这是我的代码。

 $(document).ready(function(){ $("#sendForm").click(function(){ var validForm=true; //set valid flag to true, assume form is valid //validate customer name field. Field is required if($("#custName").val()) { $("#custNameError").html(""); //field value is good, remove any error messages } else { $("#custNameError").html("Please enter your name."); validForm = false; } //validate customer phone number. Field is required, must be numeric, must be 10 characters var inPhone = $("#custPhone").val(); //get the input value of the Phone field $("#custPhoneError").html(""); //set error message back to empty, assume field is valid if(!inPhone) { $("#custPhoneError").html("Please enter your phone number."); validForm = false; } else { //if( !$.isNumeric(inPhone) || Math.round(inPhone) != inPhone ) //if the value is NOT numerice OR not an integer. Rounding technique if( !$.isNumeric(inPhone) || (inPhone % 1 != 0) ) //if the value is NOT numerice OR not an integer. Modulus technique { $("#custPhoneError").html("Phone number must be a number."); validForm = false; } else { if(inPhone.length != 10) { $("#custPhoneError").html("Phone number must have 10 numbers"); validForm = false; } } } //ALL VALIDATIONS ARE COMPLETE. If all of the fields are valid we can submit the form. Otherwise display the errors if(validForm) { //all values are valid, form is good, submit the form alert("Valid form will be submitted"); //$("#applicationForm").submit(); //SUBMIT the form to the server } else { //form has at least one invalid field //display form and associated error messages alert("Invalid form. Display form and error messages"); } }); //end sendform.click }); //end .ready function isEmail(email) { var regex = /^([a-zA-Z0-9_.+-])+\\@(([a-zA-Z0-9-])+\\.)+([a-zA-Z0-9]{2,4})+$/; return regex.test(email); } 

 label { width:150px; display:inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h2></h2> <h3>Form Validation Project - Complaint Form</h3> <form id="form1" name="form1" method="post" action=""> <p>Please enter the following information in order to process your concerns.</p> <p> <label for="custName">Name:</label> <input type="text" name="custName" id="custName" /> <span id="custNameError" class="errorMsg"></span> </p> <p> <label for="custPhone">Phone Number: </label> <input type="text" name="custPhone" id="custPhone" /> <span id="custPhoneError" class="errorMsg"></span> </p> <p> <label for = "email">Email:</label> <input type = "text" name = "emailAdd" id = "emailAdd" /> <span id = "emailError" class = "emailError"></span> </p> <p>Please Select Product Group:</p> <p> <label> <input type="radio" name="custProducts" value="books" id="custProducts_0" /> Books </label> <br /> <label> <input type="radio" name="custProducts" value="movies" id="custProducts_1" /> Movies </label> <br /> <label> <input type="radio" name="custProducts" value="electronics" id="custProducts_2" /> Consumer Electronics </label> <br /> <label> <input type="radio" name="custProducts" value="computer" id="custProducts_3" /> Computer </label> <br /> </p> <p>Description of problem: (Limit 200 characters)</p> <p> <label for="custComplaint"></label> <textarea name="custComplaint" id="custComplaint" cols="45" rows="5"></textarea> </p> <p> <input type="submit" name="button" id="button" value="File Complaint" /> <input type="reset" name="button2" id="button2" value="Reset" /> </p> </form> <p>&nbsp;</p> 

Answer 1

 $("#button").click(function(e){
    e.preventDefault(); // you need to stop the initial event to have a chance to validate
    var validForm=true;
    // etc...

Answer 2

刚开始时，HTML中的提交控件具有ID“按钮”，因此应使用$('#button').click ，而不是$('#sendForm').click 。

另外，如果您想停留在页面上（例如进行验证，显示错误等），则必须防止单击按钮时自动提交表单。 有很多方法可以做到这一点，但是最简单的方法就是将按钮类型从submit更改为button 。 即，替换为：

<input type="submit" name="button" id="button" value="File Complaint" />

有了这个：

<input type="button" name="button" id="button" value="File Complaint" />
             ------

那应该使您入门，至少您的代码将运行，您可以使用console.log进行调试，等等。祝您好运。

---

更新

我应该补充一点，如果您接受我的建议，该表单将永远不会自行提交-如果某些验证失败并且您希望停留在页面上并向用户提供一些错误反馈，那就很好了。

当您确实希望提交表单时，必须自己进行。 同样，有很多方法可以做到这一点，但是最简单的方法可能是：

$('#form1').submit();

Answer 3

您可以使用jquery.validate.js来验证表单，它将克服您创建验证规则的所有手动工作，它还提供了各种预定义的规则，例如required，email，minlength和maxlength等。因此，这将更加容易让您轻松实现自己的需求。

https://jqueryvalidation.org/

Answer 4

我有一个简单的jquery表单验证和提交包-看看是否有帮助-易于安装，并且您可以自定义很多内容： https : //github.com/sebastiansulinski/ssd-form