【锋利的jQuery】11、表单验证 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>表单验证</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- 在head中引入jQuery 这个功能跟jQuery的版本还是有点关系，建议用老版本-->
    <script type="text/javascript" src="../../lib/jquery-3.1.1.js"></script>
    <link href="../../../css/jQuery/demo/ch05/style.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">

        $(function () {
            //如果是必填的，则加红星标识
            $("form :input.required").each(function () {
                var $required = $("<strong class='high'> *</strong>"); //创建元素
                $(this).parent().append($required);
            });

            //文本框失去焦点后
//            var inputt = $('form :input');
            $('form :input').blur(function () {
                var tt = this;
//                alert("输入框失去了焦点" + this);
                var $parent = $(this).parent();
//                $parent.append('<span class="onSuccess">测试</span>');
                $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");
            }).focus(function(){
                //获取焦点事件
                $(this).triggerHandler("blur");
            });

            //提交，最终验证。
            $('#send').click(function () {
                //触发器，触发事件
                $("form :input.required").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"/>
    </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>

 

css

 

body {
    font: 12px/19px Arial, Helvetica, sans-serif;
    color: #666;
}

form div {
    margin: 5px 500px;
}

.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(../../../../images/jQuery/ch05/reg3.gif) no-repeat 0 center;
    padding-left: 25px;
}

.onSuccess {
    background: #E9FBEB url(../../../../images/jQuery/ch05/reg4.gif) no-repeat 0 center;
    padding-left: 25px;
}

.high {
    color: red;
}

　　

图片：

 

 

效果：

 

 

 

 

 

 

　　

 

posted @ 2017-04-10 00:01  cutter_point  阅读(109)  评论(0)    收藏  举报