1 導入插件

<!--引入jquery相關文件  -->
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<!-- 引入表單校驗jquery插件 -->
<script type="text/javascript" src="js/jquery.validate.min.js"></script>

引入國際化庫之後：如果自己沒有寫messages提示信息，可以顯示中文的提示信息。

一般我們都是直接通過messages直接寫自定義寫死了的。所以一般不導入國際化庫也可以。

2 表單校驗代碼

格式為：

<script type="text/javascript">
    $(function(){
        $("#myform").validate({
            rules:{
                /*username取的input裏面的name屬性對應的名稱 */
                username:{
                    "required":true
                },
                password:{
                    
 
"required":true,
                    "rangelength":[6,12]
                },
                repassword:{
                    "required":true,
                    "rangelength":[6,12],
                    /*#password需要與之相同的字段的id屬性值 也就password對應的id屬性  */
                    "equalTo":"#password"
 

                },
                email:{
                    "required":true,
                    "email":true
                },
                name:{
                    "required":true,
                    "maxlength":4
                },
                birthday:{
                    "required":true,
                    "date":true
                },
                sex:{
                    "required":true
                }
                
            },
            messages:{
                username:{
                    "required":"用戶名不能為空"
                },
                password:{
                    "required":"密碼不能為空",
                    "rangelength":"密碼長度為6-12位"
                },
                repassword:{
                    "required":"確認密碼不能為空",
                    "rangelength":"密碼長度為6-12位",
                    /*#password需要與之相同的字段的id屬性值 也就password對應的id屬性  */
                    "equalTo":"兩次輸入密碼不一致"
                },
                email:{
                    "required":"郵箱不能為空",
                    "email":"郵箱格式不正確"
                },
                name:{
                    "required":"姓名不能為空",
                    "maxlength":"長度不能大於4"
                },
                birthday:{
                    "required":"出生日期不能為空",
                    "date":"日期格式不正確"
                }
                /*sex:{
                    "required":"性別必須選擇"
                }*/
            }
        });
    });
    
</script>

3 修改錯誤提示信息的顯示位置

<div class="form-group opt">
    <label for="inlineRadio1" class="col-sm-2 control-label">性別</label>
    <div class="col-sm-6">
        <label class="radio-inline"> <input type="radio"
            name="sex" id="sex1" value="male">男
        </label> <label class="radio-inline"> <input type="radio"
            name="sex" id="sex2" value="female">女
        </label>
        <label class="error" for="sex" style="display:none ">性別必須選擇</label>
    </div>
</div>

錯誤信息默認顯示在第一個匹配的元素的後面

如何自己修改錯誤提示信息的顯示位置呢？

自己寫了label標簽之後，就不需要這個錯誤提示信息了。會直接使用後面自己寫的label標簽。如果有錯誤信息要顯示的時候會自動將顯示屬性改為顯示。

案例15-基本的表單校驗使用validate