JavaScript使用表單元素驗證表單的示例代碼
更新時間：2019年08月20日 09:44:37 作者：小明1996
這篇文章主要介紹了JavaScript使用表單元素驗證表單的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
JavaScript的主要作用:驗證表單
1最簡單的表單驗證-禁止空白的必填項目
1.1最簡單的HTML結(jié)構(gòu)
網(wǎng)站最基礎的就是注冊,它是一個系統(tǒng)的交互基礎.
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡單列表的html結(jié)構(gòu)</title>
</head>
<body>
<form method="post" action="">
賬戶:<input type="text" name=""/><br/><br/>
密碼:<input type="password" name=""/><br/><br/>
確認:<input type="password" name=""/><br/><br/>
<input type="submit" value="注冊" />
</form>
</body>
</html>
1.2綁定驗證功能
因為用戶最后要去點擊"注冊"按鈕,所以我們就在"注冊"按鈕上添加一個onclick事件屬性,引用eg.regCheck()
例子:
注冊事件
<!DOCTYPE html>
<html>
<!--綁定驗證功能，注冊事件-->
<head>
<meta charset="utf-8">
<title>簡單列表的html結(jié)構(gòu)</title>
</head>
<body>
<form method="post" action="">
賬戶:<input type="text" name=""/><br/><br/>
密碼:<input type="password" name=""/><br/><br/>
確認:<input type="password" name=""/><br/><br/>
<input type="submit"
value="注冊"
onclick="return eg.regCheck();"/>
</form>
<script >
//聲明一個對象,當做命名空間來使用
var eg = {};
eg.regCheck = function(){
}
</script>
</body>
</html>
eg.regCheck()函數(shù)需要添加的行為,獲取用戶輸入的賬戶信息,給input標簽加上一個id屬性,JavaScript再通過這個指定的id去取得相應的信息,然后返回驗證結(jié)果true或false
例子:
給表單添加驗證功能
<!DOCTYPE html>
<html>
<!--給表單添加驗證功能-->
<head>
<meta charset="utf-8">
<title>簡單列表的html結(jié)構(gòu)</title>
</head>
<body>
<form method="post" action="">
賬戶:<input type="text" name="" id="userid"/><br/><br/>
密碼:<input type="password" name="" id="userpwd"/><br/><br/>
確認:<input type="password" name="" id="userpwd2"/><br/><br/>
<input type="submit"
value="注冊"
onclick="return eg.regCheck();"/>
</form>
<script >
//聲明一個對象,當做命名空間來使用
//定義一個公共函數(shù)來獲取指定id元素,減少代碼量,提高代碼復用率
var eg = {};
eg.$ = function(id){
return document.getElementById(id);
};
eg.regCheck = function(){
var uid = eg.$("userid");
var upwd = eg.$("userpwd");
var upwd2 = eg.$("userpwd2");
if(uid.value == ''){
alert('賬戶不能為空!');
//返回false就會阻止表單form提交
return false;
}
if(upwd.value == ''){
alert('密碼不能為空!');
//返回false就會阻止表單form提交
return false;
}
if(upwd.value != upwd2.value){
alert('兩次輸入密碼不相同!');
//返回false就會阻止表單form提交
return false;
}
return true;
};
</script>
</body>
</html>
1.3綁定驗證的另一種方式
把驗證放在"注冊"按鈕的onclick事件屬性里使用,還有另一種調(diào)用方式,即form標簽的onsubmit事件屬性
例子:
form表單綁定驗證完整范例
<!DOCTYPE html>
<html>
<!--
綁定驗證的另一種方式,form表單綁定驗證完整示例
-->
<head>
<meta charset="utf-8">
<title>簡單列表的html結(jié)構(gòu)</title>
</head>
<body>
<form method="post" action="" onsubmit="return eg.regCheck();">
賬戶:<input type="text" name="" id="userid"/><br/><br/>
密碼:<input type="password" name="" id="userpwd"/><br/><br/>
確認:<input type="password" name="" id="userpwd2"/><br/><br/>
<input type="submit"
value="注冊"
/>
</form>
<script>
//聲明一個對象,當做命名空間來使用
//定義一個公共函數(shù)來獲取指定id元素,減少代碼量,提高代碼復用率
var eg = {};
eg.$ = function(id){
return document.getElementById(id);
};
eg.regCheck = function () {
var uid = eg.$("userid");
var upwd = eg.$("userpwd");
var upwd2 = eg.$("userpwd2");
if(uid.value == ''){
alert('賬戶不能為空!');
//返回false就會阻止表單form提交
return false;
}
if(upwd.value == ''){
alert('密碼不能為空!');
//返回false就會阻止表單form提交
return false;
}
if(upwd.value != upwd2.value){
alert('兩次輸入密碼不相同!');
//返回false就會阻止表單form提交
return false;
}
return true;
};
</script>
</body>
</html>
2,處理各種類型的表單元素
2.1，input,textarea,hidden和button
要求:在注冊表單的基礎上加"簡介"字段，可以為空，但是最長不超過60個字符，同時要統(tǒng)計一下，用戶輸入錯誤的次數(shù)，輸入超過3次，就鎖定"注冊"按鈕,然后要"解鎖"才能重新使用
例子:
處理各種類型表單一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>處理各種類型表單一</title>
</head>
<body>
<form method="post" action="" onsubmit="return eg.regCheck();">
賬戶:<input type="text" name="" id="userid"/><br/><br/>
密碼:<input type="password" name="" id="userpwd"/><br/><br/>
確認:<input type="password" name="" id="userpwd2"/><br/><br/>
簡介:
<textarea name="" rows="4" cols="18" id="about">
</textarea><br/><br/>
<input type="submit"
value="注冊" id="regBtn"
/>
<input type="button" value="解鎖" onclick="eg.unlock"
style="display: none;" id="regUnlock">
</form>
<script>
//聲明一個對象,當做命名空間來使用
//定義一個公共函數(shù)來獲取指定id元素,減少代碼量,提高代碼復用率
var eg = {};
eg.$ = function(id){
return document.getElementById(id);
};
//主要的驗證方法
eg.regCheck = function () {
var uid = eg.$("userid");
var upwd = eg.$("userpwd");
var upwd2 = eg.$("userpwd2");
//value是元素自帶屬性
if(uid.value == ''){
alert('賬戶不能為空!');
eg.err();
return false;
}
if(upwd.value == ''){
alert('密碼不能為空!');
eg.err();
return false;
}
if(upwd.value != upwd2.value){
alert('兩次輸入密碼不相同!');
eg.err();
return false;
}
//新增部分
var about = eg.$("about");
//value是字符串類型的屬性
if (about.value.length>60){
alert("簡介太長!");
eg.err();
return false;
}
//返回true就會提交表單
return true;
};
//出錯時記錄錯誤次數(shù)
eg.err = function () {
var el = eg.$("errnum");
var old = el.value;
//把字符串轉(zhuǎn)換為整數(shù)+1,并保存起來
el.value = parseInt(old)+1;
//用來檢查是否應該鎖定
eg.lock();
};
//通過次數(shù)判斷是否要鎖定
eg.lock = function(){
var err = eg.$("errnum");
if (parseInt(err.value)>2){
eg.$("regBtn").disabled = true;
//根據(jù)業(yè)務需求,輸錯3次就鎖定
eg.$("regUnlock").style.display="block";
//同時顯示解鎖按鈕
}
};
eg.unlock = function(){
eg.$("regBtn").disabled = false;
//根據(jù)業(yè)務需求，解鎖就是讓用戶可以重新注冊
eg.$("regUnlock").style.display="none";
//元素所有樣式都掛載到style屬性下
}
</script>
</body>
</html>
現(xiàn)在制作一個錯誤統(tǒng)計,可以為后臺系統(tǒng)保存起來用于分析用戶的錯誤率，甚至可以分析出用戶一般會在哪些字段上出錯。記錄錯誤信息不需要給用戶看到，可以選擇input的type屬性是hidden的元素來存儲
2.2checkbox,radio和select
知道用戶性別,年齡,興趣愛好
例子:
處理各種類型表單二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>處理各種類型表單二</title>
</head>
<body>
<form method="post" action="" onsubmit="return eg.regCheck();">
賬戶:<input type="text" name="" id="userid"/><br/><br/>
密碼:<input type="password" name="" id="userpwd"/><br/><br/>
確認:<input type="password" name="" id="userpwd2"/><br/><br/>
簡介:
<textarea name="" rows="4" cols="18" id="about">
</textarea><br/><br/>
<input type="submit"
value="注冊" id="regBtn"
/>
<input type="button" value="解鎖" onclick="eg.unlock"
style="display: none;" id="regUnlock">
</form>
<script>
//聲明一個對象,當做命名空間來使用
//定義一個公共函數(shù)來獲取指定id元素,減少代碼量,提高代碼復用率
var eg = {};
eg.$ = function(id){
return document.getElementById(id);
};
//主要的驗證方法
eg.regCheck = function () {
var uid = eg.$("userid");
var upwd = eg.$("userpwd");
var upwd2 = eg.$("userpwd2");
//value是元素自帶屬性
if(uid.value == ''){
alert('賬戶不能為空!');
eg.err();
return false;
}
if(upwd.value == ''){
alert('密碼不能為空!');
eg.err();
return false;
}
if(upwd.value != upwd2.value){
alert('兩次輸入密碼不相同!');
eg.err();
return false;
}
//新增部分
var about = eg.$("about");
//value是字符串類型的屬性
if (about.value.length>60){
alert("簡介太長!");
eg.err();
return false;
}
//返回true就會提交表單
return true;
};
//出錯時記錄錯誤次數(shù)
eg.err = function () {
var el = eg.$("errnum");
var old = el.value;
//把字符串轉(zhuǎn)換為整數(shù)+1,并保存起來
el.value = parseInt(old)+1;
//用來檢查是否應該鎖定
eg.lock();
};
//通過次數(shù)判斷是否要鎖定
eg.lock = function(){
var err = eg.$("errnum");
if (parseInt(err.value)>2){
eg.$("regBtn").disabled = true;
//根據(jù)業(yè)務需求,輸錯3次就鎖定
eg.$("regUnlock").style.display="block";
//同時顯示解鎖按鈕
}
};
eg.unlock = function(){
eg.$("regBtn").disabled = false;
//根據(jù)業(yè)務需求，解鎖就是讓用戶可以重新注冊
eg.$("regUnlock").style.display="none";
//元素所有樣式都掛載到style屬性下
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
javascript cookies 設置、讀取、刪除實例代碼
javascript cookies 存、取、刪除實例，也是不錯的文章，跟我們整理的有些補充。2010-04-04
今天小編就為大家分享一篇基于bootstrap頁面渲染的問題解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了原生js實現(xiàn)密碼強度驗證功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
想當然,大家都認識JS中的對象,也知道一些對象的實現(xiàn)方法,所以在了解包裝類之前,我們將來對象的實現(xiàn)方法大概的來回想一下,更感興趣的小伙伴跟著小編一起來看看吧2024-06-06
這篇文章主要介紹了使用KrpanoToolJS在瀏覽器切圖的實例詳解,大概是需要在瀏覽器中將全景圖轉(zhuǎn)為立方體圖、多層級瓦片圖，通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
JavaScript實現(xiàn)多個重疊層點擊切換效果的方法
這篇文章主要介紹了JavaScript實現(xiàn)多個重疊層點擊切換效果的方法,實例分析了javascript實現(xiàn)點擊切換效果的相關技巧,需要的朋友可以參考下2015-04-04
這篇文章主要為大家詳細介紹了原生js實現(xiàn)隨機點名，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
JavaScript語法集錦是對javascript常用函數(shù)的一些小結(jié)，比較實用，建議收藏，方便查找需要的資料。2009-11-11
這篇文章主要介紹了用javascript刪除當前行,添加行的示例代碼。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了JS實現(xiàn)的郵箱提示補全效果,涉及javascript正則匹配、事件響應及頁面元素動態(tài)操作相關技巧,需要的朋友可以參考下2018-01-01