原生js制作表單驗(yàn)證的方法是什么

這篇文章將為大家詳細(xì)講解有關(guān)原生js制作表單驗(yàn)證的方法是什么，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),鼓樓企業(yè)網(wǎng)站建設(shè),鼓樓品牌網(wǎng)站建設(shè),網(wǎng)站定制,鼓樓網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,鼓樓網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

表單驗(yàn)證是web前端最常見的功能之一，也屬于前端開發(fā)的基本功。自己完成一個(gè)表單驗(yàn)證的開發(fā)，也有助于加深對(duì)字符串處理和正則表達(dá)式的理解。

基本的表單驗(yàn)證包括如：字母驗(yàn)證、數(shù)字驗(yàn)證、字母和數(shù)字驗(yàn)證、漢字驗(yàn)證、密碼驗(yàn)證、日期驗(yàn)證、手機(jī)驗(yàn)證、郵箱驗(yàn)證，密碼驗(yàn)證等。

現(xiàn)在就來(lái)完成這些驗(yàn)證代碼的編寫，先來(lái)看字母是怎么驗(yàn)證的。先編寫需要的html代碼，創(chuàng)建一個(gè)id為formContainer的表單元素，在里面加入需要驗(yàn)證英文字母的文本框和按鈕，文本框后面需要一個(gè)span元素存放提示文字。如下所示：

<form action="" id="formContainer"> <dl>  <dt>英文字母：</dt>  <dd><input type="text" id="verifyEn"><span></span></dd>  <dd>  <input type="submit" value="提交" >  <input type="reset" value="重置" >  </dd> </dl> </form>

開發(fā)的時(shí)候，一步一步分析功能再去實(shí)現(xiàn)，可以保持清晰的思路。

1. 獲取表單元素及文本框元素，如下所示：

var eFormContainer = document.getElementById('formContainer');var eVerifyEn = document.getElementById('verifyEn');

 2. 給表單元素綁定提交事件，用于點(diǎn)擊提交按鈕時(shí)，進(jìn)行驗(yàn)證。

eFormContainer.addEventListener('submit',function(event){ });

本實(shí)例要求當(dāng)通過(guò)驗(yàn)證時(shí)，彈出提示通過(guò)驗(yàn)證；如果驗(yàn)證沒有通過(guò)時(shí)，光標(biāo)定位到文本框，并在文本框后顯示驗(yàn)證失敗的提示。接下來(lái)看下在提交事件函數(shù)中，具體怎么樣做。

 3. 先在函數(shù)中聲明相關(guān)變量并獲取文本框的值。bPass變量用于判斷是否可通過(guò)驗(yàn)證；sPrompt變量是提示文字；sValue變量是文本框的值。如下所示：

eFormContainer.addEventListener('submit',function(event){ var bPass = false; var sPrompt = ''; var sValue = eVerifyEn.value;});

 4. 不允許文本框?yàn)榭?。判斷sValue是不是空字符串，如果是則在文本框后顯示提示，并且激活文本框，還需要阻止后續(xù)操作和默認(rèn)行為，代碼如下：

