jQuery表单验证插件bootstrapValidator使用方法及规则总结
班展
一.首先引入BootstrapValidator插件
- BootstrapValidator插件需要jQuery和Bootstrap 3
- 引入js和css文件
-
css：
bootstrap.min.css
bootstrapValidator.min.css
js:
jquery-1.10.2.min.js
bootstrap.min.js
bootstrapValidator.min.js
二.一个简单的例子
$(function () {
/*初始化校验插件*/
/*1.是form表单结构 并且有一个提交按钮*/
$('#login').bootstrapValidator({
/*配置校验的不同状态下显示的图标*/
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
/*需要校验的表单元素 通过名称 name*/
fields: {
/*对应表单元素的name*/
username: {
/*校验规则 多个校验规则*/
validators: {
notEmpty: {
message: '请输入用户名'
},
/*配置一个校验规则*/
callback:{
message:'用户名不存在'
}
}
},
password: {
validators: {
notEmpty: {
message: '请输入密码'
},
stringLength: {
min: 6,
max: 18,
message: '密码必须是6-18个字符'
},
callback:{
message:'密码错误'
}
}
}
}
}).on('success.form.bv', function (e) {
/*校验成功的时候出发*/
/*组织表单的默认提交 使用ajax提交*/
e.preventDefault();
/*后台校验用户名和密码*/
var $form = $(e.target);
$.ajax({
type:'post',
url:'/employee/employeeLogin',
data:$form.serialize(),
dataType:'json',
success:function (data) {
/*业务成功*/
if(data.success == true){
/*跳转后台的首页*/
location.href = '/admin33/';
}
/*业务失败*/
else {
if(data.error == 1000){
/*用户名错误*/
/*设置用户名这个表单元素的校验状态为失败*/
/*NOT_VALIDATED 还没校验, VALIDATING 校验中, INVALID 失败 or VALID 成功*/
/*1.获取校验组件*/
/*2.调研更改状态的函数*/
/*3.校验的表单，改成什么状态，使用哪个校验规则*/
$form.data('bootstrapValidator').updateStatus('username','INVALID','callback');
}else if(data.error == 1001){
/*密码错误*/
$form.data('bootstrapValidator').updateStatus('password','INVALID','callback');
}
}
}
});
});
});三.其它验证案例
$(function(){/* 文档加载，执行一个函数*/
$('#defaultForm')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {/*input状态样式图片*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {/*验证：规则*/
username: {//验证input项：验证规则
message: 'The username is not valid',
validators: {
notEmpty: {//非空验证：提示消息
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
threshold : 6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: 'exist2.do',//验证地址
message: '用户已存在',//提示消息
delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
/**自定义提交数据，默认值提交当前input value
* data: function(validator) {
return {
password: $('[name="passwordNameAttributeInYourForm"]').val(),
whatever: $('[name="whateverNameAttributeInYourForm"]').val()
};
}
*/
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: '用户名由数字字母下划线和.组成'
}
}
},
password: {
message:'密码无效',
validators: {
notEmpty: {
message: '密码不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
identical: {//相同
field: 'password', //需要进行比较的input name值
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'username',//需要进行比较的input name值
message: '不能和用户名相同'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
repassword: {
message: '密码无效',
validators: {
notEmpty: {
message: '用户名不能为空'
},
stringLength: {
min: 6,
max: 30,
message: '用户名长度必须在6到30之间'
},
identical: {//相同
field: 'password',
message: '两次密码不一致'
},
different: {//不能和用户名相同
field: 'username',
message: '不能和用户名相同'
},
regexp: {//匹配规则
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: '邮件不能为空'
},
emailAddress: {
message: '请输入正确的邮件地址如：123@qq.com'
}
}
},
phone: {
message: 'The phone is not valid',
validators: {
notEmpty: {
message: '手机号码不能为空'
},
stringLength: {
min: 11,
max: 11,
message: '请输入11位手机号码'
},
regexp: {
regexp: /^1[3|5|8]{1}[0-9]{9}$/,
message: '请输入正确的手机号码'
}
}
},
invite: {
message: '邀请码',
validators: {
notEmpty: {
message: '邀请码不能为空'
},
stringLength: {
min: 8,
max: 8,
message: '请输入正确长度的邀请码'
},
regexp: {
regexp: /^[\w]{8}$/,
message: '请输入正确的邀请码(包含数字字母)'
}
}
},
}
})
.on('success.form.bv', function(e) {//点击提交之后
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data 提交至form标签中的action，result自定义
$.post($form.attr('action'), $form.serialize(), function(result) {
//do something...
});
});
});
四.常见验证类型总结
1.判断字段是否为空
notEmpty: {
message: '用户名必填不能为空'
},2.字段长度判断
stringLength: {
min: 6,
max: 30,
message: '用户名长度不能小于6位或超过30位'
},3.通过正则表达式进行验证
regexp: {
regexp: /^[A-Z\s]+$/i,
message: '名字只能由字母字符和空格组成。'
}4.大小写验证
stringCase: {
message: '姓氏必须只包含大写字符。',
case: 'upper'//其他值或不填表示只能小写字符
},5.两个字段不相同的判断
different: {
field: 'password',
message: '用户名和密码不能相同。'
}6.email验证
emailAddress: {
message: '填写内容非邮箱地址'
}
7.日期格式验证
date: {
format: 'YYYY/MM/DD',
message: '日期无效'
}8.纯数字验证
digits: {
message: '该值只能包含数字。'
}9.ajax验证
threshold : 6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: 'exist2.do',//验证地址
message: '用户已存在',//提示消息
delay : 2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST'//请求方式
},10.复选框验证
choice: {
min: 2,
max: 4,
message: '请选择2-4项'
}
11.密码确认
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
},12.判断输入数字是否符合大于18小于100
greaterThan: {
value: 18
},
lessThan: {
value: 100
}规则总结来自：https://blog.csdn.net/asd245025733/article/details/78061577
类似资料：