应用背景为假设以福建省某汽车4s店用户的注册管理来实现，设置用户名、密码、二次确认密码、邮箱、真实姓名、所属区市、汽车类型这几个注册信息，在注册新用户的过程中，每个注册信息都借助JavaScript与正则表达式的相关知识进行信息合理性检查，而背景则是同时连接本地图片进行设置，至于注册框的颜色设置以及布局效果则是根据css与div的相关知识内容进行实现，详细内容介绍代码中均有注释。
HTML代码
<span style="font-size:14px Times New Roman;">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- HTTP标题信息(HTTP-EQUIV) -->
<title>4s店用户注册页面</title>
<link type="text/css" rel="stylesheet" href="register.css"> <!--引入外部定义好的register.css文件 -->
<script type="text/javascript" src="register.js"></script> <!--引入外部定义好的register.js文件 -->
</head>
<body>
<form action="" method="" οnsubmit="return validateForm()"> <!-- 当触发提交事件时调用validateForm()方法 -->
<table border="26" align="center" width="50%">
<caption >Owner Registration</caption>
<tr>
<td align="right">
<sup><font color="red"></font></sup>User name：
</td>
<td><input style="background-color:transparent" type="text" name="username" id="username" class="input_class" οnblur="checkUsername(this)" /><span id="username_span"> </span></td>
</tr>
<body background="D:/web/background.jpg"></body>
<tr>
<td align="right">
<sup><font color="red"></font></sup>Password：
</td>
<td><input style="background-color:transparent" type="password" name="password" id="password" class="input_class" οnblur="checkPassword(this)" /><span id="password_span"></span></td>
</tr>
<tr>
<td align="right">
<sup><font color="red"></font></sup>Repassword：
</td>
<td><input style="background-color:transparent" type="password" name="rePassword" id="rePassword" class="input_class" οnblur="checkRePassword(this)" /></td>
</tr>
<tr>
<td align="right">
<sup><font color="red"></font></sup>Email：
</td>
<td><input style="background-color:transparent" type="text" name="Email" id="Email" class="input_class" οnblur="checkEmail(this)" /></td>
</tr>
<tr>
<td align="right">
<sup><font color="red"></font></sup>RealName：
</td>
<td><input style="background-color:transparent" type="text" name="realName" id="realName" class="input_class" οnblur="checkName(this)" /></td>
</tr>
<tr>
<td align="right">
<sup><font color="red"></font></sup>City：
</td>
<td><select name="province" id="province" οnblur="checkProvince(this)">
<option value="--请选择--">--option--</option>
<option value="闽A">福州</option>
<option value="闽B">莆田</option>
<option value="闽C">泉州</option>
<option value="闽D">厦门</option>
<option value="闽E">漳州</option>
<option value="闽F">龙岩</option>
<option value="闽G">三明</option>
<option value="闽H">南平</option>
<option value="闽J">宁德</option>
<option value="闽K">省属系统</option>
</select><span id="province_span"></span></td>
</tr>
<tr>
<td align="left" colspan="2">
<sup><font color="red"></font></sup>Car type：
<input type="radio" name="car_type" id="Benz" value="奔驰" checked="checked" />Benz <!-- 技术方向默认选中奔驰 -->
<input type="radio" name="car_type" id="Bmw" value="宝马" />Bmw
<input type="radio" name="car_type" id="Audi" value="奥迪" />Audi
<input type="radio" name="car_type" id="Lexus" value="雷克萨斯" />Lexus
<input type="radio" name="car_type" id="Land rover" value="路虎" />Land rover
<input type="radio" name="car_type" id="Porsche" value="保时捷" />Porsche
<input type="radio" name="car_type" id="Bentley" value="宾利" />Bentley
<input type="radio" name="car_type" id="Ferrari" value="法拉利" />Ferrari
<input type="radio" name="car_type" id="Lamborghini" value="兰博基尼" />Lamborghini
<input type="radio" name="car_type" id="McLaren" value="迈凯伦" />McLaren
<input type="radio" name="car_type" id="Rolls royce" value="劳斯莱斯" />Rolls royce
<input type="radio" name="car_type" id="Maserati" value="玛莎拉蒂" />Maserati
<input type="radio" name="car_type" id="Tesla" value="特斯拉" />Tesla
<input type="radio" name="car_type" id="Cadillac" value="凯迪拉克" />Cadillac
<input type="radio" name="car_type" id="Infiniti" value="英菲尼迪" />Infiniti
<input type="radio" name="car_type" id="Bugatti Veyron" value="布加迪威龙" />Bugatti Veyron
<input type="radio" name="car_type" id="Aston Martin" value="阿斯顿马丁" />Aston Martin
</td>
</tr>
<tr>
<td align="center" colspan="2"> <!-- 合并两列 -->
<input style="background-color:transparent" type="submit" class="aaa" value="Enroll" />
<input style="background-color:transparent" type="reset" class="aaa" value="Reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
</span>
CSS代码
<span style="font-size:14px Times New Roman;">
.input_class { /*设置class属性名称为input_class的标签内容*/
width:250px;
height:16px;
}
caption{ /*设置caption标签内容*/
font-size:30px;
color:rgb(251, 255, 0);
text-shadow: rgb(153, 0, 255) 6px 0px 5px;
font-stretch: wider;
font-weight: 650;
font-family:Times New Roman;
}
.aaa{ /*设置class属性名称为aaa的标签内容*/
font-size:16px;
font-weight: bold;
font-family:Times New Roman;
}
</span>
JavaScript代码
<span style="font-size:14px;">
//用户名：
var usernameRegex = /^\w{3,15}$/;
//密码：
var passwordRegex = /^\w{6,12}$/;
//邮箱：
var emailRegex = /^\w+@\w+(\.\w+)+$/;
//真实姓名：
var realNameRegex = /^[\u4e00-\u9fa5]{2,5}$/;
function validateForm(){ //定义validateForm方法用于客户端校验
var flag = true;
//校验用户名
var usernameNode = byId("username"); //获得ID值为username的节点对象
var username = usernameNode.value; //获得usernameNode节点的值，即用户在username文本框内填写的值
if(!usernameRegex.test(username)){ //验证获得到的值是否符合正则表达式
byId("username_span").style.color = "red"; //如果不符合，则将ID值为username_span的节点对象内容变为红色
flag = false; //返回false，不提交
}
//校验密码
var passwordNode = byId("password"); //获得ID值为password的节点对象
var password = passwordNode.value;
if(!passwordRegex.test(password)){
byId("password_span").style.color = "red";
flag = false;
}
//确认密码
var rePasswordNode = byId("rePassword"); //获得ID值为rePassword的节点对象
var rePassword = rePasswordNode.value;
if(!password==rePassword){
byId("rePassword_span").style.color = "red";
flag = false;
}else if(!passwordRegex.test(rePassword)){
byId("rePassword_span").style.color = "red";
flag = false;
}else{
byId("rePassword_span").style.color = "green";
}
//校验邮箱
var emailNode = byId("Email"); //获得ID值为Email的节点对象
var email = emailNode.value;
if(!emailRegex.test(email)){
byId("Email_span").style.color = "red";
flag = false;
}
//校验姓名
var realNameNode = byId("realName"); //获得ID值为realName的节点对象
var realName = realNameNode.value;
if(!realNameRegex.test(realName)){
byId("realName_span").style.color = "red";
flag = false;
}
//校验城市
var cityNode = byId("city"); //获得ID值为city的节点对象
var city = cityNode.value;
if("--请选择--" == city){
byId("city_span").style.color = "red";
flag = false;
}
return flag;
}
function byId(id){ //自定义方法，用于获取传递过来的ID值对应的节点对象
return document.getElementById(id);
}
function checkUsername(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//校验用户名
var username = node.value; //得到传递过来的节点对象的值
if(!usernameRegex.test(username)){ //验证是否符合节点对应的正则表达式
byId("username_span").style.color = "red"; //不符合，相应内容变成红色
}else{
byId("username_span").style.color = "green"; //符合，相应内容变成绿色
}
}
function checkPassword(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//校验密码
var password = node.value;
//alert("111");
if (!passwordRegex.test(password)) {
byId("password_span").style.color = "red";
}
else {
byId("password_span").style.color = "green";
}
}
function checkRePassword(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//确认密码
var rePassword = node.value;
var password = byId("password").value;
//alert(repassword+"***"+password);
if(!password==rePassword){
byId("rePassword_span").style.color = "red";
}else if(!passwordRegex.test(rePassword)){
byId("rePassword_span").style.color = "red";
}else{
byId("rePassword_span").style.color = "green";
}
}
function checkEmail(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
//校验邮箱
var email = node.value;
if(!emailRegex.test(email)){
byId("Email_span").style.color = "red";
}else{
byId("Email_span").style.color = "green";
}
}
function checkName(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
var realName = node.value;
if(!realNameRegex.test(realName)){
byId("realName_span").style.color = "red";
}else{
byId("realName_span").style.color = "green";
}
}
function checkcity(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
var city = node.value;
if("--请选择--" == city){
byId("city_span").style.color = "red";
}else{
byId("city_span").style.color = "green";
}
}
</span>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
