BootstrapValidator表单验证基本方法 20181123

关于BV表单验证,在上家公司接触到了,才理解了它的强大;

现在公司又用到了,所以整理一下,百度了好多,不过都是零零散散,不完整,有的还是坑;

首先第一步:引入js和css
        <link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">
        <link href="https://cdn.bootcss.com/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="${contextPath }/resource/js/jquery-3.1.1.js"></script>
       <script src="https://cdn.bootcss.com/twitter-bootstrap/4.1.2/js/bootstrap.min.js"></script>
        <script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>

bootstrapValidator依赖bootstrap依赖jquery

下面jsp页面表单

<form action="" method="post" class="phone_registration" id="register">
							<div class="username form-group">
								<img src="${contextPath }/resource/img/login/phone.png" />
								<input type="text" name="phone" id="phone" class="form-control" maxlength="11" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="请输入手机号" />
							</div>
							<div class="code form-group">
								<div class="code_main">
									<img src="${contextPath }/resource/img/login/code.png" />
									<input type="text" name="code" id="code" class="form-control" maxlength="4" onkeyup="this.value=this.value.replace(/\s+/g,'')" placeholder="请输入验证码" />
								</div>
								<span>发送验证码</span>
							</div>
							<div class="password form-group">
								<img src="${contextPath }/resource/img/login/password.png" />
								<input type="password" name="password" id="password" class="form-control" maxlength="20" onkeydown="if(event.keyCode==32) return false" placeholder="请输入密码" />
							</div>
							<div class="password form-group">
								<img src="${contextPath }/resource/img/login/password.png" />
								<input type="password" name="repassword" id="repassword" class="form-control" maxlength="20" onkeydown="if(event.keyCode==32) return false" placeholder="请确认密码" />
							</div>
							<div class="form-group">
				                <button type="submit" name="submit" id="register_btn" class="btn btn-primary register">登录</button>
			            	</div>
						</form>

上面是注册页面的表单包括手机号,验证码,密码,重复密码

下面是对应的js

$('#register').bootstrapValidator({
　　　　　   message: 'This value is not valid',
		feedbackIcons: {
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
        },
         fields: {
             phone: {
                 message: '手机号校验失败!',
                 verbose:false,
                 validators: {
                     notEmpty: {
                         message: '手机号不能为空'
                     },regexp: {
                    	 regexp: /^1(3|4|5|6|7|8)\d{9}$/,
                    	 message: '手机号不合法'
                     },stringLength: {
                         min: 11,
                         max: 11,
                         message: '手机号长度必须为11位'
                     },threshold:11 , //有11字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，11字符以上才开始）
					   remote: {//ajax验证。{"valid":true} 服务器返回值必须是这种 否则识别不了 
						    url: contextPath+'/login/checkPhone',//验证地址
						    message: '手机号已被注册',//提示消息
						    delay : 1,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置1秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
						    type: 'POST',//请求方式
						    /**自定义提交数据，默认值提交当前input value*/
						    data:function(validator){
						    	return {
						    		phone:$('[name="phone"]').val()
	                               };
						  },
					   }
	                 }
	             },
             code: {
             	message: '验证码输入错误',
             	verbose:false,
                validators: {
                     notEmpty: {
                         message: '手机验证码不能为空'
                     },regexp: {
                         regexp: /^\d{4}$/,
                         message: '手机验证码只能是4位数字'
                     }
                 }
             },password: {
              	message: '密码验证失败',
              	verbose:false,
                 validators: {
                      notEmpty: {
                          message: '密码不能为空'
                      },regexp: {
                          regexp: /^[a-zA-Z0-9_]+$/,
                          message: '密码只能包含大写、小写、数字和下划线'
                      },stringLength: {
                          min: 6,
                          max: 20,
                          message: '密码长度必须在6到20位之间'
                      }
                  }
              },
              repassword: {
              	message: '密码输入错误！',
              	verbose:false,
                 validators: {
                      notEmpty: {
                          message: '密码不能为空'
                      },regexp: {
                          regexp: /^[a-zA-Z0-9_]+$/,
                          message: '密码只能包含大写、小写、数字和下划线'
                      },stringLength: {
                          min: 6,
                          max: 20,
                          message: '密码长度必须在6到20位之间'
                      },identical: {
                          field: 'password',
                          message: '两次密码必须保持一致'
                      }
                  }
              }
         }
     }).on('success.form.bv', function (e) {
         e.preventDefault();
         var toURL = $("#toURL").val();
         //判断记住密码是否选中
         if($("input[name='remeberme']").is(':checked')==true){
        	 console.log("提交表单并记住密码》》");
        	 saveInfo();//选中的话那么浏览器就记住密码了;
         }
             $.ajax({
				url: contextPath+"/login/login",
				dataType:"json",
				type: "POST",	
				data: {"loginname":$('#loginname').val(),"loginpwd":$('#loginpwd').val()},
				success: function(data){
					if(data.code == 0){
						layui.use('layer',function () {
							layer.msg('登录成功！');
						})
						if(toURL != null && toURL != '' && toURL != undefined && toURL != 'undefined'){
							window.location.href = decodeURIComponent(toURL);
						}else{
							window.location.href = contextPath+"/main/homePage";
						}
					}else if(data.code == 2){//登录失败
						layui.use('layer',function () {
							layer.msg('由于您登陆失败次数过多，请于一小时后登陆');
						})
					}else{						
						if(data.obj.remainTimes > 0){
							$('#login').bootstrapValidator('disableSubmitButtons', false);
						}
						layui.use('layer',function () {
							layer.msg('用户名或密码错误,一小时内您还有'+data.obj.remainTimes+'次登陆次数');
						})
					}
				}
			})
		});
	
			$('#loginname').focus();
			GetCookie();
	})

 

remote 远程验证后台返回的String类型必须为{"valid":true} 或者{"valid":false}

verbose:false,每一个input顺序验证,一个验证不通过,那么下一个验证就不走,所以只显示一条错误信息

 

 identical: {
                    field: 'password',//另外一个input的name
                    message: '两次密码必须保持一致'
                      }

验证两个密码是否相同

 

以上是简单总结,还有工作要忙,所以等下班之后再进行完善;如果有问题,请联系292738354@qq.com