首先需要引入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可以用确认密码来理解,如上述代码