今天给大家带来jquery表单验证提交,首先说明下代码中的js脚本文件路径需替换为自己的目录文件,并且代码中加入了ajax验证账号是否存在,上代码:
<%@ page language=
"java"
contentType=
"text/html; charset=UTF-8"
pageEncoding=
"UTF-8"
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=UTF-8"
>
<title>表单验证</title>
<style type=
"text/css"
>
font {
font-size: 10px;
}
.info {
color: #AAAAAA;
}
.errormsg {
color: #FF3030;
}
.errorinput {
border-color: #FF3030;
border-width: 1px;
}
.ok {
color: #32CD32;
}
</style>
<script type=
"text/javascript"
src=
"/airticleMgr/js/jquery-1.8.3.min.js"
></script>
<script type=
"text/javascript"
>
//账号是否验证过
var
accountIsChecked = false;
var
accountIsOK = false;
var
passwdIsOK = false;
var
confirmpwdIsOK = false;
var
phoneIsOK = false;
$(
function
() {
// 验证账号
$(
"#account"
).focus(
function
() {
focus_checkaccount();
}).keyup(
function
() {
$(
"#accountmsg"
).text(
"支持中文、字母、数字组合"
).removeClass()
.addClass(
"info"
);
accountIsChecked = false;
}).blur(
function
() {
blur_checkaccount();
})
// 验证密码
$(
"#pwd"
).focus(
function
() {
$(
"#pwdmsg"
).text(
"建议使用数字和字母的组合"
).removeClass().addClass(
"info"
);
}).blur(
function
() {
blur_checkpwd();
blur_confirmpwd();
});
// 验证二次密码
$(
"#confirmpwd"
).focus(
function
() {
$(
"#confirmmsg"
).text(
"请再次确认密码"
).removeClass().addClass(
"info"
);
}).blur(
function
() {
blur_confirmpwd();
});
// 验证手机号码
$(
"#phone"
).focus(
function
() {
$(
"#phonemsg"
).text(
"建议输入常用手机"
).removeClass().addClass(
"info"
);
}).blur(
function
() {
blur_checkphone();
})
});
function
focus_checkaccount() {
if
(!accountIsChecked) {
$(
"#accountmsg"
).text(
"支持中文、字母、数字组合"
).removeClass()
.addClass(
"info"
);
}
}
function
blur_checkaccount() {
var
account = $(
"#account"
).val();
if
(account !=
""
) {
// 判断account是否验证过
if
(!accountIsChecked) {
// 未验证过,则进行验证
ajax_checkaccount(account);
}
}
else
{
$(
"#accountmsg"
).text(
""
);
accountIsOK = false;
}
}
// ajax请求验证account
function
ajax_checkaccount(account) {
$.get(
"/airticleMgr/member"
, {
m :
"checkAccount"
,
account : account
},
function
(data) {
if
(
"true"
== data) {
$(
"#accountmsg"
).text(
"该账号已被注册"
).removeClass().addClass(
"errormsg"
);
accountIsOK = false;
}
else
{
$(
"#accountmsg"
).text(
"√"
).removeClass().addClass(
"ok"
);
accountIsOK = true;
}
});
accountIsChecked = true;
}
function
blur_checkpwd() {
var
lpwd = $(
"#pwd"
).val().length;
if
(lpwd > 0) {
if
(lpwd < 6) {
$(
"#pwdmsg"
).text(
"长度在6-20位之间"
).removeClass().addClass(
"errormsg"
);
passwdIsOK = false;
}
else
{
$(
"#pwdmsg"
).text(
"√"
).removeClass().addClass(
"ok"
);
passwdIsOK = true;
}
}
else
{
$(
"#pwdmsg"
).text(
""
);
passwdIsOK = false;
}
}
function
blur_confirmpwd() {
var
pwd = $(
"#pwd"
).val();
var
confirmpwd = $(
"#confirmpwd"
).val();
if
(confirmpwd !=
""
) {
if
(confirmpwd == pwd) {
$(
"#confirmmsg"
).text(
"√"
).removeClass().addClass(
"ok"
);
confirmpwdIsOK = true;
}
else
{
$(
"#confirmmsg"
).text(
"两次密码输入不一致"
).removeClass().addClass(
"errormsg"
);
confirmpwdIsOK = false;
}
}
else
{
$(
"#confirmmsg"
).text(
""
);
confirmpwdIsOK = false;
}
}
function
blur_checkphone() {
var
phone = $(
"#phone"
).val();
var
regix = /^1[34578][0-9]{9}$/;
if
(phone !=
""
) {
if
(!regix.test(phone)) {
$(
"#phonemsg"
).text(
"手机格式有误"
).removeClass()
.addClass(
"errormsg"
);
phoneIsOK = false;
}
else
{
$(
"#phonemsg"
).text(
"√"
).removeClass().addClass(
"ok"
);
phoneIsOK = true;
}
}
else
{
$(
"#phonemsg"
).text(
""
);
phoneIsOK = false;
}
}
// 表单验证
function
check_form() {
if
(!accountIsOK) {
if
($(
"#account"
).val() ==
""
) {
$(
"#accountmsg"
).text(
"请输入账号"
).removeClass().addClass(
"errormsg"
);
}
else
{
}
return
false;
}
if
(!passwdIsOK) {
if
($(
"#pwd"
).val() ==
""
) {
$(
"#pwdmsg"
).text(
"请输入密码"
).removeClass().addClass(
"errormsg"
);
}
else
{
}
return
false;
}
if
(!confirmpwdIsOK) {
if
($(
"#confirmpwd"
).val() ==
""
) {
$(
"#confirmmsg"
).text(
"请再次输入密码"
).removeClass().addClass(
"errormsg"
);
}
else
{
}
return
false;
}
if
(!phoneIsOK) {
if
($(
"#phone"
).val() ==
""
) {
$(
"#phonemsg"
).text(
"请输入手机"
).removeClass().addClass(
"errormsg"
);
}
else
{
}
return
false;
}
if
(accountIsOK && passwdIsOK && confirmpwdIsOK && phoneIsOK) {
alert(
"欢迎注册"
);
return
true;
}
else
{
alert(
"请检查信息"
);
return
false;
}
}
</script>
</head>
<body>
<h2>会员注册</h2>
<form action=
"/airticleMgr/member?m=regist"
method=
"post"
onsubmit=
"return check_form()"
>
<table>
<tr height=
"30px"
>
<td>帐 号:</td>
<td><input type=
"text"
id=
"account"
name=
"account"
placeholder=
"您的登录账号"
></td>
<td><font id=
"accountmsg"
></font></td>
</tr>
<tr height=
"30px"
>
<td>设置密码:</td>
<td><input type=
"password"
id=
"pwd"
name=
"pwd"
placeholder=
"设置您的密码"
maxlength=
"20"
></td>
<td><font id=
"pwdmsg"
></font></td>
</tr>
<tr height=
"30px"
>
<td>确认密码:</td>
<td><input type=
"password"
id=
"confirmpwd"
name=
"confirmpwd"
placeholder=
"确认您的密码"
maxlength=
"20"
></td>
<td><font id=
"confirmmsg"
></font></td>
</tr>
<tr height=
"30px"
>
<td>手 机:</td>
<td><input type=
"text"
id=
"phone"
name=
"phone"
placeholder=
"您的手机号码"
></td>
<td><font id=
"phonemsg"
></font></td>
</tr>
<tr height=
"7px"
></tr>
<tr>
<td colspan=
"2"
align=
"center"
><input type=
"submit"
value=
"立即注册"
style=
"height: 30px; width: 100%; background-color: #FF3030; color: white; border: 0"
>
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
好啦,以上便是jquery表单验证提交的全部代码,更多内容干货可关注慕课网~