2023年6月21日发(作者：)
BootstrapValidator校验使⽤⽅法和校验规则总结⼀.⾸先引⼊BootstrapValidator插件BootstrapValidator插件需要jQuery和Bootstrap 3引⼊js和css⽂件⼆.添加验证规则1.使⽤HTML添加简单验证如果想对某⼀个字段添加验证规则，需要包裹，input标签必须有name值，此值为验证匹配的字段。
data-bv-notempty="true"
data-bv-notempty-message="不能为空">
默认的提⽰消息 message: 'This value is not valid', //
表单框⾥右侧的icon feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitHandler: function (validator, form, submitButton) { //
表单提交成功时会调⽤此⽅法 // validator:
表单验证实例对象 // form jq对象
指定表单对象 // submitButton jq对象
指定提交按钮的对象 }, fields: { username: { message: '⽤户名验证失败', validators: { notEmpty: { message: '⽤户名不能为空' }, stringLength: { //长度限制 min: 6, max: 18, message: '⽤户名长度必须在6到18位之间' }, regexp: { //正则表达式 regexp: /^[a-zA-Z0-9_]+$/, message: '⽤户名只能包含⼤写、⼩写、数字和下划线' }, different: { //⽐较 field: 'username', //需要进⾏⽐较的input name值 message: '密码不能与⽤户名相同' }, identical: { //⽐较是否相同 field: 'password', //需要进⾏⽐较的input name值 message: '两次密码不⼀致' }, remote: { // ajax校验，获得⼀个json数据（{'valid': true or false}） url: '', //验证地址 message: '⽤户已存在', //提⽰信息 type: 'POST', //请求⽅式 data: function(validator){ //⾃定义提交数据，默认为当前input name值 return { act: 'is_registered', username: $("input[name='username']").val() }; } } } }, email: { validators: { notEmpty: { message: '邮箱地址不能为空' }, emailAddress: { message: '邮箱地址格式有误' } } } } });三.在validators中⼀些验证规则的总结1.判断字段是否为空 notEmpty: { message: '⽤户名必填不能为空' },2.字段长度判断stringLength: { min: 6, max: 30, message: '⽤户名长度不能⼩于6位或超过30位' },3.通过正则表达式进⾏验证regexp: { regexp: /^[A-Zs]+$/i, message: '名字只能由字母字符和空格组成。' }4.⼤⼩写验证stringCase: { message: '姓⽒必须只包含⼤写字符。', case: 'upper'//其他值或不填表⽰只能⼩写字符 },5.两个字段不相同的判断different: { field: 'password', message: '⽤户名和密码不能相同。' }验证emailAddress: { message: 'The input is not a valid email address' }7.⽇期格式验证date: { format: 'YYYY/MM/DD', message: '⽇期⽆效' }8.纯数字验证 digits: { message: '该值只能包含数字。' }验证threshold : 6 , //有6字符以上才发送ajax请求，（input中输⼊⼀个字符，插件会向服务器发送⼀次，设置限制，6字符以上才开始）remote: {//ajax验证。server result:{"valid",true or false}
向服务发送当前input name值，获得⼀个json数据。例表⽰正确：{"valid",true}
url: '',//验证地址 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⼩于100greaterThan: { value: 18 },lessThan: { value: 100 }验证uri: {}四、callback⾃定义校验规则 schoolName: { validators: { notEmpty: { message: '请选择分⽀机构' }, callback: { message: '请选择分⽀机构', callback: function(value, validator) { //这⾥可以⾃定义value的判断规则 if (value == 0) {//"请选择" //错误的参数值 return false; } else { //合格的参数值 return true; } } } } },
2023年6月21日发(作者：)
BootstrapValidator校验使⽤⽅法和校验规则总结⼀.⾸先引⼊BootstrapValidator插件BootstrapValidator插件需要jQuery和Bootstrap 3引⼊js和css⽂件⼆.添加验证规则1.使⽤HTML添加简单验证如果想对某⼀个字段添加验证规则，需要包裹，input标签必须有name值，此值为验证匹配的字段。
data-bv-notempty="true"
data-bv-notempty-message="不能为空">
默认的提⽰消息 message: 'This value is not valid', //
表单框⾥右侧的icon feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitHandler: function (validator, form, submitButton) { //
表单提交成功时会调⽤此⽅法 // validator:
表单验证实例对象 // form jq对象
指定表单对象 // submitButton jq对象
指定提交按钮的对象 }, fields: { username: { message: '⽤户名验证失败', validators: { notEmpty: { message: '⽤户名不能为空' }, stringLength: { //长度限制 min: 6, max: 18, message: '⽤户名长度必须在6到18位之间' }, regexp: { //正则表达式 regexp: /^[a-zA-Z0-9_]+$/, message: '⽤户名只能包含⼤写、⼩写、数字和下划线' }, different: { //⽐较 field: 'username', //需要进⾏⽐较的input name值 message: '密码不能与⽤户名相同' }, identical: { //⽐较是否相同 field: 'password', //需要进⾏⽐较的input name值 message: '两次密码不⼀致' }, remote: { // ajax校验，获得⼀个json数据（{'valid': true or false}） url: '', //验证地址 message: '⽤户已存在', //提⽰信息 type: 'POST', //请求⽅式 data: function(validator){ //⾃定义提交数据，默认为当前input name值 return { act: 'is_registered', username: $("input[name='username']").val() }; } } } }, email: { validators: { notEmpty: { message: '邮箱地址不能为空' }, emailAddress: { message: '邮箱地址格式有误' } } } } });三.在validators中⼀些验证规则的总结1.判断字段是否为空 notEmpty: { message: '⽤户名必填不能为空' },2.字段长度判断stringLength: { min: 6, max: 30, message: '⽤户名长度不能⼩于6位或超过30位' },3.通过正则表达式进⾏验证regexp: { regexp: /^[A-Zs]+$/i, message: '名字只能由字母字符和空格组成。' }4.⼤⼩写验证stringCase: { message: '姓⽒必须只包含⼤写字符。', case: 'upper'//其他值或不填表⽰只能⼩写字符 },5.两个字段不相同的判断different: { field: 'password', message: '⽤户名和密码不能相同。' }验证emailAddress: { message: 'The input is not a valid email address' }7.⽇期格式验证date: { format: 'YYYY/MM/DD', message: '⽇期⽆效' }8.纯数字验证 digits: { message: '该值只能包含数字。' }验证threshold : 6 , //有6字符以上才发送ajax请求，（input中输⼊⼀个字符，插件会向服务器发送⼀次，设置限制，6字符以上才开始）remote: {//ajax验证。server result:{"valid",true or false}
向服务发送当前input name值，获得⼀个json数据。例表⽰正确：{"valid",true}
url: '',//验证地址 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⼩于100greaterThan: { value: 18 },lessThan: { value: 100 }验证uri: {}四、callback⾃定义校验规则 schoolName: { validators: { notEmpty: { message: '请选择分⽀机构' }, callback: { message: '请选择分⽀机构', callback: function(value, validator) { //这⾥可以⾃定义value的判断规则 if (value == 0) {//"请选择" //错误的参数值 return false; } else { //合格的参数值 return true; } } } } },
发布评论