JS组件Form表单验证神器BootstrapValidator(js进行表单验证的目的是什么)

编辑：rootadmin

推荐整理分享JS组件Form表单验证神器BootstrapValidator(js进行表单验证的目的是什么)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js的form表单,js进行表单验证,js表单验证为什么提示不出来,js的form表单,js表单验证为什么提示不出来,js提交form表单action,js表单验证插件,js表单验证插件,内容如对您有帮助，希望把文章链接给更多的朋友！

本文为大家分享了JS组件Form表单验证神器BootstrapValidator，供大家参考，具体内容如下

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

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

有了表单元素之后，就是我们的js初始化了。

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

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

验证通过，提交按钮恢复

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

2、中级用法上面我们知道了非空验证的写法，除此之外肯定还有其他验证方式啊。别急，我们慢慢来看。上面的代码cshtml部分不动，js部分我们稍作修改：

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

由上面的代码可以看出在validators属性对应一个Json对象，里面可以包含多个验证的类型：

notEmpty：非空验证； stringLength：字符串长度验证； regexp：正则表达式验证； emailAddress：邮箱地址验证（都不用我们去写邮箱的正则了~~）

除此之外，在文档里面我们看到它总共有个验证类型，我们抽几个常见的出来看看：

base：位编码验证； between：验证输入值必须在某一个范围值以内，比如大于小于； creditCard：身份证验证； date：日期验证； ip：IP地址验证； numeric：数值验证； phone：电话号码验证； uri：url验证；

还有一个比较常用的就是submitHandler属性，它对应着提交按钮的事件方法。使用如下：

在它的Demo里面介绍了很多验证的实例。我们简单看看它的效果，至于实现代码，其实很简单，有兴趣的可以直接看api。

颜色验证

Tab页表单验证

按钮验证

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

本文链接地址:https://www.jiuchutong.com/biancheng/382784.html 转载请保留说明！