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>

转载于:https://www.cnblogs.com/kpengfang/p/5718657.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值