jQuery注册验证 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        form {
            width: 500px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .int, .sub {
            height: 30px;
            line-height: 30px;
        }

        .high {
            color: red;
        }

        .formtips.onSuccess, .formtips.onError {
            padding: 2px;
        }

        .formtips.onSuccess {
            border: 1px solid green;
            color: #000000;
        }

        .formtips.onError {
            border: 1px solid red;
            color: red;
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form action="" method="post">
    <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>
<script type="text/javascript">
    //给必填的input加红星星
    $("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.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>');
                }
            }
        }).keyup(function(){
            $(this).triggerHandler("blur");
        }).focus(function(){
            $(this).triggerHandler("blur");
        });

        //验证邮箱
        $('form :input').blur(function(){
            if ($(this).is('#email')) {
                var $parent = $(this).parent();
                $parent.find(".formtips").remove();
                if (this.value == "" || (this.value != "" && !/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.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>');
                    //$parent.append('<span>' + okMsg + '</span>');  //为什么这样写会出现两个span啊
                }
            }
        }).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>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>register</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        form {
            width: 500px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 10px;
        }

        .int, .sub {
            height: 30px;
            line-height: 30px;
        }

        .high {
            color: red;
        }

        .formtips.onSuccess, .formtips.onError {
            padding: 2px;
        }

        .formtips.onSuccess {
            border: 1px solid green;
            color: #000000;
        }

        .formtips.onError {
            border: 1px solid red;
            color: red;
        }
    </style>
    <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form action="" method="post">
    <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>
<script type="text/javascript">
    //给必填的input加红星星
$("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.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>');
                }
            }
        }).keyup(function(){
            $(this).triggerHandler("blur");
        }).focus(function(){
            $(this).triggerHandler("blur");
        });

        //验证邮箱
$('form :input').blur(function(){
            if ($(this).is('#email')) {
                var $parent = $(this).parent();
                $parent.find(".formtips").remove();
                if (this.value == "" || (this.value != "" && !/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.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>');
                    //$parent.append('<span>' + okMsg + '</span>');  //为什么这样写会出现两个span啊
}
            }
        }).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>
</html>
posted @ 2016-07-29 15:46  kpengfang  阅读(453)  评论(0)  编辑  收藏  举报