- 每個元素進行驗證,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 clearerr(eid){
document.getElementById(eid).value="";//用於清除表單元素
//document.getElementById(eid).innerHTML="";//清除div等素
}
- onsubmit
if(check1()==true&&check2()==true&&check3()==true){
}