现在的位置: 首页 > 综合 > 正文

jquery validate(5) : 如何进行 ajax 提交

2014年01月20日 ⁄ 综合 ⁄ 共 1425字 ⁄ 字号 评论关闭

结论: 用普通按钮做 ajax 提交更为合适!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>自定义验证</title>
    <script src="jqValidate/jquery.min.js" type="text/javascript"></script>
    <script src="jqValidate/jquery.metadata.js" type="text/javascript"></script>
    <script src="jqValidate/jquery.validate.js" type="text/javascript"></script>
    <script src="jqValidate/jquery.validate.messages_cn.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#signupForm").validate({
                onkeyup: true,
                rules: {
                    zipcode:{
                        required: true,
                        isZipCode: true
                    }
                },
                messages: {
                    zipcode: {
                        required: "请填写邮编",
                        isZipCode: "邮编不正确"
                    }
                }, 
                submitHandler: function(form) {
                    //alert('要提交了!');
                    //1. 不可用 $(form).submit();否则会死循环
                    //2. 如果 form.submit()也不用,此表单就不会自动提交了
                    //form.submit();
                    //3. 下面是 ajax 提交
                    ajaxSubmit();
                }
            });
            
            // 邮政编码验证   
            $.validator.addMethod("isZipCode", function(value, element) {   
                var tel = /^[0-9]{6}$/;
                return this.optional(element) || (tel.test(value));
            }, "请正确填写您的邮政编码");
        });
        
        //ajax 提交
        function ajaxSubmit(){
            if( $("#signupForm").valid() ){
                $.post("submit.ashx", function(data){
                    alert(data.result);
                }, "json");
            }
        }
    </script>
</head>
<body>
    <form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">
            请输入邮编: </label>
        <input id="zipcode" name="zipcode" />
    </p>
    <p>
        <input class="submit" type="submit" value="Submit" />
        <input class="button" type="button" onclick="ajaxSubmit()" value="普通button的ajax提交" />
    </p>
    </form>
</body>
</html>
【上篇】
【下篇】

抱歉!评论已关闭.