BootstrapValidator表单验证超详细教程

2023年6月21日发(作者：)

BootstrapValidator表单验证超详细教程⼀、 引⼊js 和css⽂件

在有jquery和bootstrap的页⾯⾥引⼊1. 　　2. 　　链接: 密码: 请加我qq（2353806846）获取⼆、 编写html然后建⽴⼀个form表单，添加表单控件，若对某⼀字段想添加验证规则，默认需要以

包裹（对应错误提⽰会根据该class值定位），内部标签必须有name属性值，此值为验证匹配字段。注：该值不是绝对的，也可以通过js⼿动指定错误提⽰位置和验证的输⼊框（后续会讲解到）。

Username

Email address

三、添加验证规则1、在html 标签中添加2、 添加 js ⽂件$(function () {

$("#form-test").bootstrapValidator({

live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证

excluded: [':disabled', ':hidden', ':not(:visible)'],//排除⽆需验证的控件，⽐如被禁⽤的或者被隐藏的

submitButtons: '#btn-test',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反⽽加了这句话⾮submit按钮也会提交到action指定页⾯

message: '通⽤的验证失败消息',//好像从来没出现过

feedbackIcons: {//根据验证结果显⽰的各种图标

valid: 'glyphicon glyphicon-ok',

invalid: 'glyphicon glyphicon-remove',

validating: 'glyphicon glyphicon-refresh'

},

fields: {

text: {

validators: {

notEmpty: {//检测⾮空,radio也可⽤

message: '⽂本框必须输⼊'

},

stringLength: {//检测长度

min: 6,

max: 30,

message: '长度必须在6-30之间'

},

regexp: {//正则验证

regexp: /^[a-zA-Z0-9_.]+$/, message: '所输⼊的字符不符要求'

},

remote: {//将内容发送⾄指定页⾯验证，返回验证结果，⽐如查询⽤户名是否存在

url: '指定页⾯',

message: 'The username is not available'

},

different: {//与指定⽂本框⽐较内容相同

field: '指定⽂本框name',

message: '不能与指定⽂本框内容相同'

},

emailAddress: {//验证email地址

message: '不是正确的email地址'

},

identical: {//与指定控件内容⽐较是否相同，⽐如两次密码不⼀致

field: 'confirmPassword',//指定控件name

message: '输⼊的内容不⼀致'

},

date: {//验证指定的⽇期格式

format: 'YYYY/MM/DD',

message: '⽇期格式不正确'

},

choice: {//check控件选择的数量

min: 2,

max: 4,

message: '必须选择2-4个选项'

}

}

}

}

});

$("#btn-test").click(function () {//⾮submit按钮点击后进⾏验证，如果是submit则⽆需此句直接验证

$("#form-test").bootstrapValidator('validate');//提交验证

if ($("#form-test").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执⾏下⾯代码

alert("yes");//验证成功后的操作，如ajax

}

});

});

