jQuery学习笔记5 表单验证

来源：互联网发布：入侵centos教程编辑：程序博客网时间：2024/06/08 05:03

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="demo9.aspx.cs" Inherits="jQuery.demo9" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>表单验证</title>
    <style type="text/css">
        .high
        {
            color: Red;
        }
        span
        {
            font-size: 12px;
            color: Red;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("form :input.required").each(function () {
                var $required = $("<strong class='high'>*</strong>");
                $(this).parent().append($required);
            });

            $("form :input").blur(function () {
                var $parent = $(this).parent();
                $parent.find(".formtips").remove();
                if ($(this).is("#username")) {
                    if (this.value == "" || this.value.length < 6) {
                        var errorMsg = "请输入至少6位的用户名.";
                        $parent.append("<span class='formtips onError'>" + errorMsg + "</span>");
                    } else {
                        var okMsg = "输入正确.";
                        $parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>");
                    }
                }
                if ($(this).is("#email")) {
                    if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
                        var errorMsg = "请输入正确的E-Mail地址.";
                        $parent.append("<span class='formtips onError'>" + errorMsg + "</span>");
                    }

                    else {
                        var okMsg = "输入正确.";
                        $parent.append("<span class='formtips onSuccess'>" + okMsg + "</span>");
                    }
                }
            }).keyup(function () {
                $(this).triggerHandler("blur");
            }).keydown(function () {
                $(this).triggerHandler("blur");
            });
            $("#send").click(function () {
                $("form .required:input").trigger("blur");
                var numError = $("form .onError").length;
                if (numError) {
                    return false;
                }
                alert("注册成功,密码已发送到您的邮箱,请查收.");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server" method="post" action="">
    <div class="int">
        <label for="username">
            用户名:</label>
        <input type="text" id="username" class="required" />
    </div>
    <div class="int">
        <label for="email">
            邮箱:</label>
        <input type="text" id="email" class="required" />
    </div>
    <div class="int">
        <label for="personinfo">
            个人资料:</label>
        <input type="text" id="personinfo" />
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send" /><input type="reset" id="res" />
    </div>
    </form>
</body>
</html>