JqueryValidate使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jquery.validate测试</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.validate.min.js"></script>
    <link href="Content/validation.css" rel="stylesheet" />
</head>
<body>
    <form id="signupForm" method="get" action="">
        <p>
            <label for="firstname">Firstname</label>
            <input id="firstname" name="firstname" />
        </p>
        <p>
            <label for="email">E-Mail</label>
            <input id="email" name="email" />
        </p>
        <p>
            <label for="password">Password</label>
            <input id="password" name="password" type="password" />
        </p>
        <p>
            <label for="confirm_password">确认密码</label>
            <input id="confirm_password" name="confirm_password" type="password" />
        </p>
        <p>
            <label for="Onlyone">自定义验证</label>
            <input id="Onlyone" name="Onlyone" type="text" />
        </p>
        <p>
            <input class="submit" type="submit" value="Submit" />
        </p>
    </form>
</body>
</html>
<script type=text/javascript>
    $().ready(function () {
        $("#signupForm").validate({
            rules: {
                firstname: "required",
                email: {
                    required: true,
                    email: true
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                Onlyone: {
                    Onlyone:["1"]
                }
            },
            messages: {
                firstname: "请输入姓名",
                email: {
                    required: "请输入Email地址",
                    email: "请输入正确的email地址"
                },
                password: {
                    required: "请输入密码",
                    minlength: jQuery.format("密码不能小于{0}个字 符")
                },
                confirm_password: {
                    required: "请输入确认密码",
                    minlength: "确认密码不能小于5个字符",
                    equalTo: "两次输入密码不一致不一致"
                }
            },
            success: function (label) {//验证通过
                label.html(" ").addClass("checked");
            },
            errorPlacement: function (error, element) {//错误信息显示的位置
                error.appendTo(element.parent());//验证的元素后面(默认)
                element.addClass("error");//添加红色选中框
            },
            highlight: function (element, errorClass) {//可以给未通过验证的元素加效果、闪烁等
                $(element).parent().find("." + errorClass).removeClass("checked");
            },
            submitHandler: function () {
                alert("提交!!!");
            },
        });
    });
    //value 是元素的值,element 是元素本身,param 是参数。
    $.validator.addMethod("Onlyone", function (value, element, params) {
        if (value == params) {
            return true;
        }
        else {
            return false;
        }
    },"必须是1");
</script> <br><br><br><br><br>

  

posted @   兴趣就是天赋  阅读(108)  评论(0编辑  收藏  举报
(评论功能已被禁用)
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
点击右上角即可分享
微信分享提示