JavaScript定义注册页面

最新推荐文章于 2023-06-17 23:43:15 发布
最新推荐文章于 2023-06-17 23:43:15 发布
阅读量4.9k 收藏 27
点赞数 12
分类专栏： JavaScript基础学习 文章标签： java javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52348906/article/details/121441008
版权


项目场景：

考察如下：

获取字符串类型的表单数据

使用字符串对象方法验证用户输入信息的合法性

表单提交时使用onsubmit事件触发验证函数


问题描述：

(1)用户名是由英文字母和数字组成的4～16位字符，以字母开头。加载页面时提示相应信息如图所示。
(2)密码由4～10位字符组成，加载页面时提示相应信息，密码和确认密码必须一致。
(3)电子邮箱信息必须包含“@”符号和“.”符号，且“@”符号不能在第1位，必须在“.”符号前面。
(4)手机号码必须是11位数字，且由1开头。
(5)生日按1985-05-01格式输入，输入的月为1～12，输入的日为1～31。
(6)单击“注册完成”按钮时，如果页面信息输入正确，则提交表单；否则不提交。


解决方案：

先将静态页面的HTML 和CSS代码放出来：

<!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"; charscharset="gb2312">
		<title>注册页面</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
	<table class="main" border="0" cellpadding="0" cellpadding="0">
		<tr>
			<td><img src="../img/logo.jpg" width="150" height="57" alt="logo"/>
				<img src="../img/banner.jpg" width="375" height="57" alt="banner"/>
			</td>
		</tr>
		<tr>
			<td class="hr_1">新用户注册</td>
		</tr>
		<tr>
			<td style="height: 10px;"></td>
		</tr>
		<form action="" method="post" name="myform" >
			<tr>
			  <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
			  <td class="left">用户名</td>
			  <td class="center"><input id="user" type="text" class="inputClass" onblur="checkUser()" /></td>
			  <td><div id="user_prompt">用户名由4-16位字符组成，不能包含数字</div></td>
			</tr>
			<tr>
			  <td class="left">密码</td>
			  <td class="center"><input id="pwd" type="password" class="inputClass"  onblur="checkPwd()"/></td>
			  <td><div id="pwd_prompt">密码由4-10位字符组成</div></td>
			</tr>
			<tr>
			  <td class="left">确认密码</td>
			  <td class="center"><input id="repwd" type="password" class="inputClass"  onblur="checkRepwd()"/></td>
			  <td><div id="repwd_prompt"></div></td>
			</tr>
			 <tr>
			  <td class="left">电子邮箱</td>
			  <td class="center"><input id="email" type="text" class="inputClass"  onblur="checkEmail()"/></td>
			  <td><div id="email_prompt">邮箱格式实例：web@126.com</div></td>
			</tr>
			  <tr>
			  <td class="left">手机号码</td>
			  <td class="center"><input id="mobile" type="text" class="inputClass" onblur="checkMobile()" /></td>
			  <td><div id="mobile_prompt">手机号码必须是11位数字，且由1开头</div></td>
			</tr>
			<tr>
			  <td class="left">出生日期</td>
			  <td class="center"><input id="birth" type="text" class="inputClass"  onblur="checkBirth()"/></td>
			  <td><div id="birth_prompt">请按xxxx-xx-xx输入出生日期</div></td>
			</tr>
			 <tr>
			  <td class="left">&nbsp;</td>
			  <td class="center"><input name="" type="image" src="images/register.jpg" /></td>
			  <td>&nbsp;</td>
			</tr>
		</form>
	</table>
	</body>
</html>

 接下来就要定义验证函数：

接下来就要定义验证函数：

