jq.validate.js

首選必須是要下載滴，jq.validate.js表單效驗方式。

創建form表單沒得說

<form id="form">
        <p>
            <label for="user">username</label>
            <input type="text" name="username" id="user"/>
        </p>
        <p>
            <label for="pass">passname</label>
            <input type="text" name="password" id="pass"/>
        </p>
        <p>
            <input type="submit" value="登錄" id="dl"/>
            <input type="submit" value="註冊"/>
        </p>
        
</form>

效果是這樣的

而後引入jquery 和 jquery.validate。

就能夠開始js代碼的書寫

validate(options) //返回:Validator// 驗證所選的 FORM 

$('#form').validate({})  //用來綁定所需操做的form表單

如下是個人一段代碼

$(function() {
        $('#form').validate({
            rules: {   //返回元素的驗證規則 
                username: {   //綁定的name值
                    required: true, //必填選項
                    minlength:6  //最小長度
                    
                },
                password: {   //綁定的name值
                    required: true,  //必填項 
                    minlength:6        //最小長度
                }
            },
            messages: {  //驗證錯誤時的提示
                username: { //綁定的name值
                    required: '必填',
                    minlength:'最少6個字符'
                },
                password: { //綁定的name值
                    required: '必填',
                    minlength:'最少6個字符'
                }
            },
            submitHandler: function() { //驗證成功後執行
                
            },
            highlight:function(element,errorClass){ //驗證失敗時執行
                $(element).addClass(errorClass);
                $(element).fadeOut().fadeIn();
            }
        });
    })

簡單的驗證註釋都有了，而後是效果圖