bootstrap學習起步篇：初識bootstrap之表單驗證（二）

        學習bootstrap是個過程，它提供給我們的文檔上有很詳細的說明。包括常用的柵欄布局、頁面元素等，這里就不啰嗦了，今天，我就來說下結合jquery的表單驗證。

        最開始不借助插件，我們需要自己去編寫驗證規則。使用jquery驗證，能讓我們省去一些功夫。

        首先我們需要引入js文件:jquery.validate.js；另外為了能使用它的樣式，我們需另外引入screen.css。當然，如果要使用bootstrap，還是要引入其所需的文件的。

        下面，我們需要一個表單：

    <form class="form-horizontal" id="form1" method="post">

        <div class="control-group">
            <label class="control-label">
                用戶名
            </label>
            <div class="controls">
                <div class="input-icon">
                    <input type="text" class="m-wrap" id="loginname" name="loginname">
                </div>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">
                手機
            </label>
            <div class="controls">
                <div class="input-icon">
                    <input type="text" class="m-wrap" id="mobilephone" name="mobilephone">
                </div>
            </div>
        </div>

        <div class="control-group">
            <label class="control-label">
                郵箱
            </label>
            <div class="controls">
                <div class="input-icon">
                    <input type="text" class="m-wrap" id="email" name="email">
                </div>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn blue">
                <i class="icon-ok"></i> 保存
            </button>
            <button type="button" class="btn" onclick="history.go(-1)">
                返回
            </button>
        </div>
    </form>

 

 

       在頁面加載的時候，我需要添加表單的驗證規則：

  function checkForm(){
                $("#form1").validate({
                    onsubmit:true,
                    rules: {
                        loginname: {
                            required: true    //此處就是必填項驗證
                        },
                        mobilephone: {
                            required: true,
                            phone:true     //號碼格式驗證，jquery.validate.js本身不提供此項驗證，可通過引入擴展插件或修改jquery.validate.js實現  
                        },
                        email: {
                            required: true,
                            email: true   //郵箱格式驗證
                        },
                        roleidstr:{
                            required: true
                        }
                    },
                    messages: {     //相對應的錯誤提示信息
                        loginname: {
                            required: "請輸入賬號！"
                        },
                        mobilephone: "請輸入有效的手機號！",
                        email: "請輸入有效的郵箱地址"
                    },
                    success:"valid",
                    submitHandler:function(){ 
                        save();    //驗證通過后，點擊保存按鈕時執行的函數
                    }
                });
            }
            
            $(function() {
                checkForm();
                  //表單數據初始化
                }
            });

 

   然后，我們就可以在表單中輸入數據，體驗它的驗證效果了，附上一張截圖：

   當我們輸入正確的數據后，點擊保存按鈕，將執行我們的save操作。

  

    function save() {
                  alert("我通過驗證了");
            }

 

  這樣，我們就完成了表單的驗證和提交的過程。