Jquery学习之路（一）简单的表单验证

87413460

2015-08-14

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
 
<title>Jquery制作表单验证</title>
 
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="<%=basePath%>jQuery/js/jquery-2.1.4.min.js"></script>
<style>
.state1 {
color: #aaa;
}
 
.state2 {
color: #000;
}
 
.state3 {
color: red;
}
 
.state4 {
color: green;
}
</style>
</head>
 
<body>
<form action='#' method='post'>
用 户 名:<input type="text" name="username" id="username"> <span
class='state1'>请输入用户名</span><br /> <br /> 密 码:<input
type="password" name="password" id="password"> <span
class='state1'>请输入密码</span><br /> <br /> 确认密码:<input
type="password" name="repass" id="repass"> <span
class='state1'>请输入确认密码</span><br /> <br /> 邮 箱:<input type="text"
name="email" id="email"> <span class='state1'>请输入邮箱</span><br />
<br /> <input type="submit"  id="submit">
</form>
<script type="text/javascript">
$(function() {
 
var ok1 = false;
var ok2 = false;
var ok3 = false;
var ok4 = false;
// 验证用户名
$('#username').focus(
function() {
$(this).next().text('用户名应该为3-20位之间').removeClass(
'state1').addClass('state2');
}).blur(
function() {
if ($(this).val().length >= 3
&& $(this).val().length < 12
&& $(this).val() != '') {
$(this).next().text('输出正确').removeClass('state1')
.addClass('state4');
ok1 = true;
} else {
$(this).next().text('用户名应该为3-20位之间').removeClass(
'state1').addClass('state3');
}
});
//验证密码
$('#password').focus(
function() {
$(this).next().text('密码应该为6-20位之间').removeClass(
'state1').addClass('state2');
}).blur(
function() {
if ($(this).val().length > 6
&& $(this).val().length < 20
&& $(this).val() != '') {
$(this).next().text('输入成功').removeClass('state1')
.addClass('state4');
ok2=true;
}else{
$(this).next().text('密码应该为6-20位之间').removeClass(
'state1').addClass('state3');
}
});
 
 
//验证确认密码
$('#repass').focus(
function() {
$(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同')
.removeClass('state1').addClass('state2');
}).blur(
function() {
if ($(this).val().length >= 6
&& $(this).val().length <= 20
&& $(this).val() != ''
&& $(this).val() == $('#password')
.val()) {
$(this).next().text('输入成功').removeClass('state1')
.addClass('state4');
ok3 = true;
} else {
$(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同')
.removeClass('state1').addClass('state3');
}
 
});
 
//验证邮箱
$('#email')
.focus(
function() {
$(this).next().text('请输入正确的EMAIL格式')
.removeClass('state1').addClass(
'state2');
})
.blur(
function() {
if ($(this)
.val()
.search(
/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/) == -1) {
$(this).next().text('请输入正确的EMAIL格式')
.removeClass('state1').addClass(
'state3');
} else {
$(this).next().text('输入成功').removeClass(
'state1').addClass('state4');
ok4 = true;
}
});
//提交按钮,所有验证通过方可提交
$('#submit').click(function() {
if (ok1 && ok2 && ok3 && ok4) {
$('form').submit();
} else {
return false;
}
});
 
});
</script>
</body>
</html>

表单验证 jquery