插件就是将jquery实现的常用操作进行封装,封装后的小框架就可以叫做插件。
Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,常用于input,select,textarea的表单验证。
下载
使用
(图中网上有补充更多)
导包
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
表单
<input type="text" id="username" name="username"
placeholder="请输入用户名">
<input type="password" class="form-control" id="password" name="password"
placeholder="请输入密码">
<input type="password" " id="repassword" name="repassword"
placeholder="请输入确认密码">
<input type="email" id="email" name="email"
placeholder="Email">
<label > <input type="radio" name="sex" id="sex1" value="male">
男
</label> <label >
<input type="radio" name="sex" id="sex2" value="female">
女
</label>
<label class="error" for="sex" style="display:none">性别不能为空</label>
验证
sex-radio特殊
$(function(){
$("#myform").validate({
rules:{
"username":{"required":true},
"password":{"required":true,
"rangelength":[6,12]},
"repassword":{"required":true,
"rangelength":[6,12],
"equalTo":"#password"},
"email":{"required":true,
"email":true},
"sex":{"required":true}
},
message:{
"username":{"required":"用户名不能为空"},
"password":{"required":"密码不能为空",
"rangelength":"密码长度6-12位"},
"repassword":{"required":"密码不能为空",
"rangelength":"密码长度6-12位",
"equalTo":"密码不一致"},
"email":{"required":"邮箱不能为空",
"email":"邮箱格式不正确"},
}
});
});
自定义校验规则步骤如下:
(1) 使用$.validator.addMethod("校验规则名称",function(value,element,params)){}
(2) 在rules中通过校验规则名称使用校验规则
(3) 在messages中定义该规则对应的错误提示信息
element是校验组件的节点对象
params是校验规则的参数