...
在HTML里输入表单的基本数据
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新用户注册页面</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>重复登录密码：</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>真实姓名：</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>关联手机号：</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中完成表单验证
function $(elementId) {
return document.getElementById(elementId);
}
//当获取焦点的时候要提示用户输入的格式信息 function userNameFocus() { //根据userNameId获取到节点元素(对象) var userNameId = $("userNameId"); userNameId.className = "import_prompt"; userNameId.innerHTML = "要以英文字母或者是数字开头且长度为4~18"; }function userNameBlur() { //根据Id获取到input节点元素 var userName = $("userName"); //根据id获取到div节点元素 var userNameId = $("userNameId"); if (userName.value == "") { userNameId.className = "error_prompt"; userNameId.innerHTML = "用户名不能为空!!!"; return false; }//用户名是有规则的：由字母，数字，下划线，点，减号组成的。只能以字母或数字开头或结尾 //要使用正则表达式来验证上方数据 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 = "只能以字母或数字开头或结尾!!!"; return false; } userNameId.className = "ok_prompt"; userNameId.innerHTML = "用户名验证成功!!!"; return true; }//手机号验证 function telFocus() { var telId = $("telId"); telId.className = "import_prompt"; telId.innerHTML = "要以数字开头且长度为11"; }function telBlur() { var tel = $("tel"); var telId = $("telId"); if (tel.value == "") { telId.className = "error_prompt"; telId.innerHTML = "手机号不能为空!!!"; 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 = "只能以数字开头或结尾!!!"; return false; } telId.className = "ok_prompt"; telId.innerHTML = "手机号验证成功!!!"; return true; }
