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

BootstrapValidator：表单验证神器前⾔：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提⽰能增加⽤户体验。博主搜索bootstrap表单验证，搜到的结果⼤部分都是⽂中的主题：bootstrapvalidator。今天就来看看它如何使⽤吧。⼀、源码及API地址介绍它之前，还是给出它的源码以及API的地址吧。bootstrapvalidator源码：boostrapvalidator api：⼆、代码以及效果展⽰1、初级⽤法来看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它⾄少需要jQuery、bootstrap的⽀持。我们⾸先引⼊需要的js组件　　 我们知道，既然是表单验证，那么我们在cshtml页⾯就必须要有⼀个Form，并且我们知道Form⾥⾯取元素都是通过name属性去取值的，所以，表单⾥⾯的元素都要有⼀个name的属性值。　　　　　

有了表单元素之后，就是我们的js初始化了。 $(function () { $('form').bootstrapValidator({　　　　　　　　message: 'This value is not valid', 　feedbackIcons: { 　　　　　　　　valid: 'glyphicon glyphicon-ok', 　　　　　　　　invalid: 'glyphicon glyphicon-remove', 　　　　　　　　validating: 'glyphicon glyphicon-refresh' 　　　　　　　　 }, fields: { username: { message: '⽤户名验证失败', validators: { notEmpty: { message: '⽤户名不能为空' } } }, email: { validators: { notEmpty: { message: '邮箱地址不能为空' } } } } }); });内容应该很容易看懂。来看效果：验证通不过，提交按钮灰掉不能点击验证通过，提交按钮恢复看看效果先感受下，最⼤优点：使⽤简单，界⾯友好。下⾯我们来看看重叠验证。2、中级⽤法上⾯我们知道了⾮空验证的写法，除此之外肯定还有其他验证⽅式啊。别急，我们慢慢来看。上⾯的代码cshtml部分不动，js部分我们稍作修改：　　$(function () { $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: '⽤户名验证失败', validators: { notEmpty: { message: '⽤户名不能为空' }, stringLength: { min: 6, max: 18, message: '⽤户名长度必须在6到18位之间' }, regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: '⽤户名只能包含⼤写、⼩写、数字和下划线' } } }, email: { validators: { notEmpty: { message: '邮箱不能为空' }, emailAddress: { message: '邮箱地址格式有误' } } } } }); });加上了重叠验证我们来看效果：由上⾯的代码可以看出在validators属性对应⼀个Json对象，⾥⾯可以包含多个验证的类型：notEmpty：⾮空验证；stringLength：字符串长度验证；regexp：正则表达式验证；emailAddress：邮箱地址验证（都不⽤我们去写邮箱的正则了~~）除此之外，在⽂档⾥⾯我们看到它总共有46个验证类型，我们抽⼏个常见的出来看看：：64位编码验证；：验证输⼊值必须在某⼀个范围值以内，⽐如⼤于10⼩于100；：⾝份证验证；：⽇期验证；：IP地址验证；：数值验证；：电话号码验证；：url验证；更多验证类型详见：。当然涉及中⽂的验证可能会有些⼩问题，园友们如果有需要可以⾃⾏下去⽤代码测试下。还有⼀个⽐较常⽤的就是submitHandler属性，它对应着提交按钮的事件⽅法。使⽤如下：$(function () { $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: '⽤户名验证失败', validators: { notEmpty: { message: '⽤户名不能为空' }, stringLength: { min: 6, max: 18, message: '⽤户名长度必须在6到18位之间' }, regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: '⽤户名只能包含⼤写、⼩写、数字和下划线' } } }, email: { validators: { notEmpty: { message: '邮箱不能为空' }, emailAddress: { message: '邮箱地址格式有误' } } } }, submitHandler: function (validator, form, submitButton) { alert("submit"); } }); });在它的Demo⾥⾯介绍了很多验证的实例。我们简单看看它的效果，⾄于实现代码，其实很简单，有兴趣的可以直接看api。颜⾊验证Tab页表单验证按钮验证 转⾃：/landeanfen/p/

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

