bootstrapValidator.js 做表單驗證

有這樣的一個場景，我們在提交form表單的時候 可能要做一些驗證，比如判斷是不是為空，電話的格式驗證，郵箱的格式驗證等等，手寫起來也是可以得。

但是今天我介紹一個bootstrap插件簡化開發。就是bootstrapValidator.js。

直接上手寫代碼。

1。首先 jquery，bootstrap 以及bootstrapValidator（地址https://github.com/nghuuphuoc/bootstrapvalidator）

2.引用jquery bootstrap  bootstrapValidator(css ，js文件都需要引用)

3.代碼

<form action="/Account/Register" method="post" id="registerForm">
    @Html.AntiForgeryToken()
    <div style="margin:0 auto; width:400px;">
        <div class="form-group">
            <label> Email：</label>
            <input type="text" name="email" id="txtEmail" class="form-control" />
        </div>
        <div class="form-group">
            <label> 用戶名：</label>
            <input type="text" name="Username" id="txtRegisterUsername" class="form-control" />
        </div>
        <div class="form-group">
            <label> 密  碼：</label>
            <input type="password" name="Password" id="txtRegisterPassword" class="form-control" />
        </div>
        <div class="form-group">
            <label> 密碼重復：</label>
            <input type="password" name="Confirm" id="txtConfirm" class="form-control" />
        </div>
        <button type="submit" id="btnRegister" class="btn btn-primary">注冊</button>
        <button type="reset" class="btn btn-default" id="btnRegister">重置</button>
    </div>
</form>

重點就在下面：

  $('#registerForm').bootstrapValidator({
        message: '這個值沒有被驗證',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            email: {
                validators: {
                    notEmpty: {
                        message: '郵箱是必填項'
                    },
                    emailAddress: {
                        message: '郵箱格式正確'
                    }
                }
            },
            Username: {
                message: '用戶名還沒有驗證',
                validators: {
                    notEmpty: {
                        message: '用戶名不能為空'
                    },
                    stringLength: {
                        min: 1,
                        max: 16,
                        message: '用戶名長度在1到16位之間'
                    }
                }
            },
            Password: {
                message: '密碼還沒有驗證',
                validators: {
                    notEmpty: {
                        message: '密碼不能為空'
                    },
                    stringLength: {
                        min: 6,
                        max: 16,
                        message: '密碼長度在6到16之間'
                    },
                    different: {
                        field: 'Username',
                        message: '密碼不能和用戶名相同'
                    }
                }
            },
            Confirm: {
                message: '密碼重復還沒有驗證',
                validators: {
                    notEmpty: {
                        message: '密碼重復不能為空'
                    },
                    stringLength: {
                        min: 6,
                        max: 16,
                        message: '密碼長度在6到16之間'
                    },
                    identical: {
                        field: 'Password',
                        message: '兩次密碼不同請重新輸入'
                    }
                }
            }
        }
    }).on('success.form.bv', function (e) {
        // Prevent form submission
        e.preventDefault();
        // Get the form instance
        var $form = $(e.target);
        // Get the BootstrapValidator instance
        var bv = $form.data('bootstrapValidator');
        // Use Ajax to submit form data
        $.post("/Account/Register", $form.serialize(), function (data) {
            console.log(data)
            if (data.Status == "ok") {
                window.location.href = "/Home/Index";
            }
            else if (data.Status == "error") {
                alert(data.Message);
            }
            else {
                alert("未知錯誤");
            }
        });
    });

看看效果：

注意下：

這個input的樣式必須是這種方式（特別是form-group）

不然會報錯。

  <div class="form-group">
            <label> Email：</label>
            <input type="text" name="email" id="txtEmail" class="form-control" />
        </div>