bootstrap 表单验证使用方法

日期：2020-06-08 栏目：程序人生浏览：次

前言：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。

一、源码及API地址

介绍它之前，还是给出它的源码以及API的地址吧。

bootstrapvalidator源码：https://github.com/nghuuphuoc/bootstrapvalidator

boostrapvalidator api：

二、代码以及效果展示

1、初级用法

来看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js组件

我们知道，既然是表单验证，那么我们在cshtml页面就必须要有一个Form，并且我们知道Form里面取元素都是通过name属性去取值的，所以，表单里面的元素都要有一个name的属性值。　　

　<form> <div> <label>Username</label> <input type="text" /> </div> <div> <label>Email address</label> <input type="text" /> </div> <div> <button type="submit">Submit</button> </div> </form>

有了表单元素之后，就是我们的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: '邮箱地址不能为空' } } } } }); });

内容应该很容易看懂。来看效果：

验证通不过，提交按钮灰掉不能点击

bootstrap 表单验证使用方法

验证通过，提交按钮恢复

bootstrap 表单验证使用方法

看看效果先感受下，最大优点：使用简单，界面友好。下面我们来看看重叠验证。

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: '邮箱地址格式有误' } } } } }); });

加上了重叠验证我们来看效果：

bootstrap 表单验证使用方法