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)