validation插件的介绍
在进行页面注册等表单验证功能时,传统的判断方式往往需要许多重复,复杂的代码。而使用validation插件可以极大的简化这些步骤。
validation特点:
内置验证规则:拥有必填、数字、email、url和信用卡号码等19类内置验证规则
自定义验证规则:可以很方便的自定义验证规则
简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能
实时验证:可以通过keyup或bulr事件触发验证,而不仅仅在表单提交的时候验证。
validation插件的使用
1.下载插件
链接: [link] (http://bassistance.de/jquery-plugins/jquery-plugin-validation/)
2.导入jquery库和validation插件
<head>
<meta charset="UTF-8">
<title>网站注册页面</title>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
</head>
3.编写验证代码
表单验证格式
$("form表单的选择器").validate(json数据格式);
//json数据格式
{
rules:{
表单项name值:校验规则,
表单项name值:校验规则... ..
},
messages:{
表单项name值:错误提示信息,
表单项name值:错误提示信息... ...
}
}
常用校验规则
required:true 必输字段
email:true 必须输入正确的邮箱格式
url:true 必须输入正确的网址
date:true 必须输入正确的日期
dateISO:true 必须输入正确的日期格式(只验证格式,不验证有效性)
number:true 必须输入合法的数字(负数,小数)
digits:true 必须输入整数
creaditcard: 必须输入合法的信用卡号
equalTo:“#field” 输入值必须和#field相同(一般用于密码与确认密码判断)
accept: 输入拥有合法后缀名的字符串
maxlength:10 输入长度最多是10的字符串(汉字算一个字符)
minlength:5 输入长度最少是5的字符串 (汉字算一个字符)
rangelength:[5,10] 输入长度介于5到10之间的字符串 (汉字算一个字符)
range:[5,10] 输入值介于5到10之间
max:10 输入值不能大于10
min:5 输入值不能小于10
remote:“check.php” 使用ajax方法调用check.php输入验证值
自定义校验规则
//value是校验组件的value值,element是校验组件的节点对象,params是校验规则的参数
$.validator.addMethod("校验规则名称",function(value,element,params){})
示例
现有如下注册页面
我们可以定义相应的规则
$("#registForm").validate({
rules: {
user: {
required: true,
rangelength: [6, 16],
//验证正则表达式 自定义规则
checkUsername: true
},
password: {
required: true,
},
repassword: {
required: true,
equalTo: password
},
email: {
required: true,
email: true
},
username: {
required: true
},
sex: {
required: true
}
},
messages: {
user: {
required: "用户名不能为空",
rangelength: "长度在6-16个字符",
checkUsername: "不能以数字开头,不包含特殊字符"
},
password: {
required: "密码不能为空",
},
repassword: {
required: "确认密码不能为空",
equalTo: "输入与密码不同"
},
email: {
required: "邮箱不能为空",
email: "邮箱格式不正确"
},
username: {
required: "姓名不能为空"
},
sex: {
required: "性别未选择"
}
}
});
});
其中用户名要求不能以数字开头并且不包含特殊字符,默认规则无法实现,因此需要自定义规则。
//自己添加验证规则
$.validator.addMethod("checkUsername",
function(value,element,params){
let reg = /^[a-zA-Z]\w$/;
if (reg.test(value)){
return true;
}
});
这样,一个简单的表单验证功能就实现了。