JavaScript、CSS、HTML 实现用户注册页面与信息校验

最新推荐文章于 2024-06-16 23:02:16 发布

「已注销」

最新推荐文章于 2024-06-16 23:02:16 发布

阅读量4.8w

点赞数 51

分类专栏： ● 编程语言 ------【HTML】 ------【JavaScript】 JavaWeb 文章标签：用户注册页面实现 html javascript css JavaWeb

本文链接：https://blog.csdn.net/fightfaith/article/details/50277337

版权

● 编程语言同时被 3 个专栏收录

82 篇文章 2 订阅

订阅专栏

JavaWeb

12 篇文章 0 订阅

订阅专栏

------【HTML】

2 篇文章 0 订阅

订阅专栏

需求：实现用户注册页面并作出逻辑校验。要求：

　　（1）完成注册页面样式如下：

　　（2）页面提交，用户注册信息不符合规范，要显示红色提示框，如下：

　　（3）页面提交，用户注册信息不符合规范，要显示绿色提示框，如下：

　　分析：HTML实现页面元素，CSS做页面美化，JavaScript 实现逻辑校验；用户注册规则采用正则表达式。

1、HTML实现注册页面。

　　注：在本文中，对代码的详细解释都放在了相应的代码旁边注释内，类似代码不重复注释。

<span style="font-size:14px;">
<!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=GBK"> <!-- HTTP标题信息(HTTP-EQUIV) -->
		<title>用户注册页面</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 >用户注册</caption>
				<tr>
					<td align="right">
						<sup><font color="red">*</font></sup>用户名：
					</td>
					<td><input type="text" name="username" id="username" class="input_class" οnblur="checkUsername(this)" /><span id="username_span">用户名由3-5个字符组成</span></td>					
				</tr>
				
				<tr>
					<td align="right">
						<sup><font color="red">*</font></sup>密码：
					</td>
					<td><input type="password" name="password" id="password" class="input_class" οnblur="checkPassword(this)" /><span id="password_span">请输入8-12位密码</span></td>					
				</tr>
				
				<tr>
					<td align="right">
						<sup><font color="red">*</font></sup>确认密码：
					</td>
					<td><input type="password" name="rePassword" id="rePassword" class="input_class" οnblur="checkRePassword(this)" /><span id="rePassword_span">两次密码不一致</span></td>					
				</tr>
				
				<tr>
					<td align="right">
						<sup><font color="red">*</font></sup>Email：
					</td>
					<td><input type="text" name="Email" id="Email" class="input_class" οnblur="checkEmail(this)" /><span id="Email_span" >格式示例：xxxxxxxx@163.com</span></td>					
				</tr>
				
				<tr>
					<td align="right">
						<sup><font color="red">*</font></sup>真实姓名：
					</td>
					<td><input type="text" name="realName" id="realName" class="input_class" οnblur="checkName(this)" /><span id="realName_span">由2-5个中文组成</span></td>					
				</tr>
				
				<tr>
					<td align="right">
						<sup><font color="red">*</font></sup>省份：
					</td>
					<td><select name="province" id="province" οnblur="checkProvince(this)">
						<option value="--请选择--">--请选择--</option>
						<option value="河北">河北</option>
						<option value="山西">山西</option>
						<option value="山东">山东</option>
						<option value="海南">海南</option>
					</select><span id="province_span">请选择省份</span></td>					
				</tr>
				
				<tr>
					<td align="left" colspan="2">
						<sup><font color="red">*</font></sup>技术方向：
					<input type="radio" name="jishu" id="Java" value="Java" checked="checked" />Java <!-- 技术方向默认选中Java -->
					<input type="radio" name=".jishu" id=".net" value=".net" />.net
					<input type="radio" name="jishu" id="PHP" value="PHP" />PHP
					<input type="radio" name="jishu" id="网页" value="网页" />网页
					<input type="radio" name="jishu" id="IOS" value="IOS" />IOS
					</td>					
				</tr>
				
				<tr>
					<td align="center" colspan="2">  <!-- 合并两列 -->
						<input type="submit" class="aaa" value="注册" />
						<input type="reset" class="aaa" value="重置" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

</span>

2、CSS进行页面美化。

　　在本文 CSS 代码中主要根据类选择器、标签选择器来设置相应的标签样式：

<span style="font-size:14px;">
.input_class {  /*设置class属性名称为input_class的标签内容*/
	width:250px;
	height:16px;	
}

caption{        /*设置caption标签内容*/
	font-size:30px;
	color:red;
	text-shadow: yellow 6px 0px 5px; 
	font-stretch: wider;
	font-weight: 900; 
}

.aaa{          /*设置class属性名称为aaa的标签内容*/
	font-size:16px;
	font-weight: bold;
}

</span>

3、JavaScript 进行逻辑校验。

　　在JavaScript 代码中需要用到正则表达式来简化验证：

<span style="font-size:14px;">
/**
 * @author 胡根得 
 * 2015/12/08
 */

		//用户名：
		var  usernameRegex = /^\w{3,15}$/;
		//密码：
		var passwordRegex = /^\w{6,12}$/;
		//邮箱：
		var emailRegex = /^\w+@\w+(\.\w+)+$/;
		//真实姓名：
		var realNameRegex = /^[\u4e00-\u9fa5]{2,5}$/;
		
		//alert("222");
		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 provinceNode = byId("province");  //获得ID值为province的节点对象
			var province = provinceNode.value;
			if("--请选择--" == province){
				byId("province_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 checkProvince(node){  //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范
			var province = node.value;
			if("--请选择--" == province){
				byId("province_span").style.color = "red";
			}else{
				byId("province_span").style.color = "green";
			}
		}

</span>

　　小结：该文主要介绍了web中客户端用户注册的页面实现与校验功能，希望能够帮助到相关的小伙伴们。技术永无止境，有什么宝贵意见也请大家不吝赐教。

「已注销」

关注

51
点赞
踩
266

收藏

觉得还不错? 一键收藏
8
评论
JavaScript、CSS、HTML 实现用户注册页面与信息校验

需求：实现用户注册页面并作出逻辑校验。要求：　　（1）完成注册页面样式如下：　　（2）页面提交，用户注册信息不符合规范，要显示红色提示框，如下：　　（3）页面提交，用户注册信息不符合规范，要显示绿色提示框，如下：　　分析：HTML实现页面元素，CSS做页面美化，JavaScript 实现逻辑校验；用户注册规则采用正则表达式。1、HTML实现注册页面。　　注：
复制链接

扫一扫

专栏目录