一、jQuery.validate简介
jQuery.validate.js插件用于对表单输入进行验证,其使用配置非常简单。支持多事件触发,自带多种验证规则,还支持自定义验证规则。
1、配置方法
先导入jQuery库,然后导入Validate插件,如果是中文提示还需要导入messages_zh.js。
注意Validate的导入要在jQuery库之后。代码如下:
在$(document).ready()里加入验证规则与错误提示位置,代码如下:
JS代码:
自定义验证规则*/
rules:{
username:{ required:true,minlength:6 },userpass:{ required:true,minlength:10 }
},/*错误提示位置*/
errorPlacement:function(error,element){
error.appendTo(element.siblings("span"));
}
});
})
这样就完成了非常简单的表单验证功能,当表单填写不正确时Validate在的兄弟元素里显示错误提示。
2、name属性
说明:jQuery.validate.js插件与的关联使用的是表单的name属性。只有存在name属性的才能验证!
二、自定义错误提示位置
答案就是在errorPlacement参数里,你可以按照自己的需要自定义书写,用的是jQuery
错误提示位置*/
errorPlacement:function(error,element){ //第一个参数是错误的提示文字,第二个参数是当前输入框
error.appendTo(element.siblings("span")); //用的是jQuery,这里设置的是,错误提示文本显示在当前文本框的兄弟span中
}
三、自定义错误提示信息
例如当我们有多个require:true选项,我想根据不同的选项设置不同的提示怎么办呢?
答案就是在messages参数里。用层层嵌套的方式设置自己需要的提示信息。如果某个字段没有message信息,这时才调用默认的提示信息。
required: "请输入用户名!" //注意,同样是必填项,但是优先显示在messages里的提示信息
},Email:{
required:"请输入邮箱地址!" //不会统一输出 必填字段 了哦
}
}
实际上,jQuery.Validate默认的错误提示是生成一个class=error的label,所以,如果想设置样式,最简单的方法就是针对这个label设置就OK了,当然默认的label是可以手动更改的。
四、ajax异步验证
只需要用到remote即可,注意后台返回的JSON只能够是true或false。表单验证插件