标签：和校验 glyphicon 用户名 name BootstrapValidator 验证 校验 input message
一.首先引入BootstrapValidator插件
BootstrapValidator插件需要jQuery和Bootstrap 3
引入js和css文件
1 <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/> 2 <link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/> 3 4 <script type="text/javascript" src="/path/to/jquery/jquery-1.10.2.min.js"></script> 5 <script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script> 6 <!-- 使用压缩过的版本--> 7 <script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script> 8 <!-- 使用包含所有验证器的未压缩版本 --> 9 <script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.js"></script>
二.添加验证规则
1.使用HTML添加简单验证
如果想对某一个字段添加验证规则，需要包裹，input标签必须有name值，此值为验证匹配的字段。
1 <div class="form-group"> 2 <label for="exampleInputEmail1">Email address</label> 3 <input type="email" name="email" class="form-control" id="exampleInputEmail1" placeholder="Email" 4 data-bv-notempty="true" 5 data-bv-notempty-message="不能为空"> 6 </div>
2.使用js添加验证
简述 bootstrapValidator 使用方法。想查看更多可以访问http://bootstrapvalidator.votintsev.ru/getting-started/ 查看文档
1 $('form').bootstrapValidator({
2 // 默认的提示消息
3 message: 'This value is not valid',
4 // 表单框里右侧的icon
5 feedbackIcons: {
6 valid: 'glyphicon glyphicon-ok',
7 invalid: 'glyphicon glyphicon-remove',
8 validating: 'glyphicon glyphicon-refresh'
9 },
10 submitHandler: function (validator, form, submitButton) {
11 // 表单提交成功时会调用此方法
12 // validator: 表单验证实例对象
13 // form jq对象 指定表单对象
14 // submitButton jq对象 指定提交按钮的对象
15 },
16 fields: {
17 username: {
18 message: '用户名验证失败',
19 validators: {
20 notEmpty: {
21 message: '用户名不能为空'
22 },
23 stringLength: { //长度限制
24 min: 6,
25 max: 18,
26 message: '用户名长度必须在6到18位之间'
27 },
28 regexp: { //正则表达式
29 regexp: /^[a-zA-Z0-9_]+$/,
30 message: '用户名只能包含大写、小写、数字和下划线'
31 },
32 different: { //比较
33 field: 'username', //需要进行比较的input name值
34 message: '密码不能与用户名相同'
35 },
36 identical: { //比较是否相同
37 field: 'password', //需要进行比较的input name值
38 message: '两次密码不一致'
39 },
40 remote: { // ajax校验，获得一个json数据（{'valid': true or false}）
41 url: 'user.php', //验证地址
42 message: '用户已存在', //提示信息
43 type: 'POST', //请求方式
44 data: function(validator){ //自定义提交数据，默认为当前input name值
45 return {
46 act: 'is_registered',
47 username: $("input[name='username']").val()
48 };
49 }
50 }
51 }
52 },
53 email: {
54 validators: {
55 notEmpty: {
56 message: '邮箱地址不能为空'
57 },
58 emailAddress: {
59 message: '邮箱地址格式有误'
60 }
61 }
62 }
63 }
64 });
三.在validators中一些验证规则的总结
1.判断字段是否为空
1 notEmpty: {
2 message: '用户名必填不能为空'
3 },
2.字段长度判断
1 stringLength: {
2 min: 6,
3 max: 30,
4 message: '用户名长度不能小于6位或超过30位'
5 },
3.通过正则表达式进行验证
1 regexp: {
2 regexp: /^[A-Z\s]+$/i,
3 message: '名字只能由字母字符和空格组成。'
4 }
4.大小写验证
1 stringCase: {
2 message: '姓氏必须只包含大写字符。',
3 case: 'upper'//其他值或不填表示只能小写字符
4 },
5.两个字段不相同的判断
1 different: {
2 field: 'password',
3 message: '用户名和密码不能相同。'
4 }
6.email验证
1 emailAddress: {
2 message: 'The input is not a valid email address'
3 }
7.日期格式验证
1 date: {
2 format: 'YYYY/MM/DD',
3 message: '日期无效'
4 }
8.纯数字验证
1 digits: {
2 message: '该值只能包含数字。'
3 }
9.ajax验证
1 threshold : 6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
2 remote: { //ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
3 url: 'exist2.do', //验证地址
4 message: '用户已存在', //提示消息
5 delay : 2000, //每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
6 type: 'POST' //请求方式
7
8 },
10.复选框验证
1 choice: {
2 min: 2,
3 max: 4,
4 message: '请选择2-4项'
5 }
11.密码确认
1 identical: {
2 field: 'confirmPassword',
3 message: 'The password and its confirm are not the same'
4 },
12.判断输入数字是否符合大于18小于100
1 greaterThan: {
2 value: 18
3 },
4 lessThan: {
5 value: 100
6 }
13.uri验证
1 uri: {}
四、callback自定义校验规则
1 schoolName: {
2 validators: {
3 notEmpty: {
4 message: '请选择分支机构'
5 },
6 callback: {
7 message: '请选择分支机构',
8 callback: function(value, validator) {
9 //这里可以自定义value的判断规则
10 if (value == 0) {//"请选择"
11 //错误的参数值
12 return false;
13 } else {
14 //合格的参数值
15 return true;
16 }
17 }
18 }
19 }
20 },
转自：https://blog.csdn.net/lovesman/article/details/104888690
标签：和校验,glyphicon,用户名,name,BootstrapValidator,验证,校验,input,message 来源： https://www.cnblogs.com/strongerPian/p/16480540.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。