用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>上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在SpringMVC中post如何获取多选框value的值（代码实例）
jQuery+SpringMVC中的复选框选择与传值实例_jquery
以上是用JQuery如何实现表单验证，具体应该怎么做？的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何用小红书号查找用户？能查到手机号吗？
Mar 22, 2024 am 08:40 AM
随着社交媒体的迅速发展，小红书已经成为了备受青睐的社交平台之一。用户可以通过创建小红书号来展示个人身份，并与其他用户交流互动。如果你需要查找某个用户的小红书号码，可以按照以下简单步骤进行操作。一、如何用小红书号查找用户？1.打开小红书APP，点击右下角的“发现”按钮，然后选择“笔记”选项。2.在笔记列表中，找到你想查找的用户发布的那篇笔记。点击进入笔记详情页。3.在笔记详情页中，点击用户头像下方的“关注”按钮，即可进入该用户的个人主页。4.在用户个人主页右上角，点击三个点按钮，然后选择“个人信息
小红书怎么注册多个账号？注册多个账号会被发现吗？
Mar 25, 2024 am 09:41 AM
小红书作为一款集社交和电商于一身的平台，吸引了越来越多的用户加入。有些用户希望能够注册多个账号以便更好地体验和小红书互动。那么，小红书怎么注册多个账号呢？一、小红书怎么注册多个账号？1.使用不同手机号码注册目前，小红书主要采用手机号码注册账号的方式。用户有时会尝试购买多个手机号码卡，并利用它们注册多个小红书账号。但这种做法有一些限制，因为购买多个手机号码卡比较麻烦且成本较高。2.使用邮箱注册除了手机号码，邮箱也可以用来注册小红书账号。用户可以准备多个邮箱地址，然后分别用这些邮箱地址注册账号。不过
怎么注册小红书账号？注册小红书账号需要什么？
Mar 22, 2024 am 10:16 AM
小红书，一个集生活、娱乐、购物、分享于一体的社交平台，已经成为众多年轻人日常生活中不可或缺的一部分。那么，如何注册小红书账号呢？一、怎么注册小红书账号？1.打开小红书官网或下载小红书APP。点击下方的“注册”按钮，您可以选择不同的注册方式。目前，小红书支持手机号、邮箱以及第三方账号（如微信、QQ、微博等）进行注册。3.填写相关信息。根据选择的注册方式，填写相应的手机号、邮箱或第三方账号信息。4.设置密码。设置一个强壮的密码，确保账号安全。5.完成验证。根据提示完成手机验证或邮箱验证。6.完善个人
小红书账号怎么注册？它的账号异常怎么恢复？
Mar 21, 2024 pm 04:57 PM
小红书作为全球最受欢迎的生活方式分享平台之一，吸引了大量用户关注。那么，如何注册小红书账号呢？本文将为您详细介绍小红书账号的注册流程，并解答小红书账号异常如何恢复的问题。一、小红书账号怎么注册？1.下载小红书APP：在手机应用商店搜索并下载小红书APP，安装完成后打开。2.注册账号：打开小红书APP后，点击首页右下角的“我”按钮，然后选择“注册”。3.填写注册信息：根据提示填写手机号码、设置密码、验证码等注册信息。4.完善个人资料：注册成功后，根据提示完善个人资料，如姓名、性别、生日等。5.设置
以超级用户身份登录Ubuntu
Mar 20, 2024 am 10:55 AM
在Ubuntu系统中，root用户通常是禁用状态的。要激活root用户，可以使用passwd命令设置密码，然后使用su-命令以root身份登录。根用户是具有系统管理权限且不受限制的用户。他拥有访问和修改文件、用户管理、软件安装和删除，以及系统配置更改等权限。根用户与普通用户有着明显的区别，根用户拥有系统中最高的权限和更广泛的控制权。根用户可以执行重要的系统命令和编辑系统文件，而普通用户则无法做到这一点。在本指南中，我将探讨Ubuntu根用户，如何以根用户身份登录，以及它与普通用户的不同之处。注意
qooapp账号怎么注册
Mar 19, 2024 pm 08:58 PM
qooapp是能够下载很多游戏的软件，那么账号怎么注册呢?用户们需要点击还没有通行证，去注册这个按键，然后选择一种注册方式就可以了。这篇账号注册方法介绍够告诉大家具体该怎么操作，下面就是具体的介绍，赶紧看看吧。qooapp账号怎么注册答：点击去注册，然后选择一种注册方式具体方法：1、首先进入登录界面后，点击下面的还没有通行证?现在申请。2、之后选择一个自己需要的登录方式。3、之后就能够直接使用了。官网注册：1、打开网站https://apps.ppaooq.com/，点击右上角注册。2、选择注册
如何看微信注册了多久？看微信注册了多久的方法
Mar 13, 2024 am 08:52 AM
微信是一款广受欢迎的社交软件，功能丰富，用户众多。想要查看微信注册了多久，虽然微信本身并未直接提供查看注册时间的功能，但我们可以通过一些间接方式来推测。但是这些方法并非绝对准确，因为各种因素都可能影响结果的精确性。若对注册时间有精确需求，建议联系微信客服咨询。如何看微信注册了多久？看微信注册了多久的方法第一种方法是通过查看QQ邮箱。如果你使用QQ登录的微信，那么注册成功后，QQ邮箱会收到微信发送的欢迎邮件。你可以在QQ邮箱中搜索“微信”查看是否有这样的邮件，进而确定注册时间。第二种方法是通过查看
一个手机号怎么注册两个B站号？B站怎么解除手机绑定呢？
Mar 21, 2024 pm 10:10 PM
B站（哔哩哔哩）作为中国年轻人非常喜欢的视频分享网站，吸引了大量的用户。有些用户希望拥有两个B站账号，以便于分开管理和使用。那么，一个手机号怎么注册两个B站号呢？本文将围绕这一问题以及如何解除手机绑定展开讲解。一、一个手机号怎么注册两个B站号？1.注册新账号：首先，在手机上打开B站App或登录官网，点击“注册”按钮，选择注册方式，可以使用手机号码、邮箱或第三方账号（如微信、QQ等）进行注册。2.注册账号时，请根据系统提示填写必要的信息，包括手机号码、验证码以及设置密码等。务必确保两个账号使用不同