eFormContainer.addEventListener('submit',function(){ /* ... */  if(sValue.trim()==''){  //修改提示文字  sPrompt = '英文字母不能為空!';  //光標(biāo)定位到字母文本框  eVerifyEn.focus();  //在文本框后顯示提示文字  //獲取文本框父元素  let eParent = eVerifyEn.parentElement;  //獲取存放提示的span元素  let eSpan = eParent.getElementsByTagName('span')[0];  //在span元素中添加提示  eSpan.innerHTML = sPrompt;  //阻止表單提交  event.preventDefault();  //阻止后續(xù)代碼的執(zhí)行  return; } });

5. 判斷輸入的值是否符合規(guī)則，即只有英文字母沒有其他字符。在這里聲明一個(gè)正則表達(dá)式，用于判斷是否都是英文字母。如下所示：

eFormContainer.addEventListener('submit',function(){ /* ... */  //聲明正則，并判斷字符串是否都是英文字母 let reg = /^[a-zA-Z]+$/; bPass = reg.test(sValue); });

6. 根據(jù)正則判斷結(jié)果，執(zhí)行通過(guò)或阻止提交。

eFormContainer.addEventListener('submit',function(){ /* ... */  if(bPass){  //通過(guò)驗(yàn)證彈出提示  alert('通過(guò)驗(yàn)證'); }else{  //修改提示文字  sPrompt = '只能輸入英文字母!';  //光標(biāo)定位到字母文本框  eVerifyEn.focus();  //在文本框后顯示提示文字  //獲取文本框父元素  let eParent = eVerifyEn.parentElement;  //獲取存放提示的span元素  let eSpan = eParent.getElementsByTagName('span')[0];  //在span元素中添加提示  eSpan.innerHTML = sPrompt;  //阻止表單提交  event.preventDefault(); } });

7. 在文本框輸入內(nèi)容的時(shí)候，應(yīng)該要?jiǎng)h除后面的提示，如下所示：

//在eFormContainer元素上綁定input事件，把所有文本框的input事件都委托給eFormContainer元素， // 這樣做的好處就是不需要給每一個(gè)文本框都添加事件。 eFormContainer.addEventListener('input',function(event){ //獲取當(dāng)前文本框 let eInput = event.target; //獲取文本框父元素 let eParent = eInput.parentElement; //獲取存放提示的span元素 let eSpan = eParent.getElementsByTagName('span')[0]; //清空提示 eSpan.innerHTML = ''; });

此時(shí)的完整javascript代碼如下：

function fnFormVerify(){ // 獲取表單元素 var eFormContainer = document.getElementById('formContainer'); // 獲取驗(yàn)證字母文本框 var eVerifyEn = document.getElementById('verifyEn'); // 給表單元素綁定提交事件 eFormContainer.addEventListener('submit',function(){  // 聲明bPass變量，用于判斷是否通過(guò)驗(yàn)證  var bPass = false;  // 聲明sPrompt變量，用于提示文字  var sPrompt = '';  // 獲取字母文本框的值，保證其不等于空，再判斷值中是否包含非英文字母，代碼如下：  var sValue = eVerifyEn.value;  //保證其不等于空  if(sValue.trim()==''){  //修改提示文字  sPrompt = '英文字母不能為空!';  //光標(biāo)定位到字母文本框  eVerifyEn.focus();  //在文本框后顯示提示文字  //獲取文本框父元素  let eParent = eVerifyEn.parentElement;  //獲取存放提示的span元素  let eSpan = eParent.getElementsByTagName('span')[0];  //在span元素中添加提示  eSpan.innerHTML = sPrompt;  //阻止表單提交  event.preventDefault();  //阻止后續(xù)代碼的執(zhí)行  return;  }  //聲明正則，并判斷字符串是否都是英文字母  let reg = /^[a-zA-Z]+$/;  bPass = reg.test(sValue);  if(bPass){  //通過(guò)驗(yàn)證彈出提示  alert('通過(guò)驗(yàn)證');  }else{  //修改提示文字  sPrompt = '只能輸入英文字母!';  //光標(biāo)定位到字母文本框  eVerifyEn.focus();  //在文本框后顯示提示文字  //獲取文本框父元素  let eParent = eVerifyEn.parentElement;  //獲取存放提示的span元素  let eSpan = eParent.getElementsByTagName('span')[0];  //在span元素中添加提示  eSpan.innerHTML = sPrompt;  //阻止表單提交  event.preventDefault();  } }); //在eFormContainer元素上綁定input事件，把所有文本框的input事件都委托給eFormContainer元素， // 這樣做的好處就是不需要給每一個(gè)文本框都添加事件。 eFormContainer.addEventListener('input',function(event){  //獲取當(dāng)前文本框  let eInput = event.target;  //獲取文本框父元素  let eParent = eInput.parentElement;  //獲取存放提示的span元素  let eSpan = eParent.getElementsByTagName('span')[0];  //清空提示  eSpan.innerHTML = ''; }); } fnFormVerify();

關(guān)于原生js制作表單驗(yàn)證的方法是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

網(wǎng)頁(yè)標(biāo)題：原生js制作表單驗(yàn)證的方法是什么
鏈接URL：http://muchs.cn/article28/iepecp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、品牌網(wǎng)站建設(shè)、用戶體驗(yàn)、定制網(wǎng)站、外貿(mào)建站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)