对表单、表格的操作以及更多应用-CSDN博客

<!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>
    <title></title>
    <style type="text/css">
        span
        {
            width: 100px;
            float: left;
        }
        .sub
        {
            padding: 10px 100px;
        }
    </style>
</head>
<body>
    <form action="" method="post">
    <div class="int">
        <label for="username">
            <span>用户名：</span></label>
        <input type="text" id="username" class="required" />
    </div>
    <div class="int">
        <label for="email">
            <span>邮箱：</span></label>
        <input type="text" id="email" class="required" />
    </div>
    <div class="int">
        <label for="personinfo">
            <span>个人资料：</span></label>
        <input type="text" id="personinfo" />
    </div>
    <div class="sub" style="display: inline-block">
        <input type="submit" id="send" value="提交" />
        <input type="reset" id="res" value="重置" />
    </div>
    </form>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $("form .required").each(function () {
                var $required1 = $("<strong class='high'>*<strong/>");
                $(this).parent().append($required1);
                $(this).after($required1);
            });

            $("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('<div class="formtips onError" style="display: inline-block">' + errorMsg + '</div>');
                    } else {
                        var okMsg = '输入正确.';
                        $parent.append('<div class="formtips OnSuccess" style="display: inline-block">' + okMsg + '</div>');
                    }
                }
                if ($(this).is("#email")) {
                    if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
                        var errorMsg = '请输入正确的E-Mail地址';
                        $parent.append('<div class="formtips onError" style="display: inline-block">' + errorMsg + '</div>');
                    } else {
                        var okMsg = '输入正确.';
                        $parent.append('<div class="formtips OnSuccess" style="display: inline-block">' + okMsg + '</div>');
                    }
                }
            }).keyup(function () {
                $(this).triggerHandler("blur"); //只影响关联的第一个元素，阻止绑定元素的默认行为
            }).focus(function () {
                $(this).triggerHandler("blur");
            });

            $("#send").click(function () {
                $("form .required").trigger("blur"); //影响关联的所有元素
                var numError = $("form .onError").length;
                if (numError > 0) {
                    return false;
                }
                alert("注册成功，密码已经发到你的邮箱，请查收.");
            });

            $('#res').click(function () {
                $(".formtips").remove();
            });

        });
    </script>
</body>
</html>