JavaWeb表單及時(shí)驗(yàn)證功能在輸入后立即驗(yàn)證(含用戶類型,性別,愛好...的驗(yàn)證)
更新時(shí)間：2017年06月09日 11:20:35 作者：水山奇
最近做項(xiàng)目遇到表單在輸入后立即驗(yàn)證，而不是提交后再驗(yàn)證，在網(wǎng)上找了下資料，沒有合適的，于是我自己動(dòng)手寫了一個(gè)，分享到腳本之家平臺(tái)，供大家參考
問題：表單怎么在輸入后立即驗(yàn)證，而不是提交后再驗(yàn)證那么不方便（網(wǎng)上搜到的要么是模棱兩可，要么是殘缺不全…）
方法：鑒于此，加上我個(gè)人的理解（注釋）在上面。
截圖：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用戶注冊(cè)</title>
<!-- 此處引用外部css樣式 -->
<link rel="stylesheet" href="css/style.css" rel="external nofollow" />
<script type="text/javascript">
//及時(shí)驗(yàn)證用戶名
function checkuse(){
//在每個(gè)函數(shù)中定義check變量是為了在表單提交后，能夠逐個(gè)驗(yàn)證每個(gè)函數(shù)是否通過，很好很好。（以下同理）
var check;
var username = document.getElementById("username").value;
if (username.length > 18 || username.length < 6) {
alert("用戶名輸入不合法，請(qǐng)重新輸入！");
//此處甚妙，既然你在此處輸入錯(cuò)誤，那么按理說當(dāng)然要在此處繼續(xù)輸入了。（在此處繼續(xù)獲取焦點(diǎn)！）
document.getElementById("username").focus();
check = false;
} else {
document.getElementById("checktext1").innerHTML = "* 用戶名由6-18位字符組成 √";
check = true;
}
return check;
}
//利用正則表達(dá)式判斷密碼符合否
function checkpwd() {
var check;
var reg = /[^A-Za-z0-9_]+/;
var regs = /^[a-zA-Z0-9_\u4e00-\u9fa5] + $ /;
var password = document.getElementById("password").value;
if (password.length < 6 || password.length > 18 || regs.test(password)) {
alert("密碼輸入不合法，請(qǐng)重新輸入！");
document.getElementById("password").focus();
check = false;
} else {
document.getElementById("checktext2").innerHTML = "* 密碼由6-18位字符組成，且必須包含字母、數(shù)字和標(biāo)點(diǎn)符號(hào) √";
check = true;
}
return check;
}
//驗(yàn)證密碼是否不一致！
function checkpwdc() {
var check;
var password = document.getElementById("password").value;
var pwdc = document.getElementById("pwdc").value;
if (password != pwdc) {
alert("兩次輸入密碼不一致，請(qǐng)重新輸入！");
document.getElementById("pwdc").focus();
check = false;
} else {
document.getElementById("checktext3").innerHTML = "* 請(qǐng)?jiān)俅屋斎肽愕拿艽a √";
check = true;
}
return check;
}
//提交時(shí)驗(yàn)證用戶類別
function checkut(){
var check;
if(document.getElementById("selUser").selectedIndex == 0)
{
alert("請(qǐng)選擇用戶類型！");
document.getElementById("selUser").focus();
check = false;
}else{
document.getElementById("checktext4").innerHTML = "* 請(qǐng)選擇用戶類型 √";
check = true;
}
return check;
}
//提交時(shí)驗(yàn)證用戶性別
function checkGender(){
var check;
var gender = "";
//獲取所有名稱為sex的標(biāo)簽
var sex = document.getElementsByName("sex");
//遍歷這些名稱為sex的標(biāo)簽
for(var i=0;i<sex.length;++i){
//如果某個(gè)sex被選中，則記錄
if(sex[i].checked)
gender = sex[i].value;
}
if(gender == "")
{
alert("請(qǐng)選擇性別！");
check = false;
}else{
document.getElementById("checktext5").innerHTML = "* 請(qǐng)選擇你的性別 √";
check = true;
}
return check;
}
//及時(shí)驗(yàn)證出生日期
function checkDate(){
var check;
if(document.getElementById("txtDate").value ==""){
alert("請(qǐng)?zhí)顚懗錾掌冢?);
document.getElementById("txtDate").focus();
check = false;
}else{
document.getElementById("checktext6").innerHTML = "* 請(qǐng)選擇你的出生日期 √";
check = true;
}
return check;
}
//及時(shí)驗(yàn)證興趣愛好
function checkHobby(){
var check;
var hobby = 0;
//objNum為所有名稱為hobby的input標(biāo)簽
var objNum = document.getElementsByName("hobby");
//遍歷所有hobby標(biāo)簽
for(var i=0;i<objNum.length;++i){
//判斷某個(gè)hobby標(biāo)簽是否被選中
if(objNum[i].checked==true)
hobby++;
}
//如果有選中的hobby標(biāo)簽
if(hobby >=1){
document.getElementById("checktext7").innerHTML = "* 請(qǐng)選擇你的興趣愛好 √";
check = true;
}else{
alert("請(qǐng)?zhí)顚憪酆茫?);
check = false;
}
return check;
}
//正則表達(dá)式驗(yàn)證電子郵件（及時(shí)）
function checkemail(){
var check;
//電子郵件的正則表達(dá)式
var e1 = document.getElementById("email").value.indexOf("@",0);
var e2 = document.getElementById("email").value.indexOf(".",0);
if(email == "" || (e1==-1 || e2==-1) || e2<e1 )
{
alert("E_mail輸入錯(cuò)誤!");
document.getElementById("email").focus();
check = false;
} else {
document.getElementById("checktext8").innerHTML = "* 請(qǐng)?zhí)顚懗Ｓ玫腅MAIL，將用于密碼找回 √";
check = true;
}
return check;
}
//及時(shí)驗(yàn)證自我介紹
function checkintro(){
var check;
var intro = document.getElementById("introduction").value;
if (intro.length > 100) {
alert("字?jǐn)?shù)超限！");
check = false;
} else {
document.getElementById("checktext9").innerHTML = "* 限100字內(nèi) √";
document.getElementById("checktext9").focus();
check = true;
}
return check;
}
//提交表單時(shí)所有都驗(yàn)證一遍(若任何一個(gè)驗(yàn)證不通過，則返回為false，阻止表單提交)
function check() {
var check = checkuse() && checkpwd() && checkpwdc() && checkut() && checkGender() && checkDate() && checkHobby()
&& checkemail() &&checkintro();
return check;
}
</script>
</head>
<body >
<!-- <form action ="跳轉(zhuǎn)頁面" method ="get"|"post" name ="表單名稱" target ="打開方式" enctype="multipart/form-data" > -->
<!-- onsubmit()函數(shù)在返回值為true時(shí)提交表單。 -->
<form action="#" method="get" onsubmit="return check()" >
<fieldset>
<legend>
表單及時(shí)驗(yàn)證小例子
</legend>
<table align="left" style="background-image: url('img/4.jpg');" >
<tr>
<td>用戶名:</td>
<td><input type="text" name="username" id="username" onchange=" checkuse()" /></td>
<td id="checktext1">* 用戶名由6-18位字符組成</td>
</tr>
<!-- onblur 事件處理程序:當(dāng)元素或窗口失去焦點(diǎn)時(shí)觸發(fā)該事件 -->
<!-- onchange事件處理程序:當(dāng)表單元素獲取焦點(diǎn)，并且內(nèi)容發(fā)生改變時(shí)，觸發(fā)該事件 -->
<!-- 以下同理 -->
<tr>
<td>密碼:</td>
<td><input type="password" name="password" id="password" onchange="checkpwd()" /></td>
<td id="checktext2">* 密碼由6-18位字符組成，且必須包含字母、數(shù)字和標(biāo)點(diǎn)符號(hào)</td>
</tr>
<tr>
<td>確認(rèn)密碼：</td>
<td><input type="password" name="pwdc" id="pwdc" onchange="checkpwdc()" /></td>
<td id="checktext3">* 請(qǐng)?jiān)俅屋斎肽愕拿艽a</td>
</tr>
<tr>
<td>用戶類型：</td>
<td>
<select id="selUser" onblur="checkut()">
<option name="selUser" value="0">請(qǐng)選擇</option>
<option name="selUser" value="1">管理員</option>
<option name="selUser" value="2">普通用戶</option>
</select>
</td>
<td id="checktext4">* 請(qǐng)選擇用戶類型</td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" value="1" name="sex" onchange="checkGender()"/>男
<input type="radio" value="2" name="sex" onchange="checkGender()"/>女
</td>
<td id="checktext5">* 請(qǐng)選擇你的性別</td>
</tr>
<tr>
<td>出生日期：</td>
<td><input type="date" name="date" id="txtDate" onblur="checkDate()"/></td>
<td id="checktext6">* 請(qǐng)選擇你的出生日期</td>
</tr>
<tr>
<td>興趣愛好：</td>
<td>
<input type="checkbox" name="hobby" value="reading" onchange="checkHobby()">閱讀
<input type="checkbox" name="hobby" value="music" onchange="checkHobby()">音樂
<input type="checkbox" name="hobby" value="sports" onchange="checkHobby()">運(yùn)動(dòng)
</td>
<td id="checktext7">* 請(qǐng)選擇你的興趣愛好</td>
</tr>
<tr>
<td>電子郵件：</td>
<td><input type="text" name="email" id="email" onchange="checkemail()"/></td>
<td id="checktext8">* 請(qǐng)?zhí)顚懗Ｓ玫腅MAIL，將用于密碼找回</td>
</tr>
<tr>
<td>自我介紹：</td>
<td><textarea cols="30" rows="3" name="introduction" id="introduction" onchange="checkintro()">這是自我介紹...</textarea></td>
<td id="checktext9">* 限100字內(nèi)</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" name="submit" value="提交" />
<input type="reset" name="reset" value="重置" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
CSS樣式：
input:focus,textarea:focus{
border:1px solid #f00;
background:#fcc;
}
textarea{
width:230px;
height:50px;
}
body
{
font-size:15px;
/* 字體的樣式 */
font-family:Microsoft YaHei;
}
select option{
font-size:10px;
font-family:Microsoft YaHei;
}
以上所述是小編給大家介紹的JavaWeb表單及時(shí)驗(yàn)證功能在輸入后立即驗(yàn)證(含用戶類型,性別,愛好...的驗(yàn)證)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- Javaweb中Request獲取表單數(shù)據(jù)的四種方法詳解
- JavaWeb實(shí)現(xiàn)表單提交的示例詳解
- 解決Javaweb 提交表單到servlet時(shí)出現(xiàn)空白頁面,但網(wǎng)站不報(bào)錯(cuò)問題
- Javaweb接收表單數(shù)據(jù)并處理中文亂碼
- Java后臺(tái)防止客戶端重復(fù)請(qǐng)求、提交表單實(shí)現(xiàn)原理
- JavaWeb表單注冊(cè)界面的實(shí)現(xiàn)方法
- Javaweb獲取表單數(shù)據(jù)的多種方式
- Java后臺(tái)開發(fā)之表單提交之前驗(yàn)證
- java后臺(tái)防止表單重復(fù)提交方法詳解
相關(guān)文章
基于iScroll實(shí)現(xiàn)下拉刷新和上滑加載效果
這篇文章主要為大家詳細(xì)介紹了基于iScroll實(shí)現(xiàn)下拉刷新和上滑加載效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了ES6新特性之?dāng)?shù)組的擴(kuò)充,結(jié)合實(shí)例形式分析了ES6數(shù)組操作的常見方法與相關(guān)使用技巧,需要的朋友可以參考下2017-04-04
微信公眾平臺(tái)開發(fā)教程（六）獲取個(gè)性二維碼的實(shí)例
二維碼的用處有很多，本篇文章主要介紹了微信公眾平臺(tái)開發(fā)教程（六）獲取個(gè)性二維碼的實(shí)例，有興趣的可以了解一下。2016-12-12
JavaScript設(shè)計(jì)模式適配器模式實(shí)例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式適配器模式實(shí)例，適配器設(shè)計(jì)模式可以讓彼此不兼容的功能在一塊工作，有助于避免大規(guī)模的修改代碼，并且易于擴(kuò)展和兼容2022-06-06
淺談JavaScript中的對(duì)象及Promise對(duì)象的實(shí)現(xiàn)
這篇文章主要介紹了淺談JavaScript中的對(duì)象及Promise對(duì)象的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2015-11-11
這篇文章主要為大家介紹了Javascript模板引擎mustache.js，mustache.js是一個(gè)簡(jiǎn)單強(qiáng)大的Javascript模板引擎，使用它可以簡(jiǎn)化在js代碼中的html編寫，壓縮后只有9KB，非常值得在項(xiàng)目中使用,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)蒙版彈窗效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了bootstrap table小案例，教大家如何使用表格組件bootstrap table2016-10-10
js實(shí)現(xiàn)統(tǒng)計(jì)字符串中特定字符出現(xiàn)個(gè)數(shù)的方法
這篇文章主要介紹了js實(shí)現(xiàn)統(tǒng)計(jì)字符串中特定字符出現(xiàn)個(gè)數(shù)的方法,涉及javascript針對(duì)字符串中字符運(yùn)算操作相關(guān)技巧,需要的朋友可以參考下2016-08-08
hover 和 :focus 這樣的偽類，我們可以很方便的將元素從一個(gè)樣式切換到另一個(gè)樣式，而且切換是會(huì)有過渡效果。但有時(shí)我們想要使用 js 來驅(qū)動(dòng)過渡（即在代碼中觸發(fā)過渡）也是可以實(shí)現(xiàn)的，下面通過本文給大家介紹下2017-01-01