大家都知道,客戶端檢測不單可以讓用戶獲得更好的體驗,而且可以通過校驗數據大大減 少客戶端和服務器端的往返次數,減少服務器負擔。在這裡,小弟打算回顧一下自己在客戶 端檢測方面的學習歷程和采用方法,如果大家有什麼更好的方法或者建議,歡迎提出來共享 !共同進步!
為了方便舉例和說明,先構建一個簡單的html頁面,如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS Verify</title>
</head>
<body>
<div>
<span>請輸入用戶名,年齡和自我介紹:</span>
<br />
<span>用戶名:<input type="text" id="txtName" size="20" /></span>
<br />
<span>年齡:<input type="text" id="txtAge" size="5" />歲 </span>
<br />
<span>自我介紹:</span>
<br />
<span><textarea id="txtIntro" rows="10" cols="50"></textarea></span>
<br />
<span><input type="button" value="提交信息" /></span>
</div>
</body>
</html>
第一階段是:續項強寫
每個人都基本會經過這個階段,就是對檢測內容每個都手工校驗。很慚愧,自己也寫過不 少這樣的代碼。。這個階段的代碼如下:
function SubmitInfo()
{
var name = document.getElementById("txtName");
var age = document.getElementById("txtAge");
var intro = document.getElementById("txtIntro");
if(name == null || name.value == "")
{
alert("請輸入用戶名!");
return false;
}
if(!/^[\u4E00-\u9FA5a-z0-9_]*$/gi.test(name.value))
{
alert("用戶名只能由中文,英文,數字及下劃線組成!");
return false;
}
if(age == null || age.value == "")
{
alert("請輸入年齡!");
return false;
}
if(!/^[1-9]\d$/.test(age.value))
{
alert("年齡必須為正整數!");
return false;
}
if(intro == null || intro.value == "")
{
alert("請輸入自我介紹!");
return false;
}
alert("提交成功!");
return true;
}
不評價這個了。。因為每個人都可能因為寫這些方法檢測邏輯寫得眼冒星星手抽筋的!弄 的經常下班了還在撲哧撲哧的寫啊寫。。。。