jquery的validate.js 和 form.js 的使用方法

在使用 Jquery 的方法的验证并且修改 原Form 表单的提交方式的时候，需要引用的文件有

<script type="text/javascript" src="js/jquery-1.8.3-min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>

 

如下的代码为页面添加了相应的验证和修改了提示信息，并且重写了表单提交的方法和添加自定义的身份证验证方法

jQuery.validator.addMethod("isIDCard", function (value, element) {
    return this.optional(element) || (checkIDCard(value));
}, "请正确填写您的身份证码");

/*-------注册验证-----------*/
$().ready(function () {
    $("#signupForm").validate({
        rules: {
            userName: {
                required: true
            },
            telphone: {
                required: true,
                rangelength: [11, 11],
                digits: "只能输入整数"
            },
            password: {
                required: true,
                rangelength: [8, 16]
            },
            confirm_password: {
                required: true,
                equalTo: "#User_Pwd",
                rangelength: [8, 16]
            },
            IDCard: {
                required: true,
                isIDCard: true
            },
            email: {
                required: true,
                email: true
            }
        },
        messages: {
            userName: {
                required: "请输入用户名"
            },
            telphone: {
                required: "请输入手机号",
                rangelength: jQuery.format("请输入正确的手机号"),
            },
            password: {
                required: "请输入密码",
                rangelength: jQuery.format("密码在8~16个字符之间"),
            },
            confirm_password: {
                required: "请输入确认密码",
                rangelength: jQuery.format("密码在8~16个字符之间"),
                equalTo: "两次输入密码不一致"
            },
            IDCard: {
                required: "请输入身份证号码",
                isIDCard: "请正确填写您的身份证号码"
            },
            email: {
                required: "请输入邮箱",
                email: "邮箱格式不正确"
            }
        },
        submitHandler: function (form) {
            alert("submitted");
            //$.post("/API/SysMenu/UserMain.ashx", { func: "Register", data: formToJson("#signupForm") }, function (obj) {
            //    if (obj.Status == apiok) {

            //    }
            //}, "json");

            $(form).ajaxSubmit({
                type: "post",
                url: "/API/SysMenu/UserMain.ashx",
                dataType: "json",
                data: { func: "Register", data: formToJson("signupForm") },
                success: function (result) {
                    //返回提示信息       
                    alert("ok");
                }
            });

        }
    });
});

 <div class="wrapper">
        <form id="signupForm" class="zcform">
            <p class="clearfix">
                <label class="one" for="userName">用户名：</label>
                <input id="User_Account" name="User_Account" class="myinput required" value="" placeholder="用户名" />
            </p>
            <p class="clearfix">
                <label class="one" for="Phone">手机号码：</label>
                <input id="Phone" name="Phone" class="myinput required" value="18782463597" placeholder="请输入手机号" />
            </p>
            <p class="clearfix">
                <label class="one">校验码：</label>
                <input id="code" class="identifying_code" type="text" placeholder="请输入手机6位校验码" />
                <input class="get_code" type="button" style="color:#fff;" value="获取验证码" />
            </p>
            <p class="clearfix">
                <label class="one" for="User_Pwd">登录密码：</label>
                <input id="User_Pwd" name="User_Pwd" type="password" value="12312312" class="myinput {required:true,rangelength:[8,20],}" placeholder="请输入密码" />
            </p>
            <p class="clearfix">
                <label class="one" for="confirm_password">确认密码：</label>
                <input id="confirm_password" name="confirm_password" type="password" value="12312312" class="myinput {required:true,equalTo:'#password'}" placeholder="请再次输入密码" />
            </p>
            <p class="clearfix">
                <label class="one" for="DocumentNum">身份证号：</label>
                <input id="DocumentNum" name="DocumentNum" class="myinput required" value="510922199107300176" placeholder="身份证号" />
            </p>
            <p class="clearfix">
                <label class="one" for="Email">邮箱：</label>
                <input id="Email" name="Email" type="text" class="myinput required" value="123@123.com" placeholder="邮箱" />
            </p>
            
            <p class="clearfix"><input class="myinput submit" type="submit" value="立即注册" /></p>
            <p class="last"><a href="#">立即登录&gt;</a></p>
        </form>
    </div>