bootstrap表单验证使⽤⽅法
前⾔：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提⽰能增加⽤户体验。博主搜索bootstrap表单验证，搜到的结果⼤部分都是⽂中的主题：bootstrapvalidator。今天就来看看它如何使⽤吧。
⼀、源码及API地址
介绍它之前，还是给出它的源码以及API的地址吧。
⼆、代码以及效果展⽰
1、初级⽤法
来看bootstrapvalidator的描述：A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它⾄少需要jQuery、bootstrap的⽀持。我们⾸先引⼊需要的js组件
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
<link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Content/bootstrapValidator/js/bootstrapValidator.min.js"></script>
<link href="~/Content/bootstrapValidator/css/bootstrapValidator.min.css" rel="stylesheet" />
我们知道，既然是表单验证，那么我们在cshtml页⾯就必须要有⼀个Form，并且我们知道Form⾥⾯取元素都是通过name属性去取值的，所以，表单⾥⾯的元素都要有⼀个name的属性值。
<form>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" name="username" />
</div>
<div class="form-group">
<label>Email address</label>
<input type="text" class="form-control" name="email" />
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-primary">Submit</button>
</div>
</form>
有了表单元素之后，就是我们的js初始化了。
$(function () {
$('form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',为什么使用bootstrap?
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个验证类型，我们抽⼏个常见的出来看看：base64：64位编码验证；
between：验证输⼊值必须在某⼀个范围值以内，⽐如⼤于10⼩于100；
creditCard：⾝份证验证；
date：⽇期验证；
ip：IP地址验证；
numeric：数值验证；
phone：电话号码验证；
uri：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页表单验证
按钮验证
以上所述是⼩编给⼤家介绍的bootstrap 表单验证使⽤⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论