jquery validation插件使用

时间:2022-05-10 22:37:48

首先需要引入jQuery.js和jquery.validate.js

以下面代码为例:

<form id="mainform">

<fieldset>

<legend>用户登录</legend></fieldset>

<p><label for="username">用户名</label><input name="username" type="text"/></p>

<p><label for="password">密码</label><input name="password" id="password" type="password"/></p>

<p><label for="confirm-password">密码</label><input name="confirm-password" type="password"/></p>

<p><button type="submit"></button></p>

</form>

 

<script>

$("#mainform").validate({

  debug:true,

  rules:{

    username:{

      required:true,

      minlength:2,

      maxlength:10

    },

    password:{

      ...

     },

    "confirm-password":{//注意由于名字里有-,所以需要“”

      equalTo:"#password"

     },

    messages:{

      username:{

        required:"必填",

        minlength:“密码最小为。。”,

        maxlength:“。。。”,

        //remote:validate.json//远程验证该用户名是否存在

      },

      password:{

        ...

       }

    }

  }

});

</script>

 还有一个debug属性,主要用于调试:当debug:true时,表单点击按钮时不会提交,可以帮助调试。

好了,下面说说validate的基本验证方法:required,remote(远程校验),minlength,maxlength,rangelength(长度范围),min,max,range(值范围)

email,url,date,dateISO(ISO日期),number(数字),digits(非负整数),equalTo(与另一个元素值相等)

remote的使用如上述注释代码,默认采用get方式,当然,还可以自己配置:

remote{

  url:"remote.json",//还可以html,aspx等

  type:'post',

  data:{

    logintime:function(0{

      return +new Date();

    }

  }

}

email:true

ISOdate指标准日期 yyyy-mm-dd

equalTo可以用确认密码来理解,如上述代码