表單驗證實現方法

  • 每個元素進行驗證,onblur事件
    • 當每個元素失去焦點時進行驗證,如有錯誤,給出提示
  • 當元素獲取焦點時,onfocus事件
    • 當元素獲得焦點時,需要將錯誤信息清除
  • 提交按鈕事件onsubmit需要驗證所有表單元素

【解決方案】:

  • 每個元素的onblur事件寫個驗證方法

  • 驗證是否爲空,格式是否正確(正則表達式)
    用戶名格式驗證

function checkUserName(){
//獲取輸入的值
var username=document.getElementById
  (“username”).value;
  //是否爲空
  if(username.length==0){
   var msg="用戶名不能爲空!";
    showError('nameerror',msg);
    return false;
  //格式是否正確(要求開頭是字母,其餘可以是字母數字,下劃線,長度6-20位)
  //正則表達式
      /^[a-zA-Z][a-zA-Z0-9_]{5,19}$/;
      if(pattern.test(username))==flase{
       var msg="用戶名格式非法";
       return flase;
      }
  return true;
  }
}
//提示錯誤信息
function  showError(eid,msg){                                       document.getElementById(eid).innerHTML=msg;
}
  • 每個元素的onfocus事件清除錯誤信息的方法
    只寫一個方法,接受錯誤提示層id
function clearerreid){
     document.getElementById(eid).value="";//用於清除表單元素
     //document.getElementById(eid).innerHTML="";//清除div等素
 }
  • onsubmit
if(check1()==true&&check2()==true&&check3()==true){   

 }
發佈了23 篇原創文章 · 獲贊 60 · 訪問量 23萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章