bootstrapValidator前台验证及remote后台验证

在实际项目中需要验证前台数据输入的正确性，因此引入bootstrapvalidator插件，效果如下

1.引入

<script src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-validator/0.5.3/css/bootstrapValidator.min.css" rel="stylesheet">

2.前端界面

<form id="editForm" action="" method="post" class="form-horizontal">
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">ID</label>
                        <div class="col-sm-7">
                            <input type="name" name="id" class="col-sm-4 form-control"  id="did" readonly="readonly" placeholder=""/>
                        </div>
                        <label class="col-sm-3 control-label"></label>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">IP</label>
                        <div class="col-sm-7">
                            <input type="account" name="ip" class="form-control"  id="dip" placeholder=""/>
                        </div>
                        <label  class="col-sm-3 control-label"></label>
                    </div>
                    <div class="form-group">
                        <label  class="col-sm-2 control-label">MAC</label>
                        <div class="col-sm-7">
                            <input type="account" name="mac" class="form-control"  id="dmac" placeholder=""/>
                        </div>
                        <label class="col-sm-3 control-label"></label>
                    </div>
    </form>

3.javascript

使用bootstrapValidator进行验证，并在提交时验证

(1)使用remote进行后台验证

(2)使用regexp进行正则表达式验证

(3)使用notEmpty进行空置验证

$(document).ready(function () {
   $("#editForm").bootstrapValidator({
      feedbackIcons: {
         valid: 'glyphicon glyphicon-ok',
         invalid: 'glyphicon glyphicon-remove',
         validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
         ip: {
            validators: {
               notEmpty: {
                  message: 'IP不能为空'
               },

            remote: {//ajax验证,server result:{"valid",true or false}
                         url: 'IPValidate',//验证地址
                         message: 'IP已存在',//提示消息
                         delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                         type: 'POST'//请求方式
                     }
           }
         }
         ,
         mac: {
            validators: {
               notEmpty: {
                  message: 'MAC不能为空'
               },
               regexp: {
                         regexp: /^[A-Fa-f0-9]{4}-[A-Fa-f0-9]{4}-[A-Fa-f0-9]{4}$/,
                         message: 'mac不合法，格式应为ffff-ffff-ffff'
                     }
            }
         }
          ,
         point: {
            validators: {
               notEmpty: {
                  message: '信息点不能为空'
               }
            }
         }
      }
   });

提交时验证

//提交表单
function updateForm() {
 
   $('#editForm').data("bootstrapValidator").validate();
 
   var isValid = $('#editForm').data("bootstrapValidator").isValid();
 
   if(isValid) {
      // 验证成功、上传表单数据。。。
      
   } else {
      alert("验证失败，请检查字段")
      return;
   }
})

4.remote后台验证IP重复验证

这里需要说明的是bootstrap的remote验证器需要的返回结果一定是json格式的数据 :

{"valid":false} //表示不合法，验证不通过
{"valid":true} //表示合法，验证通过

    //IP重复项验证
    @ResponseBody
    @RequestMapping(value="IPValidate")
    public  String pageModel(HttpServletRequest request) {
        System.out.println("==================IP重复项验证/IPValidate=======================");
        String ip=request.getParameter("ip");
        int total=iPrecordService.IPSelect(ip);
        JSONObject result = new JSONObject();
        System.out.println("IPvalidate==="+total);
        if(total>0)
        result.put("valid","false");
        else
        result.put("valid","true");
        return result.toJSONString();
    }

5.其他用法

           password: {
                 message:'密码无效',
                 validators: {
                     notEmpty: {
                         message: '密码不能为空'
                     },
                     stringLength: {
                         min: 6,
                         max: 30,
                         message: '用户名长度必须在6到30之间'
                     },
                     identical: {//相同
                         field: 'password', //需要进行比较的input name值
                         message: '两次密码不一致'
                     },
                     different: {//不能和用户名相同
                         field: 'username',//需要进行比较的input name值
                         message: '不能和用户名相同'
                     },
                     regexp: {
                         regexp: /^[a-zA-Z0-9_\.]+$/,
                         message: 'The username can only consist of alphabetical, number, dot and underscore'
                     }
                 }
             },
             repassword: {
                 message: '密码无效',
                 validators: {
                     notEmpty: {
                         message: '用户名不能为空'
                     },
                     stringLength: {
                         min: 6,
                         max: 30,
                         message: '用户名长度必须在6到30之间'
                     },
                     identical: {//相同
                         field: 'password',
                         message: '两次密码不一致'
                     },
                     different: {//不能和用户名相同
                         field: 'username',
                         message: '不能和用户名相同'
                     },
                     regexp: {//匹配规则
                         regexp: /^[a-zA-Z0-9_\.]+$/,
                         message: 'The username can only consist of alphabetical, number, dot and underscore'
                     }
                 }
             },
             email: {
                 validators: {
                     notEmpty: {
                         message: '邮件不能为空'
                     },
                     emailAddress: {
                         message: '请输入正确的邮件地址如：123@qq.com'
                     }
                 }
             },
             phone: {
                 message: 'The phone is not valid',
                 validators: {
                     notEmpty: {
                         message: '手机号码不能为空'
                     },
                     stringLength: {
                         min: 11,
                         max: 11,
                         message: '请输入11位手机号码'
                     },
                     regexp: {
                         regexp: /^1[3|5|8]{1}[0-9]{9}$/,
                         message: '请输入正确的手机号码'
                     }
                 }
             }