三种JQuery表单验证方式

  1. 将校验规则写到JS中–行为与结构分离,通过使用name属性来关联字段和验证规则【推荐】
<script src ="../jquery.validate.messages_cn.js" type="text/javascript">script>

<script src="../../scripts/jquery-1.7.2.js" type="text/javascript">script>
<script src="../../jquery.validate.js" type="text/javascript">script>
<script src="../../jquery.metadata.js" type="text/javascript">script>


JQuery代码:
$("#formId").validate({
    rules:{
        username:{required:true,minlength:2},
        email:{required:true,email:true}
    },
    messages:{
        username:{required:"必须填写",minlength:"最少2个字符"}

}   
})

<form class="cmxform" id="formId" method="post" action="">
  <fieldset>
    <legend>输入您的名字,邮箱,legend>
    <p>
      <label for="cname">Name (必需, 最小两个字母)label>
      <input id="cname" name="username"  type="text" >
    p>
    <p>
      <label for="cemail">E-Mail (必需)label>
      <input id="cemail" type="email" name="email" >
    p>
    <p>
      <input class="submit" type="submit" value="Submit">
    p>
  fieldset>
form>

2.将验证信息全部写在class属性中【不推荐】

"username" name="username" size="25" class="{validate: {required: true , minlength:2}}"  value="" />
"email" name="email" size="25"  class="{validate:{required: true , email: true}}"  value="" />
-------------------------------------------------------
JQuery代码:
$("#formId").validate({meta: "validate"});
//meta string方式

3.将要验证的规则作为元素的属性–将验证信息全部写在class属性中【不推荐】
PS:注意与2的区别
JQuery代码如下:

<script type="text/javascript">
$.validator.setDefaults({
    submitHandler: function() {
      alert("提交事件!");
      form.submit();
    }
});
  $(document).ready(function(){
    $("#formID").validate();
  });
  script>

同下~~

$().ready(function() {
 $("#formID").validate({
        submitHandler:function(form){
            alert("提交事件!");   
            form.submit();
        }    
    });
});

验证信息写入表单里面元素属性:

id="cusername" name="username" size="25" class="required" minlength="2" />
id="cemail" name="email" size="25"  class="required email" />

validation把验证规则都封装在了内部,调用from表单里标出的class和minlength属性,去告诉其自身所在input元素所用的验证规则。


4.通过extends扩展messages

jQuery.extend(jQuery.validator.messages, {
        required: "该字段不能为空",
        email: "请输入正确格式的电子邮件",
        url: "请输入合法的网址",
        date: "请输入合法的日期",
        dateISO: "请输入合法的日期 (ISO).",
        number: "请输入合法的数字",
        digits: "只能输入整数",
        creditcard: "请输入合法的信用卡号",
        notnull:"不能为空"
});

5.另外可以自定义表单验证,比如手机号
自定义表单验证

你可能感兴趣的:(#,JQuery)