<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>validate</title>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/jquery.validate.js" ></script>
<script type="text/javascript">
$(function(){
var vali=$("#testForm").validate({
rules:{
user:{
required:true,
// minlength:2,
// maxlength:10,
rangelength:[2,10],//长度范围
// remote:"jsonT/data.txt",//远程校验
// url:true,//url格式
// email:true,//邮箱格式
date:true,//日期格式
// dateISO:true,//标准日期格式yyyy-mm-dd 也可用/
// digits:true,//非负的整数
// number:true,
},
pass:{
required:true,
// minlength:2,
// maxlength:10,
// remote:{
// url:"",
// type:"post",
// data:{
//
// }
// }
},
passre:{
equalTo:"#mima",//必须和谁相等
}
},
messages:{
user:{
required:"必须填写用户名",
minlength:"用户名最小为2位",
maxlength:"用户名最大长度为10位"
},
pass:{
required:"必须填写密码",
minlength:"密码长度最小为2位",
maxlength:"密码长度最大为10"
}
}
});
vali.showErrors({
pass:"你填错了",
user:"哟普你不用户名错了",
})
$("#check").click(function(){
alert($("#testForm").valid()?"填写正确":"填写错误");
})
// $("#mima").rules("add",{})//添加规则
/**
* validate()方法会返回validate对象,此对象的方法:
* validate.form()//验证表单是否有效
* validate.element(selector)验证元素是否有效
* validate.resetForm()回到验证之前的状态
* validate.showErrors(options)//错误信息
* validate.numberOfInvalids()//返回无效信息的个数
*
* 静态方法 $.validator.format("{0}-{1}-{2}");占位符
* 例: var temp=$.validator.format("{0}-{1}-{2}");
* temp("ni ","w","ta");
* $.validator.setDefaults();//设置默认设置
* $.validator.setDefaults(function(){
* debug:true,
* })
*
* classMing添加规则、、
* $.validator.addClassRules()
* $.validator.addClassRules({
* aaa:{
* //规则
* }
* })
*
* validate()中配置项//
* 提交时验证通过触发的
* submitHandler:function(aa){
*
* }
* 验证为通过触发
* invalidHandler:function(event,validator){
*
* }
* invalid-form事件
*
* ignore:"selector"//忽略验证的元素
*
* 在规则中可以使用depends属性来决定此规则是否生效，属性值返回true才进行此属性校验
*
* groups:{}//用来将要元素的错误信息元素存放进去
* groups:{
* login："user pass"
* }//用来将要元素的错误信息元素存放进,跟errorPlacement:function(error,element){}一块使用
*
* error 为错误信息
* error.insertBefore();//存放位置
*
* onsubmit 、 onfocusout（是否在获取焦点时验证）、onkeyup、onclick（点击时验证、一般用在复选框或单选）
* focusInvalid 验证未通过的信息是否获取焦点、focusCleanup未通过验证的信息是否在获取焦点时移除错误信息
*
* errorClass:"" 错误提示的class名 自定义样式
* validClass:""
*
* errorElement: 用什么标签标记错误
* wrapper: 用什么标签将上面标签包裹
* errorLabelContainer 用容器将错误信息统一存储
* errorContainer 显示或隐藏验证信息，可以自动在有错误是显示容器，没有时隐藏
*
* showErrors:function(errorMap,errorList){//errorMap显示的只有错误的信息 ，errorList存放的更详细 ，存储的是对象
*
* this.defaultErrors();//默认信息
* }
*
* sucess:""//通过的元素添加class名 如果为函数 参数为通过的元素 针对label元素
*
* highlight:function(element,errorClass,validClass){}//可以给为通过验证的元素添加效果 针对input元素
* unhighlight:function(element,errorClass,validClass){}//验证未通过去除效果
*
* //选择器扩展 :blank值为空 :filled不为空 :unchecked未选中
*
*
* ==================================================================================
*
* 自定义验证方法
* $.validator.addMethod(name,method[,message]); name为方法名称例如 postcode
*
*/
});
</script>
</head>
<body>
<form id="testForm">
用户名<input type="text" placeholder="请输入用户名" name="user"/>
密码<input type="password" id="mima" name="pass"/>
确认密码<input type="password" name="passre"/>
<input type="submit" />
<input type="button" id="check" />
</form>
</body>
</html>