用Jquery.validate.js做数据校验

最新推荐文章于 2022-11-04 14:53:45 发布

哟嚯666

最新推荐文章于 2022-11-04 14:53:45 发布

阅读量665

点赞数

分类专栏： Javascript Jquery HTML

本文链接：https://blog.youkuaiyun.com/hailangying/article/details/41511947

版权

HTML 同时被 3 个专栏收录

15 篇文章

订阅专栏

Javascript

1 篇文章

订阅专栏

Jquery

1 篇文章

订阅专栏

1.引用jquery.js、jquery.validate.js、messages_cn.js(我这里应用的都是min的，就是精简的，没有空格什么的，其它没什么区别)

2给标记name属性命名

3在加载事件中调用validate方法

<html xmlns="http://www.w3.org/1999/xhtml">
<script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/messages_cn.js" type="text/javascript"></script>
<head runat="server">
<title></title>
<script type="text/javascript">
    $(document).ready(function () {
        $('#form1').validate({
            submitHandler:function(form){alert("submitted");form.submit();},
            rules: {
                uname: { required: true },
                urealname: { required: true },
                upwd: { required: true, minlength: 6, maxlength: 20 },
                upwd2: { required: true, minlength: 6, maxlength: 20, equalTo: "#user_pwd" },
                ubirthday: { required: true },
                uphone: { required: true },
                uemail: { required: true, email: true },
                uaddress: { required: true }
            },
            messages: {
                uname: { required: "请输入用户名" },
                urealname: { required: "请输入真实姓名" },
                upwd: { required: "请输入密码"},
                upwd2: { required: "请输入确认密码", equalTo: "两次输入密码不一致" },
                ubirthday: { required: "请输入出生日期" },
                uphone: { required: "请输入手机号" },
                uemail: { required: "请输入邮箱", email: "邮箱格式不正确" },
                uaddress: {required:"请输入住址"}
            }
        });
    }); 
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>    
        用户名：<input id="user_name" name="uname" type="text" /><br />
        真实姓名：<input id="user_realname" name="urealname"type="text" /><br />
        密码：<input id="user_pwd" name="upwd" type="password" /><br />
        确认密码：<input id="user_pwd2" name="upwd2"type="password" /><br />
        出生日期：<input id="user_birthday" name=" ubirthday" type="text" οnfοcus="WdatePicker({dateFmt:'yyyy年MM月dd日'})"/><br />
        手机号：<input id="user_mobilephone" name="uphone" type="text" /><br />
        邮箱：<input id="user_email" name="uemail" type="text" /><br />
        住址：<textarea id="user_address" name="uaddress" cols="20" name="S1" rows="2"></textarea><br />
        <asp:Button ID="Button1" runat="server" Text="保存" οnclick="Button1_Click" />
    </div>
    </form>
</body>
</html>

我这里做的是最常见的验证