JS组件表单验证工件引导验证器

在本文中，我们分享了JS组件表单验证工件BootstrapValidator，供大家参考。详情如下。

1.有关主要用法，请参见bootstrapvvalidator:bootstrapvvalidator 3的ajquery表单验证程序的描述。从描述中我们可以知道，它至少需要jQuery和bootstrap的支持。我们首先介绍所需的js组件：

Script src=' http : ~/Scripts/jquery-1 . 10 . 2 . js '/Script Script src=' http : ~/Content/bootstrap/js/bootstrap . min . js '/Script link href=' ~/Content/bootstrap/CSS/bootstrap . min . CSS ' rel='样式表'/Script src=' http 3360 ~/Content/bootstrapValidator/js/bootstrapValidator . min . js '/Script href='

form Div class=' form-group ' label username/label input type=' text ' class=' form-control ' name=' username '/Div class=' form-group ' label Mel address/label input type=' text ' class=' form-control ' name=' email '/Div class=' form-group ' button type=' submit ' name=' submit ' class=' btnbtn-primary ' submit/button/Div/form有表单元素的表单，我们的js就初始化了。

$(function () { $('form '))。bootstrapValidator({ message : '此值无效'、反馈图标： { valid : ' glyphicon glyphicon-ok '、无效： '字形图标glyph icon-remove '、验证： '字形图标glyph icon-refresh ')、字段： { username : { message : '用户名不能为});内容要通俗易懂。看效果：

验证失败。提交按钮呈灰色，无法单击。

通过，提交按钮恢复。

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

2.中级用法我们知道上面非空验证的写法，除此之外肯定还有其他的验证方法。别担心，让我们慢慢来。上面代码的cshtml部分没有移动，但是我们稍微修改了js部分：

$(function () { $('form '))。bootstrapValidator({ Message : '此值无效'、反馈图标： { valid : ' glyphicon glyphicon-ok '、无效： '字形图标glyph icon-remove '、验证： '字形图标glyph icon-refresh ')、字段： { username : { Message : '用户名不能为空});通过重叠验证，我们可以看到以下效果：

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

NotEmpty:非空验证；StringLength:字符串长度验证；Regexp:正则表达式验证；邮件：emailAddress验证(我们不需要写邮件的规律性~ ~)。此外，我们可以看到文档中有46种验证类型。让我们看几个常见的例子：

Base64: 64位编码验证；介于：验证输入值必须在一定范围内，如大于10小于100；信用卡：身份证验证；日期：日期验证；Ip: IP地址验证；数值：数值验证；电话：电话号码验证；Uri:url身份验证；另一个常用的属性是submitHandler，它对应于提交按钮的事件方法。使用如下：

$(function () { $('form '))。bootstrapValidator({ Message : '此值无效'、反馈图标： { valid : ' glyphicon glyphicon-ok '、无效： '字形图标glyph icon-remove '、验证： '字形图标glyph icon-refresh ')、字段： { username : { Message : '用户名不能为空email : { validator : { not empty : { message : '邮箱不能为空' }，emailaddress: {message: '邮箱地址格式错误' }}}}，submitHandler:函数(validator，form，Submit button){ alert(' submit ')； } });});在其演示中介绍了许多验证示例。让我们简单看看它的效果。至于实现代码，其实很简单。如果你感兴趣，可以直接看api。

颜色验证

选项卡页面表单验证。

按钮验证

如果你还想深入学习，可以点击这里学习，然后为你附上两个精彩的话题：Bootstrap学习教程Bootstrap实用教程。

以上就是本文的全部内容，希望对大家的学习有所帮助。