这次给大家带来jquery的表单验证提交，jquery表单验证提交的注意事项有哪些，下面就是实战案例，一起来看一下。
说明：
1. 代码中的js脚本文件路径需替换为自己的目录文件
2. 代码中加入了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操作table中tr的位置
jquery ajax异步跨域怎么实现
jquery的插件怎么打印页面内容
以上就是jquery的表单验证提交的详细内容。