jQuery和Ajax表單驗證功能

Question

我正在嘗試找到一種使用Jquery進行表單驗證的方法。 我目前對驗證功能有疑問。 我可以發送表單，而無需在輸入字段中輸入任何內容。 你能告訴我如何使它工作嗎。

  function Valid(){ var name1 = false; var name2 = false; var num = false; var mail = false; var msg = false;     if (document.myForm.name.value ==="") {          $('#name1').addClass('has-error');          $( "#name2" ).click(function(){$("#name1").removeClass('has-error');});          name1 = false;}            if (!/^[a-zA-Z]*$/g.test(document.myForm.name.value)) {          $('#name1').addClass('has-error');          $('#name2').click(function(){$('#name1').removeClass('has-error');});          name2 = false;}       if (document.myForm.num.value.length < 17){          $('#num1').addClass('has-error');          $( "#num2" ).click(function(){$("#num1").removeClass('has-error');});          num = false;}       if (document.myForm.email.value === "") {          $('#email1').addClass('has-error');          $( "#email2" ).click(function(){$("#email1").removeClass('has-error');});          mail = false;}       if (document.myForm.message.value === "") { $('#msg1').addClass('has-error');          $( "#msg2" ).click(function(){$("#msg1").removeClass('has-error');});          msg = false;} }// END VALIDATION   function SubmitFunction(){          if(Valid()){          $.ajax({              type: "POST",              url:"../php/process.php",              data: $('form.contact').serialize(),              success: function(msg){                $("#myModal").modal('hide');                $("#msgsuccess").delay(500).fadeIn(500).delay(1000).fadeOut(500);                }             });//End         }        }//End SubmitFunction 

先感謝您 ！！

Answer 1

添加return false; 到所有if語句，並使用return true; 在底部。

另外， 始終在服務器端和客戶端兩次進行驗證。 客戶端不是必需的，但是服務器端是 。

編輯：另外，請注意，每次返回后，您的函數都將停止工作。 因此，例如，如果未填寫輸入1和4，它將在輸入1處返回false，並且直到下一次提交它並填寫輸入1時，它才會檢查輸入4。

編輯1：可以通過這種方式消除：

 function Valid() {
         var name1 = false;
         var name2 = false;
         var num = false;
         var mail = false;
         var msg = false;
         var error = false;

         if (document.myForm.name.value === "") {
             $('#name1').addClass('has-error');
             $("#name2").click(function() {
                 $("#name1").removeClass('has-error');
             });
             name1 = false;
             error = true;
         }
         if (!/^[a-zA-Z]*$/g.test(document.myForm.name.value)) {
             $('#name1').addClass('has-error');
             $('#name2').click(function() {
                 $('#name1').removeClass('has-error');
             });
             name2 = false;
             error = true;
         }
         if (document.myForm.num.value.length < 17) {
             $('#num1').addClass('has-error');
             $("#num2").click(function() {
                 $("#num1").removeClass('has-error');
             });
             num = false;
             error = true;
         }
         if (document.myForm.email.value === "") {
             $('#email1').addClass('has-error');
             $("#email2").click(function() {
                 $("#email1").removeClass('has-error');
             });
             mail = false;
             error = true;
         }
         if (document.myForm.message.value === "") {
             $('#msg1').addClass('has-error');
             $("#msg2").click(function() {
                 $("#msg1").removeClass('has-error');
             });
             msg = false;
             error = true;
         }
         if(error === true) {
             return true;
         } else {
             return false;
         }
     } // END VALIDATION

 function SubmitFunction() {
         if (Valid()) {
             $.ajax({
                 type: "POST",
                 url: "../php/process.php",
                 data: $('form.contact').serialize(),
                 success: function(msg) {
                     $("#myModal").modal('hide');
                     $("#msgsuccess").delay(500).fadeIn(500).delay(
                         1000).fadeOut(500);
                 }
             }); //End 
         }
     } //End SubmitFunction

它的作用是，在函數初始化時將error變量設置為false，但是每次出現錯誤時，都將其設置為true。 在函數末尾，只需檢查錯誤變量是否為true，否則返回false，如果是，則返回true。