Validate使用及配置
官网地址：http://jqueryvalidation.org/
导入JS文件
下载压缩包后validate文件位于dist目录，目录中包含jquery.validate.js 与 additional-methods.js以及各自的min文件。additional-methods.js为附加的验证方法，可根据情况导入。
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/additional-methods.js" type="text/javascript"></script>使用方法
以注册页为例，需要验证用户名、密码、重复密码、验证码。其中用户名需检测唯一性，验证码需检测是否正确。form-register为表单ID，验证代码如下：
$().ready(function(){
$("#form-register").validate({
debug: true,
onfocusout: function (element) {
$(element).valid();
},
errorElement: 'label',
errorClass: 'text-error',
submitHandler: function(form) {
form.submit();
},
errorPlacement: function(error, element) {
if(element.attr("name") == 'data[captcha]') {
error.insertAfter("#captcha_msg");
} else {
error.insertAfter(element);
}
},
rules:{ 'data[username]': {
required: true,
minlength: 6,
maxlength:20,
lettersonly:true,
remote:{ url: "{{ site_url('ajax/user_check') }}", type: "post"
}},
'data[password]': {
required: true,
minlength: 6,
maxlength:50
},
'data[repassword]': {
required: true,
equalTo: "#password"
},
'data[captcha]': {
required: true,
minlength: 4,
remote:{ url: "{{ site_url('captcha/check') }}", type: "post" }
} },
messages:{}
});
});提示信息
点击提交按钮后验证不通过的会自动在input后增加提示信息
<label for="username" class="text-error" style="">This field is required.</label>默认提示信息为英文，可将下面提示信息保存到messages_zh.js并引入。
/* * Translated default messages for the jQuery validation plugin. * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語) */
(function ($) {
$.extend($.validator.messages,
{ required: "必填字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: $.validator.format("请输入一个最大为 {0} 的值"),
min: $.validator.format("请输入一个最小为 {0} 的值")
});
}(jQuery));默认的提示信息可能还不够友好，可以进提示信息进行配置，设置messages字段即可
messages:{
'data[username]': {
required: '请输入用户名',
minlength: '请输入6-20个英文字符',
maxlength: '请输入6-20个英文字符',
lettersonly: '请输入6-20个英文字符',
remote: '该用户名已被使用'
},
'data[password]': {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字 符"),
maxlength: jQuery.format("密码不能大于{0}个字 符")
},
'data[repassword]': {
required: "请输入确认密码",
equalTo: "两次密码输入不一致"
},
'data[captcha]': {
required: "请输入验证码",
minlength: "验证码输入错误",
remote: "验证码输入错误"
}
}常用设置
- debug：开启调试，当设置true时只验证， 不会提交表单。
- onfocusout：失去焦点验证，上例中是失去焦点就验证，不需要点击submit按钮。
- errorElement: 用来指定错误提示标签，默认为label。
- errorClass: 指定错误提示的css类名,可以自定义错误提示的样式。
- submitHandler：可以接管submit事件。
- errorPlacement：指定错误显示为位置，默认为验证元素后。
- rules：验证规则。
- message：指定提示信息。
- ignore：对某些元素不进行验证
自定义验证方法
addMethod(name,method,message)方法：
- 参数name是添加的方法的名字
- 参数method是一个函数,接收三个参数(value,element,param)
-
- value是元素的值,
- element是元素本身
- param是参数
如additional-methods.js中的lettersonly验证
jQuery.validator.addMethod("lettersonly", function(value, element) { return this.optional(element) || /^[a-z]+$/i.test(value); }, "Letters only please");本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-02-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读