表单验证

最新推荐文章于 2025-09-07 22:29:54 发布
转载最新推荐文章于 2025-09-07 22:29:54 发布 · 66 阅读
0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/dkiss/blog/618315
文章标签：
#javascript #ViewUI
本文介绍了一个使用jQuery实现的表单验证实例，详细展示了如何通过JavaScript进行实时验证用户名和邮箱的有效性，确保用户输入符合预期格式。
为什么80%的码农都做不了架构师？>>>
<html>
 
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        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-left:10px;
        }
         
         
         
        .formtips
        {
            width:200px;
            margin:2px;
            padding:2px;
        }
         
        .onError
        {
            background:#FFE0E9 url(./img/reg3.gif) no-repeat 0 center;
            padding-left:25px;
        }
         
        .onSuccess
        {
            background:#E9FBFB url(./img/reg4.gif)
            no-repeat 0 center;
            padding-left:25px;
        }
         
        .high
        {
            color:red;
        }
    </style>
     
    <!--   引入jQuery -->
    <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script>
        $(function(){
            //如果是必填的则加红标识
            $("form :input.required").each(function(){
                $required = $("<strong class='high'>*</strong>");
                $(this).parent().append($required);
            })
             
            //文本失去焦点后
            $("form :input").blur(function(){
                var $parent = $(this).parent();
                $parent.find(".formtips").remove();  //先去掉先前的提醒
                 
                //验证用户名
                if($(this).is('#usrname'))
                {
                    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 = '请输入正确的email地址';
                        $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");
            });//end blur
             
            //提交，最终验证
            $('#send').click(function(){
                $("form :input.required").trigger('blur');
                 
                var numError = $('form .onError').length;
                 
                if(numError)
                {
                    return false;
                }
                alert("注册成功,密码已发到你的邮箱,请查收.");
            });
             
            //重置
            $("#res").click(function(){
                $(".formtips").remove();
            });
        })
    </script>
</head>
 
<body>
    <form method="post" action="">
        <div class="int">
            <label for="usrname">用户名：</label>
            <input type="text" id="usrname" 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" id="send"/>
            <input type="reset"  id="res"/>
        </div>
    </form>
</body>
</html>
转载于:https://my.oschina.net/dkiss/blog/618315