使用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>

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