表单验证 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

    <style>
        body
        {
            font: 12px/19px Arial, Helvetica, sans-serif;
            color: #666;
        }
        form div
        {
            margin: 5px 0;
        }
        .int label
        {
            float: left;
            width: 100px;
            text-align: right;
        }
        .int input
        {
            padding: 1px 1px;
            border: 1px solid #ccc;
            height: 16px;
        }
        .sub
        {
            padding-left: 100px;
        }
        .sub input
        {
            margin-right: 10px;
        }
        .formtips
        {
            width: 200px;
            margin: 2px;
            padding: 2px;
        }
        .onError
        {
            background: #FFE0E9 url(img/reg3.gif) no-repeat 0 center;
            padding-left: 25px;
        }
        .onSuccess
        {
            background: #E9FBEB url(img/reg4.gif) no-repeat 0 center;
            padding-left: 25px;
        }
        .high
        {
            color: red;
        }
    </style>
View Code JS验证代码 
<script type="text/javascript">
        $(function() {
            //在表单内class属性为“required”的文本框是必须填写的，
            //因此需要将它与其他的非必须填写表单元素加以区别，
            //即在文本框后面追加一个红色的小星星标识。
            //可以使用append()方法来完成，代码如下：
            $("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).val() == "" || $(this).val().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).val() == "" || ($(this).val() != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test($(this).val()))) {
                        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");
                //用户也许会提出：为什么每次都要等字段元素失去焦点后，才提醒输入是否正确？如果输入时就可以提醒，这样就可以更加即时了。
            }).focus(function() {
                $(this).triggerHandler("blur");
                //为了达到用户提出的需求，需要给表单元素绑定keyup事件和focus事件，keyup事件能在用户每次松开按键时触发，实现即时提醒；focus事件能在元素得到焦点的时候触发，也可以实现即时提醒。
                //trigger("blur")不会会触发为元素绑定的blur事件，也会触发浏览器默认的blur事件，即不能将光标定位到文本框上
                //triggerHandler这个方法的行为表现与trigger类似，但有以下三个主要区别： 
                //* 第一，他不会触发浏览器默认事件。 
                //* 第二，只触发jQuery对象集合中第一个元素的事件处理函数。 
                //* 第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 
            });
            //在表单提交之前，需要对表单的必须填写元素进行一次整体的验证
            $("#send").click(function() {
                $("form :input.required").trigger("blur");
                var vNum = $("form .onError").length;
                if (vNum > 0) {
                    return false;
                }
                alert("注册成功,密码已发到你的邮箱,请查收.");
            });
        });
    </script>

 

</head>
<body>
    <form id="form1" runat="server">
    <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>

 

posted on 2013-01-17 11:07  .NET每天一小步  阅读(107)  评论(0)    收藏  举报