适配bootstrap的表单验证插件bootstrap-Validator

适配bootstrap的表单验证插件bootstrap-Validator

@[命令行|Git|代码管理]

适配bootstrap的表单验证插件bootstrap-Validator
链接库

HTML文件

添加表单验证代码

最近在做软件工程的时候，做到表单验证，就找了jQuery的Validator库，虽然也还算好用，但是样式真的太丑了，还有一个莫名其妙的炫酷bug，找来找去，才发现原来bootstrap就有适配的Validator库

链接库

从github下载链接bootstrap Validator下载

与之前的bootstrap-editor等插件相同，第一要做的就是把库链接进html文件

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<script src="bootstrap/js/jquery-1.11.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="bootstrapvalidator/dist/css/bootstrapValidator.min.css" rel="stylesheet">
<script src="bootstrapvalidator/dist/js/bootstrapValidator.min.js"></script>
<script src="bootstrapvalidator/dist/js/language/zh_CN.js"></script>

先把bootstrap自带的css，js链接进去，再链接Validator的css和js，最后记得加上中文包

HTML文件

自己按照bootstrap的要求写一个表单

<div class="row">
<div class="col-lg-offset-4 col-lg-4 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
<form role="form" style="margin:5%;" id="registform">
<div class="form-group">
<label for="Username">学号</label>
<input  type="text" name="Username" class="form-control" id="Username" maxlength="10" placeholder="学号">
</div>
<div class="form-group">
<label for="Email">邮箱</label>
<input  type="Email"  name="Email" class="form-control" id="Email"
maxlength="50" placeholder="邮箱">
</div>
<div class="form-group">
<label for="Password">密码</label>
<input  type="password"  name="Password" class="form-control" id="Password" maxlength="16" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="ConPassword">验证密码</label>
<input  type="password"  name="ConPassword" class="form-control" id="ConPassword" maxlength="16" placeholder="请再次输入密码">
</div>
<div align="center">
<label class="radio-inline">
<input type="radio" name="option" id="option1" value="option1" checked>我是助教
</label>
<label class="radio-inline">
<input type="radio" name="option" id="option2"  value="option2"> 我是学生
</label>
</div>
<br>
<button type="submit" class="btn btn-default center-block" style="width:200px;">注 册</button>
</form>
</div>
</div>

如上，效果在大屏幕下大概就这样，当然中间有一些比如SIGN UP和注册不是代码中表单的内容

添加表单验证代码

<script type="text/javascript">
$(document).ready(function(){
$("#registform").bootstrapValidator({
message:"未验证",
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields:{
Username:{
message:"学号还未验证",
validators:{
notEmpty:{
message:"学号不可为空"
},
stringLength:{
min:10,
max:10,
message:"学号长度为10"
}
}
},
Email:{
validators:{
notEmpty:{
message:"邮箱不可为空"
},
emailAddress:{
message:"邮箱名有误"
},
stringLength:{
max:50,
message:"邮箱长度不可超过50"
}
}
},
Password:{
message:"密码还未验证",
validators:{
notEmpty:"密码不能为空",
stringLength:{
min:6,
max:16,
message:"密码长度在6到16之间"
}
}
},
ConPassword:{
message:"密码重复还未验证",
validators:{
notEmpty:{
message:"密码验证不可为空"
},
stringLength:{
min:6,
max:16,
message:"密码长度在6到16之间"
},
identical:{
field:"Password",
message:"两次密码不同，请重新输入"
}
}
}
}
});
});
</script>

对于用过JQuery-Validator插件的同学一定觉得非常清楚明白了，message就是输出的提示符

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

- notEmpty：非空验证；

- stringLength：字符串长度验证；

- regexp：正则表达式验证；

- emailAddress：邮箱地址验证（都不用我们去写邮箱的正则了~~）

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

- base64：64位编码验证；

- between：验证输入值必须在某一个范围值以内，比如大于10小于100；

- creditCard：身份证验证；

- date：日期验证；

- ip：IP地址验证；

- numeric：数值验证；

- phone：电话号码验证；

- uri：url验证；



此时效果如上图所示