bootstrapValidator--表单校验

关于表单校验 要依次引入

  <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    
    <!-- 表单校验 -->
    <link rel="stylesheet" href="./bootstrap-validator/css/bootstrapValidator.min.css">

 <script src="./jquery/jquery.min.js"></script>
 <script src="./bootstrap/js/bootstrap.min.js"></script>
 <script src="./bootstrap-validator/js/bootstrapValidator.min.js"></script>

<!-- id :和后面的校验匹配 -->
  <form class="form-horizontal" id="addForm">
        <div class="form-group">
             <label for="name" class="col-sm-2 control-label">姓名：</label>
             <div class="col-sm-10">
                  <input type="text" name="username" data-bv-notempty="true"
                     data-bv-notempty-message="不能为空" class="form-control" id="username" placeholder="">
             </div>
        </div>
        <div class="form-group">
             <label for="name" class="col-sm-2 control-label">性别：</label>
             <div class="col-sm-10">
                  <!-- <input type="text" class="form-control" id="name" placeholder=""> -->
                  <label><input type="radio" name="sex" value="男">男</label>
                  <label><input type="radio" name="sex" value="女">女</label>
             </div>
        </div>
                       
        <div class="form-group">
             <label for="creditCard" class="col-sm-2 control-label">身份证：</label>
             <div class="col-sm-10">
                  <input type="creditCard" name="creditCard" class="form-control" id="creditCard"
                         placeholder="">
             </div>
        </div>
        <div class="form-group">
             <label for="phone" class="col-sm-2 control-label">电话：</label>
             <div class="col-sm-10">
                  <input type="phone" name="phone" class="form-control" id="phone" placeholder="">
             </div>
        </div>

        <div class="form-group">
             <label for="inputEmail3" class="col-sm-2 control-label">邮箱：</label>
             <div class="col-sm-10">
                  <input type="text" name="email" class="form-control" id="inputEmail3" placeholder="">
             </div>
        </div>
        <div class="form-group">
             <label for="register" class="col-sm-2 control-label">状态：</label>
             <div class="col-sm-10">
                  <!-- <input type="text" class="form-control" id="phone" placeholder=""> -->
                  <select name="addStatus" id="register" class="form-control">
                          <option value="">未注册</option>
                          <option value="">已注册</option>
                          <option value="">休学</option>
                  </select>
             </div>
        </div>
        <div class="form-group">
             <div class="col-sm-offset-3 col-sm-6">
                  <button type="reset" class="btn btn-default pull-left">重置</button>
                  <button type="submit" class="btn btn-primary pull-right">保存</button>
             </div>
        </div>
  </form>

 $('#addForm').bootstrapValidator({
        message: 'This value is not valid',
        // 配置校验图标
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',    // 校验成功
            invalid: 'glyphicon glyphicon-remove',   // 校验失败
            validating: 'glyphicon glyphicon-refresh'  // 校验中
        },
        // 配置校验字段   (给input设置 name 值)
        fields: {
            username: {
                message: '用户名验证失败',
                validators: {
                    notEmpty: {
                        message: '用户名不能为空'
                    }
                }
            },
            email: {
                validators: {
                    // notEmpty: {
                    //     message: '邮箱地址不能为空'
                    // }

                    regexp: { //正则表达式
                        //    邮箱
                        // regexp: /^\w+@\w+(\.[a-z]+){1,2}$/,
                        regexp: /^(\w+@\w+(\.[a-z]+){1,2}\;)*\w+@\w+(\.[a-z]+){1,2}$/,
                        message: '邮箱格式不正确'
                    },
                }
            },
            phone: {
                message: '电话验证失败',
                validators: {
                    // notEmpty: {
                    //     message: '电话不能为空'
                    // },
                    regexp: { //正则表达式
                        //*星号表示可以重复任意次，也就是可以有多个号码
                        // (13|15|18)\d{9}$ 最后一个用来匹配没有分号的号码 
                        // 最后一个号码不能有分号
                         regexp: /^((13|15|18)\d{9}\;)*(13|15|18)\d{9}$/,
                        //以13,15,18开头的手机号,共11位，如果多个手机号中间用英文的；（分号）分开
                        message: '号码格式不正确'
                    },
                }
            },
            creditCard: {
                message: '身份证验证失败',
                validators: {
                    notEmpty: {
                        message: '身份证不能为空'
                    },
                    regexp: { //正则表达式
                        // 身份证号码为15位或者18位，15位时全为数字，
                        // 18位前17位为数字，最后一位是校验位，可能为数字或字符X  
                        regexp: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                        message: '身份证格式不正确'
                    },
                }
            },

        }
    });

2. 校验成功后, 会触发一个事件, 表单校验成功事件

* 默认是会提交表单的, 页面就跳转了,

* 我们需要注册表单校验成功事件, 在成功事件中, 阻止默认的提交, 通过 ajax 提交

// $('#addForm').on('success.form.bv', function (e) {

// // 阻止默认的提交

// console.log(123)

// e.preventDefault(); // 阻止默认的提交

// $.ajax({

// type: "post",

// url: "",

// data: $('#addForm').serialize(),

// dataType: 'json',

// success: function (info) {

// console.log(info);

// }

// })

// })

$('#addForm').data("bootstrapValidator").resetForm(true)