使用带有一些效果的jQuery进行表单验证

时间：2016-03-09 05:34:47

标签： jquery

我正在使用jQuery创建表单验证，而我是jQuery的新手，所以我开始使用名称，地址，邮政编码，国家/地区，性别，选择颜色（复选框），电话号码，电子邮件，密码创建表单验证，验证密码字段。当我创建一些代码但它创建了一些问题，因为我无法在其他条件下获得警报。这是我的代码

$(document).ready(function() {
    var err = true;
    $("#submit_Button").click(function ValidateForm() {
        alert("in submit");
        if ($("#name").val() == null || $("#name").val() == "") {
            alert("in if");
            $("#name_Err").show();
            $("#name").focus();
            err = false;
        } else {
            $("#name_Err").hide();
            if (!$("#name").match(/^[a-zA-Z ]+$/)) {
                alert("i m in regu");
                $("#name").focus();
                err = false;
            }
        }
    });
});

CSS 

  .form {
      margin - left: 450 px;
      width: auto;
      height: 500 px
  }
  .class = "left_Side" {
      text - align: left;
      width: 80 px;
      position: absolute;
      padding - left: 50 px;
  }

HTML 

<html>
<body>
    <form name="myForm" onsubmit="return ValidateForm();" action="" class="form">
        <table id="form_Table">
            <tr>
                <h1 style="text-align:Left; margin-left:20px;"> Javascript Validation</h1>
            </tr>
            <tr>
                <td class="left_Side">Name :</td>
                <td><input type="text" id="name" /></td>
                <td><span style="color:red; display:none" id="name_Err">Please enter your         name</span></td>
                <td><span style="color:red; display:none" id="na_Err">Only   alphabets</span></td>
            </tr>
            <tr>
                <td class="left_Side">Address :</td>
                <td><input type="text" id="address" /></td>
                <td><span style="color:red; display:none" id="address_Err">Please enter your   address</span></td>
                <td><span style="color:red; display:none" id="add_Err">Only alphabets</span> </td>
            </tr>
            <tr>
                <td class="left_Side">Zip Code :</td>
                <td><input type="text" id="zip_code" /></td>
                <td><span style="color:red; display:none" id="zipCode_Err">Please enter your    zip code</span></td>
                <td><span style="color:red; display:none" id="zip_Err">Only numbers</span> </td>
            </tr>
            <tr>
                <td class="left_Side">Country :</td>
                <td><select id="country_Select">
       <option value="">Select Country</option>
       <option value="opt_India">India</option>
       <option value="opt_Australia">Australia</option>
       <option value="opt_America">America</option>
      </select></td>
                <td><span style="color:red; display:none" id="country_Err">Please select your     country</span></td>
            </tr>
            <tr>
                <td class="left_Side">Gender :</td>
                <td><input type="radio" name="rdio" value="male" /> Male
                    <input type="radio" name="rdio" value="female" /> Female </td>
                <td><span style="color:red; display:none" id="gender_Err">Please select    gender</span></td>
            </tr>
            <tr>
                <td class="left_Side">Preferences :</td>
                <td colspan="2"><input type="checkbox" value="chk_Red" /> Red
                    <input type="checkbox" value="chk_Black" /> Black
                    <input type="checkbox" value="chk_Cyan" /> Cyan
                </td>
                <td><span style="color:red; display:none" id="Name_Err">Please select   preference</span></td>
            </tr>
            <tr>
                <td class="left_Side">Phone :</td>
                <td><input type="text" name="phone_number" id="contact" /></td>
                <td><span style="color:red; display:none" id="contact_Err">Please enter valid   number</span></td>
                <td><span style="color:red; display:none" id="con_Err">Only numbers</span> </td>
            </tr>
            <tr>
                <td class="left_Side">Email:</td>
                <td><input type="text" name="emil_id" id="check_email" /></td>
                <td><span style="color:red; display:none" id="Name_Err">Please enter valid  email</span></td>
            </tr>
            <tr>
                <td class="left_Side">Password( 6-8 characters) :</td>
                <td><input type="password" name="pssword" id="pasword" /></td>
                <td><span style="color:red;display:none" id="password_Err">Enter valid password!</span></td>
            </tr>
            <tr>
                <td class="left_Side">Verify Password :</td>
                <td><input type="password" name="verfy_password" id="vry_pasword" /></td>
                <td><span style="color:red;display:none" id="Pass_Err">Different from password!</span></td>
            </tr>
            <tr>
                <td><br />
                    <br />
                    <br /></td>
                <td><input style="margin-left:0px" id="submit_Button" type="submit" value="SEND" />
                    <input style="margin-left:20px" id="reset_Button" type="reset" value="CLEAR" /></td>
            </tr>
        </table>
    </form>
</body>

</html>

2 个答案:

答案 0 :(得分：1)

