html5Validate插件示例之注册实例页面

HTML代码：

<form action="regist-success.php" method="post">
    <p>&emsp;<label for="nickname">账户名：</label>
        <input type="text" id="nickname" class="input" name="nickname" size="20" placeholder="5-20个单词字符" required pattern="^\w+$" data-min="5" data-max="20" />
    </p>
    <p>登录密码：<input type="password" id="pwd" class="input" name="password" size="20" required data-min="6" data-max="20" /> 6-20个字符</p>
    <p>确认密码：<input type="password" id="pwdChk" class="input" size="20" disabled required data-min="6" data-max="20" /></p>
    <p>&emsp;<label for="verifycode">验证码：</label>
        <input type="text" id="verifycode" class="input vt" name="code" size="6" required pattern="^\d{5}$" autocomplete="off" />
        <a href="javascript:" id="codeChange">
            <img src="/php/code.php?action=verifycode" border="0">点击换一张
        </a>
    </p>
    <p><input type="submit" class="button" value="发表点评，请放心点击" disabled /></p>
    <input type="hidden" id="flagSubmit" name="flag" autocomplete="off">
</form>
                

JS代码：

// 昵称的placeholder效果
$("#nickname").bind("blur", function() {
   var self = this;
    setTimeout(function() {
        if ($.testRemind.display == false && $.html5Validate.isRegex(self) && self.value.length == 5) {
            $(self).testRemind("该昵称已存在");    
        }    
    }, 200);
}).placeholder({
    labelMode: true    
});

// 验证码刷新
var codeChange = $("#codeChange");
codeChange.bind("click", function() {
    var img = $(this).find("img");
    img.attr("src", img.attr("src").split("&")[0] + "&r=" + Math.random())
    return false;    
});

// 登录密码与确认密码的交互
var pwd = $("#pwd"), pwdChk = $("#pwdChk");
pwd.bind("keyup", function() {
    if ($.html5Validate.isEmpty(this)) {
        pwdChk.attr("disabled", "disabled");    
    } else {
        pwdChk.removeAttr("disabled");
    }
});


$("form").html5Validate(function() {
    var self = this;
    // 前后密码一致的验证
    if (pwd.val() !== pwdChk.val()) {
        pwdChk.testRemind("前后密码不一致").get(0).select();    
    } else {
        $.ajax({
            url: this.action,
            type: this.method || "post",
            data: $(this).serialize(),
            dataType: "json",
            success: function(json) {
                if (json.succ) {
                    $("#flagSubmit").val("true");
                    self.submit();    
                    $(".button").attr("disabled", "disabled");
                } else if (json.msg) {
                    alert(json.msg);
                    codeChange.trigger("click");    
                }
            },
            error: function() {
                alert("网络原因，发表点评没有成功，您可以稍后重试！");    
            }
        });    
    }
});