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("我經過驗證了");
            }

 

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