您正在调用jQuery对象上的match()，而不是输入字段的值，导致控制台中出现Uncaught TypeError: $(...).match is not a function错误

if (!$("#name").val().match(/^[a-zA-Z ]+$/)) {
    ....
}

此外，由于您使用的是jQuery，因此无需使用内联onsubmit="return ValidateForm();"处理程序，而是使用jQuery提交处理程序 - 而不是提交按钮单击处理程序

＆＃13;
＆＃13; 
$(document).ready(function() {
  var err = true;
  $('form[name="myForm"]').submit(function ValidateForm() {
    alert("in submit");
    if ($("#name").val() == null || $("#name").val() == "") {
      alert("in if");
      $("#name_Err").show();
      $("#name").focus();
      err = false;
    } else {
      $("#name_Err").hide();
      if (!$("#name").val().match(/^[a-zA-Z ]+$/)) {
        alert("i m in regu");
        $("#name").focus();
        $("#na_Err").show();
        err = false;
      } else {
        $("#na_Err").hide();
      }
    }

    return err;
  });
});
＆＃13; 
.form {
  margin-left: 450px;
  width: auto;
  height: 500px
}
.left_Side1 {
  text-align: left;
  width: 80px;
  position: absolute;
  padding-left: 50px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="myForm" action="" class="form">
  <table id="form_Table">
    <tr>
      <h1 style="text-align:Left; margin-left:20px;"> Javascript Validation</h1>
    </tr>
    <tr>
      <td class="left_Side">Name :</td>
      <td>
        <input type="text" id="name" />
      </td>
      <td><span style="color:red; display:none" id="name_Err">Please enter your         name</span>
      </td>
      <td><span style="color:red; display:none" id="na_Err">Only   alphabets</span>
      </td>
    </tr>
    <tr>
      <td class="left_Side">Address :</td>
      <td>
        <input type="text" id="address" />
      </td>
      <td><span style="color:red; display:none" id="address_Err">Please enter your   address</span>
      </td>
      <td><span style="color:red; display:none" id="add_Err">Only alphabets</span> 
      </td>
    </tr>
    <tr>
      <td class="left_Side">Zip Code :</td>
      <td>
        <input type="text" id="zip_code" />
      </td>
      <td><span style="color:red; display:none" id="zipCode_Err">Please enter your    zip code</span>
      </td>
      <td><span style="color:red; display:none" id="zip_Err">Only numbers</span> 
      </td>
    </tr>
    <tr>
      <td class="left_Side">Country :</td>
      <td>
        <select id="country_Select">
          <option value="">Select Country</option>
          <option value="opt_India">India</option>
          <option value="opt_Australia">Australia</option>
          <option value="opt_America">America</option>
        </select>
      </td>
      <td><span style="color:red; display:none" id="country_Err">Please select your     country</span>
      </td>
    </tr>
    <tr>
      <td class="left_Side">Gender :</td>
      <td>
        <input type="radio" name="rdio" value="male" />Male
        <input type="radio" name="rdio" value="female" />Female</td>
      <td><span style="color:red; display:none" id="gender_Err">Please select    gender</span>
      </td>
    </tr>
    <tr>
      <td class="left_Side">Preferences :</td>
      <td colspan="2">
        <input type="checkbox" value="chk_Red" />Red
        <input type="checkbox" value="chk_Black" />Black
        <input type="checkbox" value="chk_Cyan" />Cyan
      </td>
      <td><span style="color:red; display:none" id="Name_Err">Please select   preference</span>
      </td>
    </tr>
    <tr>
      <td class="left_Side">Phone :</td>
      <td>
        <input type="text" name="phone_number" id="contact" />
      </td>
      <td><span style="color:red; display:none" id="contact_Err">Please enter valid   number</span>
      </td>
      <td><span style="color:red; display:none" id="con_Err">Only numbers</span> 
      </td>
    </tr>
    <tr>
      <td class="left_Side">Email:</td>
      <td>
        <input type="text" name="emil_id" id="check_email" />
      </td>
      <td><span style="color:red; display:none" id="Name_Err">Please enter valid  email</span>
      </td>
    </tr>
    <tr>
      <td class="left_Side">Password( 6-8 characters) :</td>
      <td>
        <input type="password" name="pssword" id="pasword" />
      </td>
      <td><span style="color:red;display:none" id="password_Err">Enter valid password!</span>
      </td>
    </tr>
    <tr>
      <td class="left_Side">Verify Password :</td>
      <td>
        <input type="password" name="verfy_password" id="vry_pasword" />
      </td>
      <td><span style="color:red;display:none" id="Pass_Err">Different from password!</span>
      </td>
    </tr>
    <tr>
      <td>
        <br />
        <br />
        <br />
      </td>
      <td>
        <input style="margin-left:0px" id="submit_Button" type="submit" value="SEND" />
        <input style="margin-left:20px" id="reset_Button" type="reset" value="CLEAR" />
      </td>
    </tr>
  </table>
</form>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

现在它也在其他地方，你正在将正则表达式与元素匹配，实际上你想要的是匹配它的值。

<强>更新

检查复选框是否被选中，给它们指定相同的类，并检查是否有任何类被检查。

＆＃13;
＆＃13; 
function ValidateForm() {
 var err = true;
    alert("in submit");
    if ($("#name").val() == null || $("#name").val() == "") {
        alert("in if");
        $("#name_Err").show();
        $("#name").focus();
        err = false;
    } else {
        $("#name_Err").hide();
        if (!$("#name").val().match(/^[a-zA-Z ]+$/)) {
            alert("i m in regu");
            $("#name").focus();
            err = false;
        }
    }
    
    if($(".color:checked").length>0){
    	alert('checkbox is checked do what ever you want to do');
      
    } 
    else{
       alert('check atleast one checkbox');
       	err = false;
    }
    return err;
   }
＆＃13; 
 .form {
      margin - left: 450 px;
      width: auto;
      height: 500 px
  }
  .class = "left_Side" {
      text - align: left;
      width: 80 px;
      position: absolute;
      padding - left: 50 px;
  }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

    
<form name="myForm" onsubmit="return ValidateForm();" action="" class="form">
    <table id="form_Table">
        <tr>
            <h1 style="text-align:Left; margin-left:20px;"> Javascript Validation</h1>
        </tr>
        <tr>
            <td class="left_Side">Name :</td>
            <td><input type="text" id="name" /></td>
            <td><span style="color:red; display:none" id="name_Err">Please enter your         name</span></td>
            <td><span style="color:red; display:none" id="na_Err">Only   alphabets</span></td>
        </tr>
        <tr>
            <td class="left_Side">Address :</td>
            <td><input type="text" id="address" /></td>
            <td><span style="color:red; display:none" id="address_Err">Please enter your   address</span></td>
            <td><span style="color:red; display:none" id="add_Err">Only alphabets</span> </td>
        </tr>
        <tr>
            <td class="left_Side">Zip Code :</td>
            <td><input type="text" id="zip_code" /></td>
            <td><span style="color:red; display:none" id="zipCode_Err">Please enter your    zip code</span></td>
            <td><span style="color:red; display:none" id="zip_Err">Only numbers</span> </td>
        </tr>
        <tr>
            <td class="left_Side">Country :</td>
            <td><select id="country_Select">
   <option value="">Select Country</option>
   <option value="opt_India">India</option>
   <option value="opt_Australia">Australia</option>
   <option value="opt_America">America</option>
  </select></td>
            <td><span style="color:red; display:none" id="country_Err">Please select your     country</span></td>
        </tr>
        <tr>
            <td class="left_Side">Gender :</td>
            <td><input type="radio" name="rdio" value="male" /> Male
                <input type="radio" name="rdio" value="female" /> Female </td>
            <td><span style="color:red; display:none" id="gender_Err">Please select    gender</span></td>
        </tr>
        <tr>
            <td class="left_Side">Preferences :</td>
            <td colspan="2"><input type="checkbox" value="chk_Red" class="color" /> Red
                <input type="checkbox" value="chk_Black" class="color"/> Black
                <input type="checkbox" value="chk_Cyan" class="color"/> Cyan
            </td>
            <td><span style="color:red; display:none" id="Name_Err">Please select   preference</span></td>
        </tr>
        <tr>
            <td class="left_Side">Phone :</td>
            <td><input type="text" name="phone_number" id="contact" /></td>
            <td><span style="color:red; display:none" id="contact_Err">Please enter valid   number</span></td>
            <td><span style="color:red; display:none" id="con_Err">Only numbers</span> </td>
        </tr>
        <tr>
            <td class="left_Side">Email:</td>
            <td><input type="text" name="emil_id" id="check_email" /></td>
            <td><span style="color:red; display:none" id="Name_Err">Please enter valid  email</span></td>
        </tr>
        <tr>
            <td class="left_Side">Password( 6-8 characters) :</td>
            <td><input type="password" name="pssword" id="pasword" /></td>
            <td><span style="color:red;display:none" id="password_Err">Enter valid password!</span></td>
        </tr>
        <tr>
            <td class="left_Side">Verify Password :</td>
            <td><input type="password" name="verfy_password" id="vry_pasword" /></td>
            <td><span style="color:red;display:none" id="Pass_Err">Different from password!</span></td>
        </tr>
        <tr>
            <td><br />
                <br />
                <br /></td>
            <td><input style="margin-left:0px" id="submit_Button" type="submit" value="SEND" />
                <input style="margin-left:20px" id="reset_Button" type="reset" value="CLEAR" /></td>
        </tr>
    </table>
</form>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题