现完整代码如下：


		<script type="text/javascript">
			//定义该函数，用于根据id获取页面元素
			function getId (elementId){
				return document.getElementById(elementId);
			}
			//定义验证用户名的函数
			//<input id="user" type="text" class="inputClass" onblur="checkUser()" />
			function checkUser(){
				var user = getId("user").value;
				var userid = getId("user_prompt");
				userid.innerHTML=""; //向对象插入内容；
				if(user.length<4 || user.length>16){
					userid.innerHTML="请输入4-16位字符"
					return false;
				}
				for(var i=0;i<user.length;i++){
					if(!isNaN(user.charAt(i))){
						userid.innerHTML="用户名中不能包含数字";
						return false;
					}
				}
				return true;
			}
			//定义验证密码的函数
			//<input id="pwd" type="password" class="inputClass" onblur="checkPwd()"/<div id="pwd_prompt"
			function checkPwd(){
				var pwd = getId("pwd").value;
				var pwdid = getId("pwd_prompt");
				pwdid.innerHTML="";
				if(pwd.length<4 || pwd.length>10){
					pwdid.innerHTML="请输入4-10位字符";
					return false;
				}
				return true;
			}
			//<input id="repwd" type="password" class="inputClass"  onblur="checkRepwd()"/>
			function checkRepwd(){
				var pwd = getId("pwd").value;
				var repwd = getId("repwd").value;
				var repwdid = getId("repwd_prompt");
				if(pwd!=repwd){
					repwdid.innerHTML="2次输入密码不一致";
					return false;
				}
				return true;
			}
			//定义验证电子邮箱的的函数
			//<input id="email" type="text" class="inputClass"  onblur="checkEmail()
			function checkEmail(){
				var email = getId("email").value;
				var emailid = getId("email_prompt");
				emailid.innerHTML="";
				var index = email.indexOf("@");
				if(index == -1){
					emailid.innerHTML="输入的邮箱格式应该包含@"；
					return false;
				}
				if(email.indexOf(".",index) == -1){
					emailid.innerHTML="“@”符号不能在第1位，必须在“.”符号前面";
					return false;
				}
				return true;
			}
			//定义验证手机号
			//<input id="mobile" type="text" class="inputClass" onblur="checkMobile()" />
			function checkMobile(){
				var mobile =getId("mobile").value;
				var mobileid = getId("mobile_prompt");
				mobileid.innerHTML="";
				if(mobile.length!=11){
					mobile.innerHTML="输入号码长度应该为11";
					return false;
				}
				if(mobile.charAt("0"!=1)){
					mobile.innerHTML="输入号码开头应该为1";
					return false;
				}
				return true;
			}
			//定义验证生日日期
			//<input id="birth" type="text" class="inputClass"  onblur="checkBirth()"
			var birth = getId("birth").value;
				var birthId = getId("birth_prompt");
				birthId.innerHTML="";
				if(birth.length!=10 || birth.charAt(4)!="-" || birth.charAt(7)!="-"){
					birthId.innerHTML="出生日期输入格式有误";
					return false;
				}
				var birthdays = birth.split("-");
				year = parseInt(birthdays[0],10);
				month = parseInt(birthdays[1],10);
				day = parseInt(birthdays[2],10);
				var now = new Date();
				nowYear = now.getFullYear();
				if(isNaN(year) || isNaN(month) || isNaN(day)){
					birthId.innerHTML="出生日期不能包含字符";
					return false;
				}
				if(year <= 1900 || year >nowYear){
					birthId.innerHTML="出生年份输入有误";
					return false;
				}
				if(month <= 0 || month >12){
					birthId.innerHTML="出生年份输入有误";
					return false;
				}
				if(day <= 0 || day >31){
					birthId.innerHTML="出生年份输入有误";
					return false;
				}
				return true;
			}
			// 定义验证所有内容的函数
			function checkAll(){
				if(checkUser && checkPwd() && checkRepwd() && checkEmail() && checkMobile() && checkBirth()){
					//所有函数返回true时提交表单
					return true;
				}
				else{
					return false;
				}
			}
		</script>

将以上script标签内的内容添加到HTML和css代码里面，即可实现

