您的位置：首页 > Web前端 > JQuery

jQuery实现邮箱验证

2013-04-23 20:19 99 查看

要求：

1.页面有两个文本框，一个邮箱，一个电话，对邮箱进行验证

2.邮箱文本框获取焦点前，显示“输入邮箱”

3.邮箱文本框获取焦点后，内容清空

4.若邮箱输入为空，焦点转移到电话文本框或其他地方之后，提示“邮箱不能为空”，同时焦点自动回到邮箱文本框。

5.若不为空，验证邮箱格式是否正确，若不正确，提示“格式不正确，请重新输入”，同时焦点自动回到邮箱文本框。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script src="jquery-1.9.1.js" type="text/javascript"></script>

<script type="text/javascript">

$(function () {

var state = false;

$('#txtEmail').focus(function () {

if (state == false) {

$(this).val('');

}

})

$('#txtEmail').blur(function () {

if ($(this).val() == '') {

$('#spinfo').text('邮箱不能为空');

$(this).focus();

}

else {

if (/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test($(this).val()) == false) {

$('#spinfo').text('邮箱格式不正确，请重新输入');

$(this).focus();

}

else {

//$('#spinfo').text('邮箱格式正确，继续输入');

$('#spinfo').text('');

$('#spinfo').append('<img src=images/onSuccess.gif/>');

state = true;

}

}

})

})

</script>

</head>

<body>

邮箱<input id="txtEmail" type="text" value="输入邮箱" class="txtbackcolor" /><span id="spinfo"></span><br />电话<input id="txtPhone" type="text" />

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航