在編寫註冊界面時,如果時提交一次檢測一次用戶輸入的信息是否正確時是很煩躁而且不合理的,故採用了js實現動態地檢測輸入信息的時候合理性,從用戶角度出發是及其合理化的,下面簡單介紹下該功能代碼的實現。
這是測試時所用的表單:
然後是檢測非法輸入時的提示信息:
接下來時輸入正確信息時的提示:
這就是該代碼實現的功能,下面貼出相關代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
function checkUserid(){
var ueridObj=document.getElementById("userid");
var userid=trim(ueridObj.value);
var useridRegex= /^\w{6,12}$/;
var msg =" <img src='img/true.gif' style='width:12px'>";
if(!userid)
msg ="<font color='red'>賬號不能爲空!</font>";
else if(!useridRegex.test(userid))
msg ="<font color='red'>賬號長度不對!</font>";
var span = document.getElementById("useridSpan");
span.innerHTML = msg;
return msg == " <img src='img/true.gif' style='width:12px'>";
}
function trim(s){
return s.replace(/^\s+|\s+$/g,"");
}
</script>
<title>測試</title>
</head>
<body>
<table>
<tr>
<td>
賬號:<input type="text" name="userid" id="userid" οnblur="checkUserid()" /> <span id="useridSpan" style=" color:#F00">*6-12字母,數字組合</span>
</td>
</tr>
</table>
</body>
</html>