jQuery Validate插件实现表单验证

2020-05-23 06:17:28易采站长站整理

<div>
<button type="submit">提交</button>
</div>
</div>
</form>
</body>
<script type="text/javascript">
$("#demo").validate({
rules:{
username:{
required:true,
/*默认效验规则*/
account :true,
/*最短6位数,最长16位数*/
minlength:6,
maxlength:16

},
tel:{
required:true,
/*默认效验规则*/
number:true
},
email:{
required:true,
/*默认效验规则*/
email:true
},
bt:{
/*默认必填*/
required:true,
},
password:{
required:true,
minlength:6,
maxlength:16,
/*密码验证*/
equalTo:"#password"
},
},
/*错误提示*/
messages:{
username:{
/*错误显示的提示语*/
required:"请填写由数字、26个英文字母或者下划线组成的帐号!",
minlength:"帐号最小为6位",
maxlength:"帐号最大为16位",
},
tel:{
required:"请填写手机号码",
},
email:{
required:"请填写邮箱",
},
password:{
required:"请填写密码",
minlength:"密码最小为6位",
maxlength:"密码最大为16位",
},
},
});
/*创建自定义正则表达式语法*/
$.validator.addMethod("account",function(value,element,params){
var account = /^w{3,20}$/;
return (account.test(value));
},"请填写由数字、26个英文字母或者下划线组成的帐号!");
$.validator.addMethod("number",function(value,element,params){
var number = /^(((13[0-9]{1})|(15[0-35-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+d{8})$/;
return (number.test(value));
},"请填写正确的手机号码!");
</script>
</html>

浏览器结果:

代码演示操作结果
这里写图片描述

默认校验规则

常用的正则表达式

一、校验数字的表达式

1 数字:^[0-9]*$
2 n位的数字:^d{n}$
3 至少n位的数字:^d{n,}$
4 m-n位的数字:^d{m,n}$
5 零和非零开头的数字:^(0|[1-9][0-9]*)$
6 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(.[0-9]{1,2})?$
7 带1-2位小数的正数或负数:^(-)?d+(.d{1,2})?$
8 正数、负数、和小数:^(-|+)?d+(.d+)?$
9 有两位小数的正实数:^[0-9]+(.[0-9]{2})?$
10 有1~3位小数的正实数:^[0-9]+(.[0-9]{1,3})?$
11 非零的正整数:^[1-9]d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^+?[1-9][0-9]*$
12 非零的负整数:^-[1-9][]0-9″*$ 或 ^-[1-9]d*$
13 非负整数:^d+$ 或 ^[1-9]d*|0$