javascript用戶輸入數據驗證：附案例，代碼
一、知識點
1、JS支持事件處理業務邏輯模型，常用事件
Click 單擊
Dblclick 雙擊
Focus 聚焦
Blur 失去焦點
Mouseover 鼠標懸停
Mousemove 鼠標移動
Mouseout 鼠標移開
Change 改變
Load 頁面加載
Keydown 鍵按下
2、調用
找到對應的標籤，加上屬性 on事件關鍵字=”JS代碼”。一般調用的JS代碼邏輯很複雜，會用函數封裝。
3、DOM操作：Document Object Model，文檔對象模型。網頁文檔由一個個的HTML標籤組成，操作網頁組成元素（標籤）。
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
4、表單提交
方式一：document.getElementById("form1").submit();
方式二：提交按鈕類型設置為submit，調用的函數必須要有一個返回值，返回false不提交，true提交；調用函數時前面再加個return 關鍵字。
5、回車驗證的實現。利用用戶敲擊鍵盤判斷用戶按下的是回車鍵調用檢測函數即可。
6、事件參數：event代表對應的標籤執行的動作。比如文本框按下鍵判斷是不是回車
Onkeydown=”Test(event);”
<script>
function Test(e){
var e=e||window.event;
if(e.keyCode==13){}
}
</script>
鼠標懸停，顯示該位置座標（相對）
Onmouseover=”alert(event.clientX+”|”+event.clientY);”
二、表單驗證
示例源碼：
<html>
<head><title>XXX 用戶註冊</title></head>
<body style="margin-left:auto; margin-right:auto; text-align:center;">
<form name="form1" id="form1" action="register.php" method="post">
<table>
<caption><h3>用戶註冊</h3></caption>
<tr><th>用戶名：</th><td><input onKeyDown="EnterCheck(event);" name="loginid" id="loginid" placeholder="請輸入用戶名" /></td></tr>
<tr><th>密碼：</th><td><input name="pwd" id="pwd" type="password" placeholder="請輸入密碼" onKeyDown="EnterCheck(event);" /></td></tr>
<tr><th>確認密碼：</th><td><input name="repwd" id="repwd" type="password" placeholder="請輸入確認密碼" onKeyDown="EnterCheck(event);" /></td></tr>
<tr><th>暱稱：</th><td><input type="text" name="uname" id="uname" placeholder="請輸入暱稱" onKeyDown="EnterCheck(event);" /></td></tr>
<tr><th>性別：</th><td><input type="radio" checked id="sex" name="sex" />男<input name="sex" type="radio" id="sex" />女
</td></tr>
<tr><th>喜歡的顏色：</th><td>
<select name="ucolor" id="ucolor">
<option selected value="0">==請選擇==</option>
<option value="red">--紅色--</option>
<option value="green">--綠色--</option>
<option value="blue">--藍色--</option>
</select>
</td></tr>
<tr><th>愛好：</th><td><input value="playcomputer" name="cbof[]" id="cbof[]" type="checkbox">玩電腦
<input type="checkbox" value="readingbook" name="cbof[]" id="cbof[]" >看書
<input type="checkbox" value="dosporting" name="cbof[]" id="cbof[]">做運動
</td></tr>
<tr><th>個人簡介：</th><td>
<textarea rows="4" name="describe" id="describe" onKeyDown="EnterCheck(event);"></textarea>
</td></tr>
<tr><td></td><td>
<input type="button" value="提交" onClick="return CheckInput();">
<input type="reset" value="重置">
<input type="button" value="取消">
</td></tr>
</table>
</form>
</body>
<script language="javascript" type="text/javascript">
//驗證用戶輸入
function CheckInput(){
var result=false;
//獲取用戶名文本框對象
var loginid=document.getElementById("loginid");
var pwd=document.getElementById("pwd");
var repwd=document.getElementById("repwd");
var uname=document.getElementById("uname");
var ucolor=document.getElementById("ucolor");
var describe=document.getElementById("describe");
if(CheckIsSafeInputText(loginid,"用戶名")){}
else if(CheckIsSafeInputText(pwd,"密碼")){}
else if(repwd.value!=pwd.value){
alert("密碼與確認密碼不一致");
repwd.focus();
}
else if(CheckIsSafeInputText(uname,"暱稱")){}
else if(ucolor.value=="0"){
alert("請至少選擇一個喜歡的顏色");
ucolor.focus();
}
else if(describe!=null && describe.value.length>256){
alert("個人簡介不得超出256個字符");
describe.focus();
}
else
//document.getElementById("form1").submit();
result=true;
return result;
}
//驗證文本框是否合法，非法返回true，合法返回false
function CheckIsSafeInputText(obj,msg){
var result=true;
if(obj==null || obj.value=="")
{
alert(msg+"不得為空");//+為字符串連接符
obj.focus();
}
else if(obj.value.length<4 || obj.value.length>16){
alert(msg+"長度在4~16個字符以內");
obj.focus();
}
else
result=false;
return result;
}
//回車驗證
function EnterCheck(e){
var e=e || window.event;
if(e.keyCode==13)
CheckInput();
}
</script>
</html>
三、JS外鏈
JS的代碼抽出去作為一個單獨的文件，命名要對應，相應的頁面通過<script language="javascript" type="text/javascript" src="相對路徑"></script>來調用
相關推薦
