最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
bootstrapValidator表单验证插件详解
时间：2022-06-25 18:10:55 编辑：袖梨 来源：一聚教程网
本文实例为大家分享了bootstrapValidator表单验证的具体代码，供大家参考，具体内容如下
1.页面引入css、js
| 代码如下 | 复制代码 |
|
|
|
2.页面表单
| 代码如下 | 复制代码 |
|
textareacols="80"rows="3"class="form-control"id="memo"name="memo">
|
|
3.js初始化验证
| 代码如下 | 复制代码 |
|
//验证表单
varvalidatorForm = {
//验证规则
validatorReuls:function(){
$("#detailForm").bootstrapValidator({
feedbackIcons: {
valid:'glyphicon glyphicon-ok',
invalid:'glyphicon glyphicon-remove',
validating:'glyphicon glyphicon-refresh'
},
fields: {
userName:{
validators: {
notEmpty: {
message:'用户名不能为空'
},
remote: {////ajax验证。服务器端返回的 result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: contextPath+"/sysUser/username",
type:"GET",
data:function(validator) {
varx_={
userName: validator.getFieldElements('userName').val()
};
returnx_;
},
message:'用户名已注册，请重新输入'
}
}
},
email: {
validators: {
notEmpty: {
message:'邮箱不能为空'
},
regexp: {//正则表达式
regexp: Regex.email,
message:'邮箱地址格式不正确'
}
}
}
,userPassword: {
validators: {
notEmpty: {
message:'密码不能为空'
},
regexp: {
regexp: Regex.password_6_18,
message:'密码只能输入6-18个字母、数字、下划线 '
}
}
}
}
});
},
//验证表单
validate:function(formId){
$('#'+formId).data('bootstrapValidator').validate();
},
//验证表单是否通过验证
isValid :function(formId){
return$('#'+formId).data('bootstrapValidator').isValid()
},
//清空表单验证
clearValidate :function(formId){
$('#'+formId).bootstrapValidator('resetForm');
}
}
|
|
4.最后呈现的效果
相关文章
- 空洞骑士丝之歌掘洞钻在哪弄 掘洞钻获取方式介绍 09-15
- 超级机器人大战Y野花造访花园怎么过 第一章通关流程攻略 09-15
- 原神久岐忍天赋要升到多少级 久岐忍天赋加点攻略 09-15
- 空洞骑士丝之歌螺切刃怎么拿 螺切刃获取方法介绍 09-15
- 超级机器人大战YDKEY怎么买 正版CDKEY购买教程 09-15
- 无主之地4崩塌之墙调查城墙方法 城墙调查在哪 09-15