使用js實現註冊表單時自動檢測輸入信息

在編寫註冊界面時,如果時提交一次檢測一次用戶輸入的信息是否正確時是很煩躁而且不合理的,故採用了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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章