BootstrapValidator：表单验证神器前⾔：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提⽰能增加⽤户体验。博主搜索bootstrap表单验证，搜到的结果⼤部分都是⽂中的主题：bootstrapvalidator。今天就来看看它如何使⽤吧。⼀、源码及API地址介绍它之前，还是给出它的源码以及API的地址吧。bootstrapvalidator源码：boostrapvalidator api：⼆、代码以及效果展⽰1、初级⽤法来看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它⾄少需要jQuery、bootstrap的⽀持。我们⾸先引⼊需要的js组件　　 我们知道，既然是表单验证，那么我们在cshtml页⾯就必须要有⼀个Form，并且我们知道Form⾥⾯取元素都是通过name属性去取值的，所以，表单⾥⾯的元素都要有⼀个name的属性值。　　　　　

有了表单元素之后，就是我们的js初始化了。 $(function () { $('form').bootstrapValidator({　　　　　　　　message: 'This value is not valid', 　feedbackIcons: { 　　　　　　　　valid: 'glyphicon glyphicon-ok', 　　　　　　　　invalid: 'glyphicon glyphicon-remove', 　　　　　　　　validating: 'glyphicon glyphicon-refresh' 　　　　　　　　 }, fields: { username: { message: '⽤户名验证失败', validators: { notEmpty: { message: '⽤户名不能为空' } } }, email: { validators: { notEmpty: { message: '邮箱地址不能为空' } } } } }); });内容应该很容易看懂。来看效果：验证通不过，提交按钮灰掉不能点击验证通过，提交按钮恢复看看效果先感受下，最⼤优点：使⽤简单，界⾯友好。下⾯我们来看看重叠验证。2、中级⽤法上⾯我们知道了⾮空验证的写法，除此之外肯定还有其他验证⽅式啊。别急，我们慢慢来看。上⾯的代码cshtml部分不动，js部分我们稍作修改：　　$(function () { $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: '⽤户名验证失败', validators: { notEmpty: { message: '⽤户名不能为空' }, stringLength: { min: 6, max: 18, message: '⽤户名长度必须在6到18位之间' }, regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: '⽤户名只能包含⼤写、⼩写、数字和下划线' } } }, email: { validators: { notEmpty: { message: '邮箱不能为空' }, emailAddress: { message: '邮箱地址格式有误' } } } } }); });加上了重叠验证我们来看效果：由上⾯的代码可以看出在validators属性对应⼀个Json对象，⾥⾯可以包含多个验证的类型：notEmpty：⾮空验证；stringLength：字符串长度验证；regexp：正则表达式验证；emailAddress：邮箱地址验证（都不⽤我们去写邮箱的正则了~~）除此之外，在⽂档⾥⾯我们看到它总共有46个验证类型，我们抽⼏个常见的出来看看：：64位编码验证；：验证输⼊值必须在某⼀个范围值以内，⽐如⼤于10⼩于100；：⾝份证验证；：⽇期验证；：IP地址验证；：数值验证；：电话号码验证；：url验证；更多验证类型详见：。当然涉及中⽂的验证可能会有些⼩问题，园友们如果有需要可以⾃⾏下去⽤代码测试下。还有⼀个⽐较常⽤的就是submitHandler属性，它对应着提交按钮的事件⽅法。使⽤如下：$(function () { $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: '⽤户名验证失败', validators: { notEmpty: { message: '⽤户名不能为空' }, stringLength: { min: 6, max: 18, message: '⽤户名长度必须在6到18位之间' }, regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: '⽤户名只能包含⼤写、⼩写、数字和下划线' } } }, email: { validators: { notEmpty: { message: '邮箱不能为空' }, emailAddress: { message: '邮箱地址格式有误' } } } }, submitHandler: function (validator, form, submitButton) { alert("submit"); } }); });在它的Demo⾥⾯介绍了很多验证的实例。我们简单看看它的效果，⾄于实现代码，其实很简单，有兴趣的可以直接看api。颜⾊验证Tab页表单验证按钮验证 转⾃：/landeanfen/p/