jQuery注册表单验证代码实例
分类：实例代码
本章节分享一段代码实例，它实现了简单的表单验证小姑。
在文本框或者密码框的尾部会有提示文本的出现。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body {
position: absolute;
top: 25%;
left: 33%;
}
table {
color: #666;
}
table tr {
height: 50px;
}
.state1 {
color: #aaa;
}
.state2 {
color: #00b0ff;
}
.state3 {
color: #EB4F38;
}
.state4 {
color: #00B694;
}
input[type="submit"] {
width: 80px;
height: 30px;
font-weight: bold;
border-radius: 15px;
background-color: #3CbAB7;
color: #fff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
var username = false;
var password = false;
var repassword = false;
var email = false;
//username
$('input[name="username"]').focus(function () {
$(this).parent()
.siblings()
.find('span')
.text('用户名应该在6-20位之间!')
.removeClass('state1 state4 state3').addClass('state2');
}).blur(function () {
var len = $(this).val().length;
if (len >= 6 && len <= 20 && $(this).val() != '') {
$(this).parent()
.siblings()
.find('span')
.text('用户名输入正确!')
.removeClass('state1 state4 state3').addClass('state4');
username = true;
} else {
$(this).parent()
.siblings()
.find('span')
.text('用户名输入错误,应在6-20位之间!')
.removeClass('state1 state2 state4')
.addClass('state3');
}
})
//password
$('input[name="password"]').focus(function () {
$(this).parent()
.siblings()
.find('span')
.text('密码6-20位字符,字母开头,只包含字母数字下划线!')
.removeClass()
.addClass('state2');
}).blur(function () {
var reg = /^[a-z | A-Z]\w{5,19}$/;
if (reg.test($(this).val())) {
$(this).parent()
.siblings()
.find('span')
.text('密码输入正确!')
.removeClass()
.addClass('state4');
password = true;
}
else {
$(this).parent()
.siblings()
.find('span')
.text('密码输入错误,请重新输入!')
.removeClass()
.addClass('state3');
}
})
//repassword
$('input[name="repassword"]').focus(function () {
$(this).parent()
.siblings()
.find('span')
.text('请输入确认密码!')
.removeClass()
.addClass('state2');
}).blur(function () {
var reg = /^[a-z | A-Z]\w{5,19}$/;
if (reg.test($(this).val()) && $(this).val() == $('input[name="password"]').val()) {
$(this).parent()
.siblings()
.find('span')
.text('确认密码输入正确!')
.removeClass()
.addClass('state4');
repassword = true;
} else {
$(this).parent()
.siblings()
.find('span')
.text('两次输入不一致!')
.removeClass()
.addClass('state3');
}
})
//email
$('input[name="email"]').focus(function () {
$(this).parent()
.siblings()
.find('span')
.text('请输入正确的EMAIL格式!')
.removeClass()
.addClass('state2');
}).blur(function () {
var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
if (reg.test($(this).val())) {
$(this).parent()
.siblings()
.find('span')
.text('邮箱输入正确!')
.removeClass()
.addClass('state4');
email = true;
} else {
$(this).parent()
.siblings()
.find('span')
.text('邮箱输入错误，请输入重新输入!')
.removeClass()
.addClass('state3');
}
})
//提交
$('input[type="submit"]').click(function () {
if (username && password && repassword && email) {
$('form').submit();
} else {
return alert('您未填写齐全，或填写格式错误!');
}
});
})
</script>
</head>
<body>
<form>
<table>
<tr>
<td>用 户 名：</td>
<td><input type="text" name="username" /></td>
<td><span class="state1">请输入用户名</span></td>
</tr>
<tr>
<td>密 码：</td>
<td><input type="password" name="password" /></td>
<td><span class="state1">请输入密码</span></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="repassword" /></td>
<td><span class="state1">请输入确认密码</span></td>
</tr>
<tr>
<td>邮 箱：</td>
<td><input type="email" name="email" /></td>
<td><span class="state1">请输入邮箱</span></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="提 交" /></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
jQuery注册表单验证代码实例，这样的场景在实际项目中还是用的比较多的，关于jQuery注册表单验证代码实例就介绍到这了。
jQuery注册表单验证代码实例属于前端实例代码，有关更多实例代码大家可以查看。