jQuery html5Validate表单验证插件新增validate参数测试实例页面

回到相关文章 »

代码:

HTML代码:
<form>
    <p>输入密码:<input type="password" id="pwd" required data-min="6" placeholder="至少6个字符" /></p>
    <p>再次输入:<input type="password" id="pwdCheck" required data-min="6" /></p>
    <p>你喜欢的美女(至少选择3项):</p>
    <div id="checkBox" class="checkbox_box"><input id="checkItem1" type="checkbox" /><label for="checkItem1">陈怡君</label>
    <input id="checkItem2" type="checkbox" /><label for="checkItem2">程琳</label>
    <input id="checkItem3" type="checkbox" /><label for="checkItem3">司马可儿</label>
    <input id="checkItem4" type="checkbox" /><label for="checkItem4">高子文</label>
    <input id="checkItem5" type="checkbox" /><label for="checkItem5">妮妮</label>
    <input id="checkItem6" type="checkbox" /><label for="checkItem6">莫小诗</label>
    <input id="checkItem7" type="checkbox" /><label for="checkItem7">ViKi</label>
    <input id="checkItem8" type="checkbox" /><label for="checkItem8">娜娜</label>
    <input id="checkItem9" type="checkbox" /><label for="checkItem9">周小洁</label>
    <input id="checkItem10" type="checkbox" /><label for="checkItem10">苏小楠</label></div>
    <p><input type="submit" value="进击吧~插件君~"></p>
</form>
                
JS代码:
$("form").html5Validate(function() {
        alert("验证全部通过!");
        this.submit();
    }, {
    validate: function() {
        if ($("#pwdCheck").val() !== $("#pwd").val()) {
            $("#pwdCheck").testRemind("前后密码不一致");
            return false;    
        } else if ($("input[type='checkbox']:checked").length < 3) {
            $("#checkBox").testRemind("至少选择3项");
            return false;
        }
        return true;
    }
});
                

效果:

输入密码:

再次输入:

你喜欢的美女(至少选择3项):