简单点*⸜( •ᴗ• )⸝*
关注
  • 12
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
[HTML+CSS+JS] 实现注册登录页面，全网最全
2301_76379381的博客
04-05 1531
今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。易碰到天花板技术停滞不前！**
使用原生js写一个简单的注册登录页面
热门推荐
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
【JavaScript】案例1：使用JS完成注册页面校验
专注于Java领域开发 关注我 带你玩转Java
07-30 7341
使用JS完成注册页面校验
Javascript_String对象
web_good的博客
05-08 97
// String 对象// 功能：处理文本（字符串）var str = new String("Hello world!");// 直接打印输出的是一个对象，内容是0 H...console.log(str.toString()); // toString转换为字符串var str = "Hello world"; // 简单创建console.log(str);console.log(str....
注册页面代码
2301_77519113的博客
06-17 182
input type="password" class="form-control" id="" placeholder="请输入密码" onblur="checkPsw()"><input type="text" class="form-control" id="" placeholder="请输入用户名" onblur="checkName()"><input type="radio" name="sex" id="input" value="F" checked="checked">女。
JavaScript小练习：制作一个简易的注册页面
qq_47863425的博客
04-26 5511
要求：用户可以填写用户名，密码，性别，爱好，籍贯，个人描述。其中用户名，密码，性别，籍贯为必填项，在必填项之前有红色的*号标注，若必填项没有填写，则点击注册按钮后，必填项后面会显示红色的提示文本。 效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten...
JavaScript 完成注册页面表单校验的实例
12-10
1、步骤分析 第一步：确定事件(onsubmit)并为其绑定一个函数 第二步：书写这个函数(获取用户输入的数据&...2、完成注册页面表单校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">
HTML5注册页面示例代码
09-28
该示例代码涵盖了基本的注册页面布局、CSS 样式、JavaScript interaction 等多个方面。 HTML5 文件结构 在 HTML5 中，文件结构是一种特殊的结构，它定义了 HTML 文档的基本结构。该结构由 `<!DOCTYPE html>` 声明...
利用MS AJAX注册Javascript命名空间并创建类
10-30
总结一下，利用MS AJAX注册JavaScript命名空间并创建类，我们可以更好地组织和管理代码，避免命名冲突，并利用ASP.NET AJAX库提供的高级功能。通过上述步骤，我们创建了一个名为`Demo.Person`的类，它包含一些属性和...
基于Javascript实现弹出页面效果
10-23
首先，我们需要理解弹出层的核心特点，即在用户点击特定元素（如“登录”或“注册”）时，在页面中央弹出一个半透明的遮罩层，并在其之上显示登录或注册表单。 **遮罩层的实现** 1. 遮罩层通常是一个全屏黑色背景，...
js注册界面
11-23
一个简单的注册界面验证，如果输入正确会返回输入的用户名和密码，如果没有填写会提示填写完整。
注册页面验证js
06-30
注册页面验证js
简单的登录注册页面 实现js验证
06-30
简单的登录注册页面 使用的是sqlserver2005 包含sql语句。
js作业新用户注册页面.zip
08-27
js作业新用户注册页面.zip
WEB基本网页代码（含登录、注册、信息维护等）
06-10
自己做的最简单的网页，有登录、注册、信息维护、密码找回、查看个人信息等功能，含加密与解密。数据库的创建为 Create table userinfo( Username varchar primary key, Pwd varchar, Gender varchar, Email varchar, Question varchar, Answer varchar)
HTML绘制用户注册页面
09-28
在本文中，我们将深入探讨如何使用HTML来创建一个用户注册页面。HTML（超文本标记语言）是网页开发的基础，用于定义网页的结构和内容。下面我们将详细分析给定的代码片段，了解其组成部分和功能。 首先，我们看到...
用javascript制作简易的QQ登录网页
qq_41672008的博客
01-23 3667
简易的QQ登录网页，有登录，注册，修改密码等功能。 要创建6个html文件，每个文件有很详细的注释： 1.创建qqmodal.html，文件代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8"&gt;         &lt;title&gt;&lt;/title&am
html+CSS的QQ注册界面练习
weixin_43431593的博客
05-10 1万+
html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QQ注册</title> <link rel="stylesheet" type="text/css" href="./css/register.css"> </head> <body> <div id="left_div"> &
酒店登陆注册页面javascript代码
最新发布
07-04
当然，我可以帮你提供一个简单的酒店登陆注册页面的JavaScript代码示例。以下是一个基本的示例： ```javascript // 登录函数 function login() { // 获取输入的用户名和密码 var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 进行登录验证（这里是一个简单的示例） if (username === "admin" && password === "password") { alert("登录成功！"); // 在这里可以进行登录成功后的操作，比如跳转到用户主页 } else { alert("用户名或密码不正确！"); } } // 注册函数 function register() { // 获取输入的用户名和密码 var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 进行注册逻辑（这里是一个简单的示例） alert("注册成功！"); // 在这里可以进行注册成功后的操作，比如跳转到登录页面 } ``` 以上代码定义了一个`login`函数和一个`register`函数，分别用于处理登录和注册操作。你可以根据具体需求进行修改和扩展。 请注意，这只是一个简单的示例，实际的登录和注册逻辑可能更加复杂，需要与后端进行交互，并进行安全性验证等。此外，前端的HTML和CSS代码也需要编写，以构建完整的登录注册页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

简单点*⸜( •ᴗ• )⸝*

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值