說明：
1. 代碼中的js腳本文件路徑需替換為自己的目錄文件
2. 代碼中加入了ajax驗(yàn)證賬號是否存在
<%@ 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>表單驗(yàn)證</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">//賬號是否驗(yàn)證過var accountIsChecked = false;var accountIsOK = false;var passwdIsOK = false;var confirmpwdIsOK = false;var phoneIsOK = false;$(function() {// 驗(yàn)證賬號$("#account").focus(function() {focus_checkaccount();}).keyup(function() {$("#accountmsg").text("支持中文、字母、數(shù)字組合").removeClass().addClass("info");accountIsChecked = false;}).blur(function() {blur_checkaccount();})// 驗(yàn)證密碼$("#pwd").focus(function() {$("#pwdmsg").text("建議使用數(shù)字和字母的組合").removeClass().addClass("info");}).blur(function() {blur_checkpwd();blur_confirmpwd();});// 驗(yàn)證二次密碼$("#confirmpwd").focus(function() {$("#confirmmsg").text("請再次確認(rèn)密碼").removeClass().addClass("info");}).blur(function() {blur_confirmpwd();});// 驗(yàn)證手機(jī)號碼$("#phone").focus(function() {$("#phonemsg").text("建議輸入常用手機(jī)").removeClass().addClass("info");}).blur(function() {blur_checkphone();})});function focus_checkaccount() {if (!accountIsChecked) {$("#accountmsg").text("支持中文、字母、數(shù)字組合").removeClass().addClass("info");}}function blur_checkaccount() {var account = $("#account").val();if (account != "") {// 判斷account是否驗(yàn)證過if (!accountIsChecked) {// 未驗(yàn)證過，則進(jìn)行驗(yàn)證ajax_checkaccount(account);}} else {$("#accountmsg").text("");accountIsOK = false;}}// ajax請求驗(yàn)證accountfunction 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("手機(jī)格式有誤").removeClass().addClass("errormsg");phoneIsOK = false;} else {$("#phonemsg").text("√").removeClass().addClass("ok");phoneIsOK = true;}} else {$("#phonemsg").text("");phoneIsOK = false;}}// 表單驗(yàn)證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("請輸入手機(jī)").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>設(shè)置密碼：</td><td><input type="password" id="pwd" name="pwd"placeholder="設(shè)置您的密碼" maxlength="20"></td><td><font id="pwdmsg"></font></td></tr><tr height="30px"><td>確認(rèn)密碼：</td><td><input type="password" id="confirmpwd" name="confirmpwd"placeholder="確認(rèn)您的密碼" maxlength="20"></td><td><font id="confirmmsg"></font></td></tr><tr height="30px"><td>手 機(jī)：</td><td><input type="text" id="phone" name="phone"placeholder="您的手機(jī)號碼"></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實(shí)現(xiàn)簡單表單驗(yàn)證,初學(xué)者必看就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
