快捷導(dǎo)航

(模仿京東用戶注冊(cè))用JQuery實(shí)現(xiàn)簡(jiǎn)單表單驗(yàn)證,初學(xué)者必看

更新時(shí)間：2018年01月08日 14:39:42 作者：NaMgAl_

下面小編就為初學(xué)者們分享一篇(模仿京東用戶注冊(cè))用JQuery實(shí)現(xiàn)簡(jiǎn)單表單驗(yàn)證，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

說(shuō)明：

1. 代碼中的js腳本文件路徑需替換為自己的目錄文件

2. 代碼中加入了ajax驗(yàn)證賬號(hào)是否存在

<%@ 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">
//賬號(hào)是否驗(yàn)證過(guò)
var accountIsChecked = false;

var accountIsOK = false;
var passwdIsOK = false;
var confirmpwdIsOK = false;
var phoneIsOK = false;

$(function() {

// 驗(yàn)證賬號(hào)
$("#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("請(qǐng)?jiān)俅未_認(rèn)密碼").removeClass().addClass("info");
}).blur(function() {
blur_confirmpwd();
});

// 驗(yàn)證手機(jī)號(hào)碼
$("#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)證過(guò)
if (!accountIsChecked) {
// 未驗(yàn)證過(guò)，則進(jìn)行驗(yàn)證
ajax_checkaccount(account);
}
} else {
$("#accountmsg").text("");
accountIsOK = false;
}
}

// ajax請(qǐng)求驗(yàn)證account
function ajax_checkaccount(account) {
$.get("/airticleMgr/member", {
m : "checkAccount",
account : account
}, function(data) {
if ("true" == data) {
$("#accountmsg").text("該賬號(hào)已被注冊(cè)").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("長(zhǎng)度在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("請(qǐng)輸入賬號(hào)").removeClass().addClass(
"errormsg");
} else {
}
return false;
}

if (!passwdIsOK) {
if ($("#pwd").val() == "") {
$("#pwdmsg").text("請(qǐng)輸入密碼").removeClass().addClass("errormsg");
} else {
}
return false;
}

if (!confirmpwdIsOK) {
if ($("#confirmpwd").val() == "") {
$("#confirmmsg").text("請(qǐng)?jiān)俅屋斎朊艽a").removeClass().addClass(
"errormsg");
} else {
}
return false;
}

if (!phoneIsOK) {
if ($("#phone").val() == "") {
$("#phonemsg").text("請(qǐng)輸入手機(jī)").removeClass().addClass("errormsg");
} else {
}
return false;
}

if (accountIsOK && passwdIsOK && confirmpwdIsOK && phoneIsOK) {
alert("歡迎注冊(cè)");
return true;
} else {
alert("請(qǐng)檢查信息");
return false;
}
}
</script>

</head>
<body>
<h2>會(huì)員注冊(cè)</h2>
<form action="/airticleMgr/member?m=regist" method="post"
onsubmit="return check_form()">
<table>
<tr height="30px">
<td>帳&nbsp;&nbsp;&nbsp;號(hào)：</td>
<td><input type="text" id="account" name="account"
placeholder="您的登錄賬號(hào)"></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>手&nbsp;&nbsp;&nbsp;機(jī)：</td>
<td><input type="text" id="phone" name="phone"
placeholder="您的手機(jī)號(hào)碼"></td>
<td><font id="phonemsg"></font></td>
</tr>
<tr height="7px"></tr>
<tr>
<td colspan="2" align="center"><input type="submit"
value="立即注冊(cè)"
style="height: 30px; width: 100%; background-color: #FF3030; color: white; border: 0">
</td>
<td></td>
</tr>
</table>
</form>
</body>
</html>

以上這篇(模仿京東用戶注冊(cè))用JQuery實(shí)現(xiàn)簡(jiǎn)單表單驗(yàn)證,初學(xué)者必看就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: