...
在HTML里輸入表單的基本數(shù)據(jù)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新用戶注冊(cè)頁面</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="js/reg.js"></script>
</head>
<body>
<div id="header"><img src="img/wy.png" alt="logo" /></div>
<div id="main">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bg bg_top_left"></td>
<td class="bg_top"></td>
<td class="bg bg_top_right"></td>
</tr>
<tr>
<td class="bg_left"></td>
<td class="content">
<form action="" method="post" name="myform" onsubmit="return checkForm()">
<dl>
<dt>通行證用戶名：</dt>
<dd><input type="text" id="userName" class="inputs userWidth" onfocus="userNameFocus()" onblur="userNameBlur()" /> @163.com</dd>
<div id="userNameId"></div>
</dl>
<dl>
<dt>登錄密碼：</dt>
<dd><input type="password" id="pwd" class="inputs" onfocus="pwdFocus()" onblur="pwdBlur()" /></dd>
<div id="pwdId"></div>
</dl>
<dl>
<dt>重復(fù)登錄密碼：</dt>
<dd><input type="password" id="repwd" class="inputs" onblur="repwdBlur()" /></dd>
<div id="repwdId"></div>
</dl>
<dl>
<dt>性別：</dt>
<dd><input name="sex" type="radio" value="" checked="checked" />男 <input name="sex" type="radio" value="" />女 </dd>
</dl>
<dl>
<dt>真實(shí)姓名：</dt>
<dd><input type="text" id="realName" class="inputs" onblur="aa()" /></dd>
</dl>
<dl>
<dt>昵稱：</dt>
<dd><input type="text" id="nickName" class="inputs" onfocus="nickNameFocus()" onblur="nickNameBlur()" /></dd>
<div id="nickNameId"></div>
</dl>
<dl>
<dt>關(guān)聯(lián)手機(jī)號(hào)：</dt>sh
<dd><input type="text" id="tel" class="inputs" onfocus="telFocus()" onblur="telBlur()" /></dd>
<div id="telId"></div>
</dl>
<dl>
<dt>保密郵箱：</dt>
<dd><input type="text" id="email" class="inputs" onfocus="emailFocus()" onblur="emailBlur()" /></dd>
<div id="emailId"></div>
</dl>
<dl>
<dt></dt>
<dd><input name=" " type="submit" /></dd>
</dl>
</form>
</td>
<td class="bg_right"></td>
</tr>
<tr>
<td class="bg bg_end_left"></td>
<td class="bg_end"></td>
<td class="bg bg_end_right"></td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
function aa() {
var reg = /^[\u4e00-\u9fa5]$/;
var name = document.getElementById("realName").value;
if (reg.test(name) == false) {
alert("只能為漢字");
} else {
alert("正確");
}
}
</script>
</html>
在JS中完成表單驗(yàn)證
function $(elementId) {
return document.getElementById(elementId);
}
//當(dāng)獲取焦點(diǎn)的時(shí)候要提示用戶輸入的格式信息 function userNameFocus() { //根據(jù)userNameId獲取到節(jié)點(diǎn)元素(對(duì)象) var userNameId = $("userNameId"); userNameId.className = "import_prompt"; userNameId.innerHTML = "要以英文字母或者是數(shù)字開頭且長(zhǎng)度為4~18"; }function userNameBlur() { //根據(jù)Id獲取到input節(jié)點(diǎn)元素 var userName = $("userName"); //根據(jù)id獲取到div節(jié)點(diǎn)元素 var userNameId = $("userNameId"); if (userName.value == "") { userNameId.className = "error_prompt"; userNameId.innerHTML = "用戶名不能為空!!!"; return false; }//用戶名是有規(guī)則的：由字母，數(shù)字，下劃線，點(diǎn)，減號(hào)組成的。只能以字母或數(shù)字開頭或結(jié)尾 //要使用正則表達(dá)式來驗(yàn)證上方數(shù)據(jù) var reg = /^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/if (reg.test(userName.value) == false) { userNameId.className = "error_prompt"; userNameId.innerHTML = "只能以字母或數(shù)字開頭或結(jié)尾!!!"; return false; } userNameId.className = "ok_prompt"; userNameId.innerHTML = "用戶名驗(yàn)證成功!!!"; return true; }//手機(jī)號(hào)驗(yàn)證 function telFocus() { var telId = $("telId"); telId.className = "import_prompt"; telId.innerHTML = "要以數(shù)字開頭且長(zhǎng)度為11"; }function telBlur() { var tel = $("tel"); var telId = $("telId"); if (tel.value == "") { telId.className = "error_prompt"; telId.innerHTML = "手機(jī)號(hào)不能為空!!!"; return false; }var phone = /^1([38]\d|5[0-35-9]|7[3678])\d{8}$/;;if (phone.test(tel.value) == false) { telId.className = "error_prompt"; telId.innerHTML = "只能以數(shù)字開頭或結(jié)尾!!!"; return false; } telId.className = "ok_prompt"; telId.innerHTML = "手機(jī)號(hào)驗(yàn)證成功!!!"; return true; }
