JQ---表单验证（用户名、邮箱）

最新推荐文章于 2017-10-15 18:54:08 发布

candy_li123

最新推荐文章于 2017-10-15 18:54:08 发布

阅读量2.8k

点赞数

分类专栏： JQuery 文章标签：表单验证

本文链接：https://blog.csdn.net/candy_li123/article/details/50112013

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2015-11-30：表单验证用户名长度、邮箱格式；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单验证</title>
        <style type="text/css">
            .int{
                margin-bottom: 20px;
            }
            .high,.onError{
                color: red;
            }
            .onSuccess{
                color: green;
            }
        </style>
        <script src="js/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){
        $("form :input.required").each(function(){
            var $required=$("<strong class='high'>*</strong>");
            $(this).parent().prepend($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="请输入正确的Email地址";
                    $parent.append("<span class='formtips onError'>"+errorMsg+"</span>")
                }else{
                    var okMsg="输入正确";
                    $parent.append("<span class='formtips onSuccess'>"+okMsg+"</span>")
                }
            }
        })
        //设置元素获取焦点及按键弹起触发blur事件
//      .keyup(function(){
//          $(this).triggerHandler("blur");
//      }).focus(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 method="post" action="#">
            <div class="int">
                <label for="userName">用户名：</label>
                <input type="text" id="userName" class="required" value="" />
            </div>
            <div class="int">
                <label for="email">邮箱：</label>
                <input type="text" id="email" class="required" value="" />
            </div>
            <div class="int">
                <label for="personinifo">个人资料：</label>
                <input type="text" id="persioninfo" value="" />
            </div>
            <div class="sub">
                <input type="submit" name="send" id="send" value="提交" />
                <input type="reset" name="res" id="res" value="重置" />
            </div>
        </form>
    </body>
</html>