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。