使用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