Bootstrap筆記----- validate表單驗證04

1、準備工做

1.1下載地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)

2.2引入必要文件：下面箭頭指向的

2.3編寫表單  注意表單id  和 input框的name 這兩個與驗證想綁定的

<form id="form-registered">
                <div class="form-group">
                    <label class="control-label col-xs-2">姓名:</label>
                    <div class="col-xs-10">
                        <input type="text" name="username"  placeholder="註冊用戶名" class="form-control">
                    </div>
                </div>
                <br> <br>
                <div class="form-group">
                    <label class="control-label col-xs-2">密碼:</label>
                    <div class="col-xs-10">
                        <input type="text" name="password"  placeholder="註冊密碼" class="form-control">
                    </div>
                </div>

                <br> <br>
                <button class="btn" id="btn-Registered">註冊</button>

            </form>

3.3編寫js並引入  下面是驗證username 與password的js 驗證成功後ajax提交

$(function () {
    $("#form-registered").bootstrapValidator({
        live: 'enabled',//驗證時機，enabled是內容有變化就驗證（默認），disabled和submitted是提交再驗證
        excluded: [':disabled', ':hidden', ':not(:visible)'],//排除無需驗證的控件，好比被禁用的或者被隱藏的
        submitButtons: '#btn-Registered',//指定提交按鈕，若是驗證失敗則變成disabled，但我沒試成功，反而加了這句話非submit按鈕也會提交到action指定頁面
        message: '通用的驗證失敗消息',//好像歷來沒出現過
        feedbackIcons: {//根據驗證結果顯示的各類圖標
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {

            username: {
                validators: {
                    notEmpty: {//檢測非空,radio也可用
                        message: '用戶名不能爲空'
                    },
                    stringLength: {//檢測長度
                        min: 4,
                        max: 30,
                        message: '長度必須在4-30之間'
                    },
                    regexp: {//正則驗證
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: '所輸入的字符不符要求'
                    },
                    remote: {//將內容發送至指定頁面驗證，返回驗證結果，好比查詢用戶名是否存在
                        url: '指定頁面',
                        message: 'The username is not available'
                    },
                    different: {//與指定文本框比較內容相同
                        field: '指定文本框name',
                        message: '不能與指定文本框內容相同'
                    },
                    emailAddress: {//驗證email地址
                        message: '不是正確的email地址'
                    },
                    identical: {//與指定控件內容比較是否相同，好比兩次密碼不一致
                        field: 'confirmPassword',//指定控件name
                        message: '輸入的內容不一致'
                    },
                    date: {//驗證指定的日期格式
                        format: 'YYYY/MM/DD',
                        message: '日期格式不正確'
                    },
                   choice: {//check控件選擇的數量
                        min: 2,
                        max: 4,
                        message: '必須選擇2-4個選項'
                    }
                }
            },
            password: {
                message: '祕密失敗',
                validators: {
                    notEmpty: {
                        message: '密碼不能爲空'
                    }
                }
            },
        }
    });
    $("#btn-Registered").click(function () {//非submit按鈕點擊後進行驗證，若是是submit則無需此句直接驗證
        $("#form-registered").bootstrapValidator('validate');//提交驗證
        if ($("#form-registered").data('bootstrapValidator').isValid()) {//獲取驗證結果，若是成功，執行下面代碼
            alert("yes");//驗證成功後的操做，如ajax
            var username=$("input[name='username']").val();
            var password=$("input[name='password']").val();
            $.ajax({
                type : 'post',
                url : '/shiro/addUser?username='+username+'&password='+password+'',
                dataType:'json',

                success : function(result) {
                    console.info(result);
                }
            })
        }
    });
});