最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
详解jquery validation验证表单插件
时间:2022-06-25 17:23:28 编辑:袖梨 来源:一聚教程网
jQuery验证表单插件——jquery-validation
The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy. ——官方介绍
validation使用步骤
引入jQuery库和validation插件
如果需要官方的国际化提示信息,可以导入相应的messages_xx.js库文件。
PS:下载地址:GitHub jzaefferer/jquery-validation
选中表单元素,显式调用验证方法
代码如下 | 复制代码 |
书写验证规则和消息
代码如下 | 复制代码 |
$(function() {
$("#form").validate({
rules:{},
messages:{}
});
});
|
rules规则语法
rules:{
字段名:校验器,
字段名:校验器,...
}
校验器语法
校验器:值,
校验器:值,...
messages提示语法
校验器取值
案例
代码如下 | 复制代码 |
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:2
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
digits:true,
minlength:6,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
minlength:2
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空!",
minlength:"用户名不得少于2个字符!"
},
password:{
required:"密码不能为空!",
digits:"密码必须是数字!",
minlength:"密码长度不得低于6位!"
},
repassword:{
required:"确认密码不能为空!",
digits:"密码必须是数字!",
minlength:"密码长度不得低于6位!",
equalTo:"两次密码不一致!"
},
email:{
required:"邮箱不能为空!",
email:"邮箱格式不正确!"
},
username:{
required:"姓名不能为空!",
minlength:"姓名不得少于2个字符!"
},
sex:{
required:"性别必须勾选!"
}
},
errorElement:"label",//用来创建错误提示信息标签
success:function(label) {//验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ")//清空错误提示消息
.addClass("success");//加上自定义的success类
}
});
})
|
相关文章
- 《原神》5.2卡池抽取建议 11-14
- 《原神》5.2版本新怪物介绍 11-14
- 《原神》希诺宁增伤触发方法 11-14
- 《原神》循音觅奇活动入口 11-14
- 《原神》循音觅奇兑换码获取方法 11-14
- 《原神》花羽会活动飞行技巧介绍 11-14