jquery validate的漂亮css样式验证

最新推荐文章于 2025-05-05 12:53:59 发布

.NET跨平台

最新推荐文章于 2025-05-05 12:53:59 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery及其组件

原文链接：https://blog.youkuaiyun.com/WuLex

Jquery及其组件专栏收录该内容

147 篇文章

订阅专栏

本文介绍了一个结合在线验证功能与美观提示效果的ASP.NET网页实例，使用C#作为后端语言，通过jQuery.validate插件实现了输入验证，包括密码长度检查和必填字段提醒，同时利用CSS和jQuery动画提供了交互式的错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自己结合了在网上找的验证功能和漂亮的提示同能后做出来的验证

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="valid4.aspx.cs" Inherits="ImgAll.valid4" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        body {
            font-family: verdana, arial, helvetica, sans-serif;
            font-size: 12px;
        }

        body {
            margin: 0px;
            padding-bottom: 0px;
            padding-left: 0px;
            padding-right: 0px;
            padding-top: 0px
        }

        a {
            color: #000000;
            display: block;
            height: 36px;
            text-decoration: none;
            width: 164px;
        }

        ul {
            list-style-type: none;
            margin: 200px auto;
            width: 632px;
        }

        li {
            float: left;
            height: 36px;
            line-height: 39px;
            margin: 0px 20px;
            position: relative;
            text-align: center;
            width: 164px;
        }

        label {
            background: url(images/hover.gif) no-repeat 0px 0px;
            display: none;
            height: 76px;
            left: -16px;
            line-height: 68px;
            position: absolute;
            top: -100px;
            width: 200px;
        }

        input.error {
             border: 2px dashed red;
        }
    </style>
    <script src="scripts/jquery-1.8.2.js"></script>
    <script src="scripts/jquery.validate.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#a input').hover(function() {
                    $(this).parent().find('label').animate({
                            opacity: "show",
                            left: "-85px"
                        },
                        500); //.show();  
                },
                function() {
                    $(this).parent().find('label').animate({
                            opacity: "hide",
                            left: "-105px"
                        },
                        500); //.hide();  
                });

            $("#signupForm").validate({
                rules: {
                    password: {
                        required: true,
                        minlength: 5
                    },
                    name: {
                        required: true
                    }
                },
                messages: {
                    password: {
                        required: "请输入密码",
                        minlength: jQuery.validator.format("密码不能小于{0}个字符")
                    },
                    name: {
                        required: "测试"
                    }
                },
                success: function() {
                    $("label.error").remove();
                }
            });

        })
    </script>
</head>

<body>
<form id="signupForm">
    <div id="a">
        <ul>
            <li>
                <div>
                    <input type="text" name="password">
                </div>
            </li>
            <li>
                <input type="text" name="name">
            </li>
        </ul>
    </div>
    <input type="submit" value="提交"/>
</form>
</body>

</html>

如图：
在这里插入图片描述