jquery 的前端验证控件应用(form www.sysoft.cc)

浏览数：77 / 时间：2015年06月09日

jquery validate验证控件真是挺好用，功能不错，找好文档，使用也较方便呵，不错。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
    <script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#User").validate({
                rules: {
                    username: {
                        required: true,
                        minlength: 3
                    },
                    password: {
                        required: true
                    },
                    repwd: {
                        equalTo: "#password"
                    },
                    mail: {
                        email: true
                    },

                    tel: { maxlength: 11, digits: true }
                },
                messages: {
                username:{
                required: "用户名不能为空",
                        minlength: "用户名至少三位"
                },
                password: {
                        required: "密码不能为空"
                    },
                repwd: {
                        equalTo: "两次输入密码不相同"
                    },
                    mail: {
                        email: "请输入正确的邮箱格式"
                    },

                    tel: { maxlength: "手机号码最多11位", digits:"请输入正确的手机格式" }
            }
        });
    });
    </script>
</head>
<body>
    <div>
    <form id="User" method="post" action="">
  用户名： <input type="text" name="username" /><br />
  密码： <input type="password" name="password" id="password" /><br />
  确认密码： <input type="password" name="repwd"  /><br />
  邮箱： <input type="text" name="mail" /><br />
  手机： <input type="text" name="tel" /><br />
  <input type="submit" name"btnsubmit" value="提交" />
    </form>
    </div>
</body>
</html>