Jquery Validate两步实现输入合法校验

创建时间:2014/10/5 11:37:28
关键字:validate,输入校验

Step1:引用Jquery库和jquery.validate.js库
    <script src="../Script/jquery-1.7.2.js"></script>
    <script src="../Script/jquery.validate.js"></script>
Step2:在页面加载完成后中对表单注册校验机制
     要验证的表单和表单元素通过Id匹配,在rules中定义验证规则,在message中定义不合法的提示信息。
    <script type="text/javascript">
        $(function () {
            $("#frmReg").validate({
                rules: {
                    txtUserName: {
                        required: true,
                        maxlength: 50
                    },
                    txtNickname: {
                        required: true,
                        maxlength: 50
                    },
                    txtPassword: {
                        required: true,
                        minlength: 6
                    },
                    txtPassword2: {
                        required: true,
                        minlength: 6,
                        equalTo: "#txtPassword"
                    },
                    txtEmail: {
                        email: true
                    }
                },
                messages: {
                    txtUserName: "*",
                    txtNickname: "*",
                    txtPassword: {
                        required: "*",
                        minlength: "*密码不能小于6个字符"
                    },
                    txtPassword2: {
                        required: "*",
                        minlength: "确认密码不能小于6个字符",
                        equalTo: "两次输入密码不一致"
                    },
                    txtEmail: {
                        required: "*",
                        email: "*请输入正确的Email地址"
                    }
                }
            });
        });
 
    </script>
 
附:表单及表单元素的代码如下:
 
    <form id="frmReg" method="post" action="Register.aspx">
 
        <div id="divMain">
            <div class="title">
                用户注册
            </div>
            <table style="margin-top: 10px;">
                <tr>
                    <td class="right">登录帐号:</td>
                    <td>
                        <input type="text" id="txtUserName" name="txtUserName" />
                    </td>
                </tr>
                <tr>
                    <td class="right">用户昵称:</td>
                    <td>
                        <input type="text" id="txtNickname" name="txtNickname" />
                    </td>
                </tr>
                <tr>
                    <td class="right">密码:</td>
                    <td>
                        <input type="password" id="txtPassword" name="txtPassword" />
                    </td>
                </tr>
                <tr>
                    <td class="right">确认密码:</td>
                    <td>
                        <input type="password" id="txtPassword2" name="txtPassword2" />
                    </td>
 
                </tr>
                <tr>
                    <td class="right">Email:</td>
                    <td>
                        <input type="text" id="txtEmail" name="txtEmail" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center;">
                        <input id="submit" type="submit" value="注册" /></td>
                    <td></td>
                </tr>
            </table>
            <div></div>
        </div>
 
    </form>