四、前端⾃定义验证规则1、回调⾃定义验证Bootstrapvalidator的前端⾃定义验证为callback"rowkey": { message: 'rowkey验证失败', validators: { stringLength:{ max: 1000, message: 'rowkey不能超过1000个字符' }, callback:{ callback : function(value, validator, $field) { if ($('input:radio[name="databaseType"]:checked').val() == "Hbase" && value == ""){ return { valid: false, message: 'rowkey不能为空' } } else{ return true } } } }}2、拓展插件的validators⽅法将项⽬中常⽤的⽅法放到了⼀个单独js中$(function () { $.dCard = { /** * @param {BootstrapValidator} 表单验证实例对象 * @param {jQuery} $field jQuery 对象 * @param {Object} 表单验证配置项值 * @returns {boolean} */ validate: function (validator, $field, options) { // debugger; try { return checkIdCardNo($()); }catch (e){ (e); } return false; } };}());

3、remote 后端⾃定义验证 Bootstrapvalidator的前端⾃定义验证为remote，在数据库验重时经常会⽤到

"tableName": { message: '表名称验证失败', validators: { notEmpty: { message: '表名称不能为空' }, stringLength:{ max: 100, message: '表名称不能超过100个字符' }, remote: { message: '表名重复', url: 'check', data : '',//这⾥默认会传递该验证字段的值到后端 delay: 2000 //这⾥特别要说明，必须要加此属性，否则⽤户输⼊⼀个字就会访问后台⼀次，会消耗⼤量的系统资源， } }},后端代码：//检测新增metaTableName是否重复 def check(){ def map = new HashMap() def result = () if(result){ ("valid",true)

}else{ ("valid",false) } render(map as JSON) // 注意后端传到前端的格式必须是带有valid属性的json对象才会被validator识别，　　　　　　　　　　　　　　　　 //　如果返回任何其他的值，页⾯验证将获取不到验证结果导致⽆法验证 }1. {"valid":false} //表⽰不合法，验证不通过

2. {"valid":true} //表⽰合法，验证通过

五、常⽤事件1、获取validator对象或实例⼀般使⽤校验是直接调⽤$(form).bootstrapValidator(options)来初始化validator。初始化后有两种⽅式获取validator对象或实例，可以⽤来调⽤其对象的⽅法，⽐如调⽤resetForm来重置表单。有两种⽅式获取：1）// Get plugin instance

var bootstrapValidator = $(form).data('bootstrapValidator');

// and then call method

Name(parameters)

这种⽅式获取的是BootstrapValidator的实例，可以直接调⽤其⽅法。2）$(form).bootstrapValidator(methodName, parameters);

这种⽅式获取的是代表当前form的jquery对象，调⽤⽅式是将⽅法名和参数分别传⼊到bootstrapValidator⽅法中，可以链式调⽤。两种⽅式的使⽤分别如下：// The first way

$(form)

.data('bootstrapValidator')

.updateStatus('birthday', 'NOT_VALIDATED')

.validateField('birthday');

// The second one

$(form)

.bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')

.bootstrapValidator('validateField', 'birthday');

2、重置某⼀单⼀验证字段验证规则$(formName).data(“bootstrapValidator”).updateStatus("fieldName", "NOT_VALIDATED", null );3、重置表单所有验证规则$(formName).data("bootstrapValidator").resetForm();4、⼿动触发表单验证//触发全部验证$(formName).data(“bootstrapValidator”).validate();//触发指定字段的验证$(formName).data(“bootstrapValidator”).validateField('fieldName');5、获取当前表单验证状态var flag = $(formName).data(“bootstrapValidator”).isValid();6、根据指定字段名称获取验证对象// element = jq对象 / nullvar element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');

2023年6月21日发(作者：)

BootstrapValidator表单验证超详细教程⼀、 引⼊js 和css⽂件

在有jquery和bootstrap的页⾯⾥引⼊1. 　　2. 　　链接: 密码: 请加我qq（2353806846）获取⼆、 编写html然后建⽴⼀个form表单，添加表单控件，若对某⼀字段想添加验证规则，默认需要以

包裹（对应错误提⽰会根据该class值定位），内部标签必须有name属性值，此值为验证匹配字段。注：该值不是绝对的，也可以通过js⼿动指定错误提⽰位置和验证的输⼊框（后续会讲解到）。

Username

Email address

三、添加验证规则1、在html 标签中添加2、 添加 js ⽂件$(function () {

$("#form-test").bootstrapValidator({

live: 'disabled',//验证时机，enabled是内容有变化就验证（默认），disabled和submitted是提交再验证

excluded: [':disabled', ':hidden', ':not(:visible)'],//排除⽆需验证的控件，⽐如被禁⽤的或者被隐藏的

submitButtons: '#btn-test',//指定提交按钮，如果验证失败则变成disabled，但我没试成功，反⽽加了这句话⾮submit按钮也会提交到action指定页⾯

message: '通⽤的验证失败消息',//好像从来没出现过

feedbackIcons: {//根据验证结果显⽰的各种图标

valid: 'glyphicon glyphicon-ok',

invalid: 'glyphicon glyphicon-remove',

validating: 'glyphicon glyphicon-refresh'

},

fields: {

text: {

validators: {

notEmpty: {//检测⾮空,radio也可⽤

message: '⽂本框必须输⼊'

},

stringLength: {//检测长度

min: 6,

max: 30,

message: '长度必须在6-30之间'

},

regexp: {//正则验证

regexp: /^[a-zA-Z0-9_.]+$/, message: '所输⼊的字符不符要求'

},

remote: {//将内容发送⾄指定页⾯验证，返回验证结果，⽐如查询⽤户名是否存在

url: '指定页⾯',

message: 'The username is not available'

},

different: {//与指定⽂本框⽐较内容相同

field: '指定⽂本框name',

message: '不能与指定⽂本框内容相同'

},

emailAddress: {//验证email地址

message: '不是正确的email地址'

},

identical: {//与指定控件内容⽐较是否相同，⽐如两次密码不⼀致

field: 'confirmPassword',//指定控件name

message: '输⼊的内容不⼀致'

},

date: {//验证指定的⽇期格式

format: 'YYYY/MM/DD',

message: '⽇期格式不正确'

},

choice: {//check控件选择的数量

min: 2,

max: 4,

message: '必须选择2-4个选项'

}

}

}

}

});

$("#btn-test").click(function () {//⾮submit按钮点击后进⾏验证，如果是submit则⽆需此句直接验证

$("#form-test").bootstrapValidator('validate');//提交验证

if ($("#form-test").data('bootstrapValidator').isValid()) {//获取验证结果，如果成功，执⾏下⾯代码

alert("yes");//验证成功后的操作，如ajax

}

});

});

四、前端⾃定义验证规则1、回调⾃定义验证Bootstrapvalidator的前端⾃定义验证为callback"rowkey": { message: 'rowkey验证失败', validators: { stringLength:{ max: 1000, message: 'rowkey不能超过1000个字符' }, callback:{ callback : function(value, validator, $field) { if ($('input:radio[name="databaseType"]:checked').val() == "Hbase" && value == ""){ return { valid: false, message: 'rowkey不能为空' } } else{ return true } } } }}2、拓展插件的validators⽅法将项⽬中常⽤的⽅法放到了⼀个单独js中$(function () { $.dCard = { /** * @param {BootstrapValidator} 表单验证实例对象 * @param {jQuery} $field jQuery 对象 * @param {Object} 表单验证配置项值 * @returns {boolean} */ validate: function (validator, $field, options) { // debugger; try { return checkIdCardNo($()); }catch (e){ (e); } return false; } };}());

3、remote 后端⾃定义验证 Bootstrapvalidator的前端⾃定义验证为remote，在数据库验重时经常会⽤到

"tableName": { message: '表名称验证失败', validators: { notEmpty: { message: '表名称不能为空' }, stringLength:{ max: 100, message: '表名称不能超过100个字符' }, remote: { message: '表名重复', url: 'check', data : '',//这⾥默认会传递该验证字段的值到后端 delay: 2000 //这⾥特别要说明，必须要加此属性，否则⽤户输⼊⼀个字就会访问后台⼀次，会消耗⼤量的系统资源， } }},后端代码：//检测新增metaTableName是否重复 def check(){ def map = new HashMap() def result = () if(result){ ("valid",true)

}else{ ("valid",false) } render(map as JSON) // 注意后端传到前端的格式必须是带有valid属性的json对象才会被validator识别，　　　　　　　　　　　　　　　　 //　如果返回任何其他的值，页⾯验证将获取不到验证结果导致⽆法验证 }1. {"valid":false} //表⽰不合法，验证不通过

2. {"valid":true} //表⽰合法，验证通过

五、常⽤事件1、获取validator对象或实例⼀般使⽤校验是直接调⽤$(form).bootstrapValidator(options)来初始化validator。初始化后有两种⽅式获取validator对象或实例，可以⽤来调⽤其对象的⽅法，⽐如调⽤resetForm来重置表单。有两种⽅式获取：1）// Get plugin instance

var bootstrapValidator = $(form).data('bootstrapValidator');

// and then call method

Name(parameters)

这种⽅式获取的是BootstrapValidator的实例，可以直接调⽤其⽅法。2）$(form).bootstrapValidator(methodName, parameters);

这种⽅式获取的是代表当前form的jquery对象，调⽤⽅式是将⽅法名和参数分别传⼊到bootstrapValidator⽅法中，可以链式调⽤。两种⽅式的使⽤分别如下：// The first way

$(form)

.data('bootstrapValidator')

.updateStatus('birthday', 'NOT_VALIDATED')

.validateField('birthday');

// The second one

$(form)

.bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')

.bootstrapValidator('validateField', 'birthday');

2、重置某⼀单⼀验证字段验证规则$(formName).data(“bootstrapValidator”).updateStatus("fieldName", "NOT_VALIDATED", null );3、重置表单所有验证规则$(formName).data("bootstrapValidator").resetForm();4、⼿动触发表单验证//触发全部验证$(formName).data(“bootstrapValidator”).validate();//触发指定字段的验证$(formName).data(“bootstrapValidator”).validateField('fieldName');5、获取当前表单验证状态var flag = $(formName).data(“bootstrapValidator”).isValid();6、根据指定字段名称获取验证对象// element = jq对象 / nullvar element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');