首页 > 代码库 > bootstrap-validation 对表单进行比较全的验证
bootstrap-validation 对表单进行比较全的验证
具体代码实现：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/bootstrap/css/bootstrap.css"/>
</head>
<body>
<div class=‘well‘>
<form class="form-horizontal" id=‘form‘ action="###">
<div class="control-group">
<label class="control-label" for="inputEmail">邮箱</label>
<div class="controls"><input type="text" id="inputEmail" check-type="email">
</div>
</div>
<div class="control-group"><label class="control-label" for="inputPassword">密码</label>
<div class="controls"><input type="password" id="inputPassword" check-type="password"
password-message="密码长度"></div>
</div>
<div class="control-group"><label class="control-label" for="inputrePassword">密码</label>
<div class="controls"><input type="password" id="inputrePassword"
check-type="rePassword #inputPassword"></div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn">登录</button>
</div>
</div>
</form>
</div>
<script src="http://www.mamicode.com/js/jquery-1.9.1.min.js"></script>
<script src="http://www.mamicode.com/bootstrap/js/bootstrap-validation.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.mamicode.com/bootstrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$(‘#form‘).validation();//自定义form表单的id
})
</script>
</body>
</html>这里的 check-type="rePassword #inputPassword" 中的#inputPassword表示的是需要进行比较的表单ID
下面这个js块是需要进行验证的表单的ID，让其调用验证类的 var validationForm = function(obj) {}这个方法
<script type="text/javascript" charset="utf-8">
$(function () {
$(‘#form‘).validation();//自定义form表单的id
})
</script>接下来就是这个验证的核心了bootstrap/js/bootstrap-validation.js，这里的bootstrap-validation.js是对网络上的bootstrap-validation.js第三方验证类进行了一点小更改，大致都差不多
!function($) {
$.fn.validation = function(options) {
return this.each(function() {
globalOptions = $.extend({}, $.fn.validation.defaults, options);
validationForm(this)
});
};
$.fn.validation.defaults = {
validRules : [
{name: ‘required‘, validate: function(value) {return ($.trim(value) == ‘‘);}, defaultMsg: ‘不能为空‘},
{name: ‘number‘, validate: function(value) {return (!/^[0-9]\d*$/.test(value));}, defaultMsg: ‘请输入数字。‘},
{name: ‘email‘, validate: function(value) {return (!/^[a-zA-Z0-9]{1}([\._a-zA-Z0-9-]+)(\.[_a-zA-Z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+){1,3}$/.test(value));}, defaultMsg: ‘请输入邮箱地址。‘},
{name: ‘char‘, validate: function(value) {return (!/^[a-zA-Z]*$/.test(value));}, defaultMsg: ‘请输入英文字符。‘},
{name: ‘qq‘, validate: function(value) {return (!/^[^0]\d{4,9}$/.test(value));}, defaultMsg: ‘请输入正确QQ‘},
{name: ‘phone‘, validate: function(value) {return (!/^((\(\d{2,3}\))|(\d{3}\-))?1(3|4|5|6|8)\d{9}$/.test(value));}, defaultMsg: ‘请输入正确手机号码‘},
{name: ‘password‘, validate: function(value) {return (!safePassword(value));}, defaultMsg: ‘密码由字母和数字组成，至少6位‘},// check-type="password"
{name: ‘rePassword‘, validate: function(value,param) { return (!(value == $(param).val()));}, defaultMsg: ‘两次输入的字符不一至‘},// check-type="rePassword #inputPassword" ,inputPassword需要比较的ID
{name: ‘idcard‘, validate: function(value) {return (!idCard(value));}, defaultMsg: ‘***号码不正确‘},
{name: ‘chinese‘, validate: function(value) {return (!/^[\u4e00-\u9fff]$/.test(value));}, defaultMsg: ‘请输入汉字。‘}
]
};
.
.
中间省略，需要下载请看文章尾
.
.
var validationForm = function(obj) { // 表单验证方法
.
.
.
};
}(window.jQuery);如果需要增加验证类型可以在 “validRules : []”的数组中添加对应的验证就可以了
比如自己写一个验证邮编的方法：
{name: ‘Zipcode ‘, validate: function(value) {return (!/^[1-9][0-9]{5}$/.test(value));}, defaultMsg: ‘邮编不正确‘}name代表：表单域input的属性： check-type对应的值，defaultMsg表示默认的提示信息，刚才html代码里出现的“ password-message="密码长度" ”这个是覆盖password类型的defaultMsg的提示信息，复写格式：“类型名-message”，举个例子：
<div class="control-group"> <label class="control-label" for="inputEmail">邮箱</label> <div class="controls"> <input type="text" id="inputEmail" check-type="email" email-message="邮箱错误"> </div> </div> <div class="control-group"> <label class="control-label" for="inputrePassword">确认密码</label> <div class="controls"> <input type="password" rePassword-message="两次密码不一致" id="inputrePassword" check-type="rePassword #inputPassword" > </div> </div>
本文出自 “7031393” 博客，请务必保留此出处http://7041393.blog.51cto.com/7031393/1581718
bootstrap-validation 对表单进行比较全的验证
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。