适配bootstrap的表单验证插件bootstrap-Validator
@[命令行|Git|代码管理]
最近在做软件工程的时候,做到表单验证,就找了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验证;
此时效果如上图所示