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

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

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

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

現(xiàn)在就來完成這些驗證代碼的編寫，先來看字母是怎么驗證的。先編寫需要的html代碼，創(chuàng)建一個id為formContainer的表單元素，在里面加入需要驗證英文字母的文本框和按鈕，文本框后面需要一個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ā)的時候，一步一步分析功能再去實現(xiàn)，可以保持清晰的思路。

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

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

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

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

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

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

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

 4. 不允許文本框為空。判斷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ī)則，即只有英文字母沒有其他字符。在這里聲明一個正則表達(dá)式，用于判斷是否都是英文字母。如下所示：

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

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

eFormContainer.addEventListener('submit',function(){ /* ... */  if(bPass){  //通過驗證彈出提示  alert('通過驗證'); }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)容的時候，應(yīng)該要刪除后面的提示，如下所示：

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

此時的完整javascript代碼如下：

function fnFormVerify(){ // 獲取表單元素 var eFormContainer = document.getElementById('formContainer'); // 獲取驗證字母文本框 var eVerifyEn = document.getElementById('verifyEn'); // 給表單元素綁定提交事件 eFormContainer.addEventListener('submit',function(){  // 聲明bPass變量，用于判斷是否通過驗證  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){  //通過驗證彈出提示  alert('通過驗證');  }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元素， // 這樣做的好處就是不需要給每一個文本框都添加事件。 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制作表單驗證的方法是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

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

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

廣告

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