锋利的jquery表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script src="jquery-1.10.2.js"></script>
    <style>
        .formtips{
            width: 80px;
            height: 20px;
        }
        .onError{
            color: red;
        }
        .onSuccess{
            color: green;
        }
    </style>
</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">
        <lable for="personinfo">个人资料：</lable>
        <input type="text" id="personinfo" class="required">
    </div>
    <div class="sub">
        <input type="submit" value="提交" id="send">
        <input type="reset" id="res">
    </div>
</form>
<script>
    $(function () {
        $("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="请输入正确的邮箱地址";
                    $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
                }else {
                    var okMsg="输入正确";
                    $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
                }
            }
        });

    })
</script>
</body>
</html>
锋利的jquery表单验证

猜你喜欢
