0724 js基础知识 表单验证/注册页面 0725作业

最新推荐文章于 2022-01-10 20:40:11 发布
最新推荐文章于 2022-01-10 20:40:11 发布
阅读量1.8k 收藏 3
点赞数
分类专栏： JS 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fern2018/article/details/81229007
版权

 表单验证
              前端页面提交后台的数据，基本都是通过表单
 


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
       <form name="frm" action="demo03.html" >
       	  用户:<input name="username" onblur="checkName()" />
       	  <span id="username_msg">用户名必须以英文字母开头,由数字，字母，下划线组成
           3~8个字符

       	  </span>
       	  <!--   ^[a-zA-Z]\w{2,7}$-->
       	   <br/>
       	  密码:<input type="password" name="pwd"
             onblur="checkPwd()" 
       	  />
           <span id="pwd_msg">
           	  密码由数字，字母，下划线组成
              6~12个字符

           </span>
           <!--  ^\w{6,12}$-->
       	  <br/>
       	  <input type="button" value="提交" id="btn" 
              onclick="doSubmit()" 
       	  />
       </form>
      <script type="text/javascript">
      	  //检查用户名
      	  function checkName(){
      	  	  //获得消息框
      	  	  var msg_span = 
               document.getElementById('username_msg');
             //获得用户名
             var username = 
             document.frm.username.value.trim();
             //创建正则表达式对象
             var reg = /^[a-zA-Z]\w{2,7}$/;
             if(!reg.test(username)){
                 //不合法
                 //alert("用户名不合法");

                msg_span.innerHTML = "用户名不合法";
                msg_span.style.color = "red";
                return false;
             }
              //验证通过 
             msg_span.innerHTML = "OK";
             msg_span.style.color = "green";
             return true;
      	  }

      	  //检查密码
      	  function checkPwd(){
      	  	//获得消息框
      	  	var pwd_msg 
      	  	= document.getElementById('pwd_msg');
             //获得密码
            var pwd = 
            document.frm.pwd.value.trim();
            //验证的正则表达式
            var reg = /^\w{6,12}$/;
            if(!reg.test(pwd)){
            	 //不合法
            	pwd_msg.innerHTML = "密码不合法";
            	pwd_msg.style.color = "red";
            	return false;
            }
            //验证通过
            pwd_msg.innerHTML = "OK";
            pwd_msg.style.color = "green";
            return true;
      	  }

      	  //做整体验证
      	  //OK才能提交表单
      	  //一个不通过就不能提交
      	  function doSubmit(){
      	  	//获得表单对象
      	  	var fm = document.frm;
      	  	if(checkName() && checkPwd()){
      	  	  //用户名和密码验证都通过
      	  	     fm.submit();//提交表单
      	      }
      	  }

      </script>
        
    </body>
</html>

题目

 

某人想通过一个招聘网站发布自己的求职信息，在发布信息之前需要注册成为这个招聘网站的会员。注册信息包括用户名、密码、性别、出生日期以及电子邮件。在注册之前，要阅读会员协议，只有同意遵守会员协议才可以进行注册。

 

图1 表单验证页面

 

要求：

 

  1. 用户名不能为空
  2. 密码和确认密码不能为空，密码长度不能小于6位
  3. 出生日期必须是数字，月范围1-12，日范围1-31
  4. 电子邮件地址不能为空，必须包含符号“@”和“.”
  5. 必须选中“我同意遵守会员协议”后，注册按钮才可以使用
  6. 使用window.open(  )打开“会员协议”
  7. 在会员协议页面中实现关闭窗口

 

0725作业

个人会员协议


<HTML 
xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>涓汉浼氬憳鍗忚</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<LINK href="css/add.css" type=text/css rel=stylesheet>
<LINK href="css/default.css" type=text/css rel=stylesheet>
<META content="MSHTML 6.00.3790.4106" name=GENERATOR>
</HEAD>
<BODY leftMargin=0 topMargin=0 MARGINHEIGHT="0" MARGINWIDTH="0">
<BR>
<TABLE cellSpacing=0 cellPadding=0 width=700 align=center border=0>
  <TBODY>
    <TR>
      <TD vAlign=top background="images/line.gif" 
      height=5><IMG height=1 src="images/line2.gif" 
      width=441></TD>
    </TR>
    <TR>
      <TD bgColor=#ebebeb><BR>
        <TABLE cellSpacing=0 cellPadding=0 width="90%" align=center border=0>
          <TBODY>
            <TR>
              <TD class=sp><P class=td align=center><STRONG><SPAN 
            class=td>涓汉浼氬憳鍗忚</SPAN></STRONG></P>
                <P 
            class=td>鏈綉绔欏強涓庢湰缃戠珯閾炬帴鐨勭綉绔欙紝浠呮彁渚涙眰鑱屻€佹嫑鑱樺強鍏跺畠涓庢鐩稿叧鑱斾箣鏈嶅姟銆傛眰鑱岃€呫€佹嫑鑱樺崟浣嶄互鍙婂洜鍏跺畠浠讳綍鐩殑杩涘叆鏈綉绔欑殑璁块棶鑰呮帴鍙楁湰鍗忚涔︽潯娆撅紝娉ㄥ唽鎴愪负鑻辨墠浼氬憳锛屽苟閬靛畧鏈崗璁墍杩颁箣鏉℃浣跨敤鏈綉绔欐墍鎻愪緵涔嬫湇鍔°€傚鏋滄偍涓嶆帴鍙楁湰澹版槑涔嬫潯娆撅紝璇峰嬁浣跨敤鏈綉绔欍€傛帴鍙楁湰澹版槑涔嬫潯娆撅紝鎮ㄥ皢閬靛畧鏈崗璁箣瑙勫畾銆� <BR>
                 
                <P>鏈綉涓嶄繚璇佸鏌愪竴绉嶈亴浣嶆弿杩颁細鏈変竴瀹氭暟鐩殑浣跨敤鑰呮潵娴忚锛屼篃涓嶄繚璇佷細鏈変竴浣嶇壒瀹氱殑浣跨敤鑰呮潵娴忚銆傚浜庡叾浠栫綉鍧€閾炬帴鍦ㄦ湰缃戝潃鐨勫唴瀹癸紝鏈綉姒備笉璐熸硶寰嬭矗浠汇€�<BR>
                </P>
                <P class=td>&nbsp;</P>
                <P class=td align=center><STRONG><BR>
                  <INPUT onclick="window.close();" type="submit" value="鍏抽棴绐楀彛" name="Submit2">
                  </STRONG></P></TD>
            </TR>
          </TBODY>
        </TABLE>
        <BR></TD>
    </TR>
    <TR>
      <TD vAlign=bottom background="images/line1.gif" 
      height=5><IMG height=1 src="images/line2.gif" 
      width=441></TD>
    </TR>
  </TBODY>
</TABLE>
<BR>
</BODY>
</HTML>

注册网页



<!DOCTYPE html>
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>注册页面</TITLE>
	<STYLE type="text/css">
		td {
			font-size:14px;
			font-family:Verdana
		}
		.select {
			font-size:14px;
			font-family:Verdana
		}
		.button {
			font-size:14px; 
			font-family:Verdana
		}
		A {
			color:#FF0000
		}
	</STYLE>
	<script>
   		 //1.用户名不能为空
    	function checkUser(){
	  		 //获得用户名
	 		 /*
	 		 var user 
	 		 = document.getElementsByName("txtName")[0].value;*/
	 		var user = document.myform.txtName.value;
	  		if(user.trim()==""){
	  			alert("用户名不能为空");
	  			return false;
	  		}

	  		return true;
		}
	
		//密码和确认密码不能为空，密码长度不能小于6位
		function checkPass(){
	    	//获得密码和确认密码
			/*
			var pass = document.getElementsByName("txtPass")[0].value;
			var rpass = document.getElementsByName("txtRPass")[0].value;*/
			var pass = document.myform.txtPass.value;
			var rpass = document.myform.txtRPass.value;
		
			//密码不能为空
			if(pass.trim()==""){
				alert("密码不能为空");
				return false;
			}

			//密码的长度不能小于六位
			if(pass.trim().length<6){
				alert("密码的长度不能小于6位");
				return false;
			}
		
			//两次密码是否一致
			if(pass.trim()!=rpass.trim()){
				alert("两次密码输入不一致");
				return false;
			}

			return true;
		}
	
		//出生日期必须是数字，月范围1-12，日范围1-31
		function checkDate(){
	  	 	//获得年 月  日
	  	 	var year = parseInt(document.myform.byear.value);
	  		var mon = parseInt(document.myform.bmon.value);
	  		var day = parseInt(document.myform.bday.value);
	  	 	//判断日期是否是数字
	   		if(isNaN(year) || isNaN(mon) || isNaN(day)){
	   			alert("日期必须是数字");
	   			return false;
	   		}
	   
	  		 //月份 1~12
	  		 if(mon<1 || mon>12){
	   			alert("月份必须在1~12范围内");
	   			return false;
	  		 }
	   
	   		//日期 1~31
	  		 if(day<1 || day >31){
	   			alert("日期必须在1~31范围内");
	   			return false;
	  		 }
	   
	   		return true;
		}

		//电子邮件地址不能为空，必须包含符号“@”和“.”
		function checkEmail(){
	    	//获得电子邮箱
	    	var email = document.myform.txtEmail.value;
			//邮箱不为空 
			if(email.trim()==""){
				alert("邮箱不能为空");
				return false;
			}
		
			//邮箱必须包含"@"和"."
			//var reg = /^.+@\w+(\.\w+)+$/;
			if(email.indexOf("@")==-1 || email.indexOf(".")==-1){
				alert("邮箱地址必须包含@和.");
				return false;
			}
			
			return true;
		}
	
		//必须选中“我同意遵守会员协议”后，注册按钮才可以使用
		//必须选中“我同意遵守会员协议”后，注册按钮才可以使用
		function canSubmit(){
	   		 //获得checkbox
			var chk = document.getElementById("chk")
			//获得提交按钮
			var reg = document.getElementById("regist");
	   		 if(chk.checked){
		 		 //同意协议
		 		 reg.disabled = false;
			}else{
		  		//不同意协议
		  		reg.disabled = true;
		}
	}

	
		//重置 -- 考试的时候 不要写这个方法
	function doReset(){
	   //获得表单对象
	   var frm = document.myform;
	   //重置表单
	   frm.reset();
	   canSubmit();
	}


    //整体验证
    function doSubmit(){
    	return checkUser() && checkPass() && checkDate() && checkEmail() 
    }
</script>
</HEAD>

<BODY>
	<button onClick="checkEmail();">测试</button>

	<FORM action="sucRegister.html" name="myform" method="post" 
	onSubmit="return doSubmit();">
	<TABLE width="33%" border="0" cellspacing="0" cellpadding="0" align="center">
    	<TR>
      		<TD colspan="2" align="center">用户信息注册</TD>
    	</TR>

    	<TR>
      		<TD width="35%">用户名:</TD>
     		 <TD width="65%"><INPUT  type="text" size="19"  name="txtName"></TD>
   		</TR>

    	<TR>
   			<TD>密码:</TD>
     		<TD><INPUT type="password" size="20" name="txtPass"></TD>
    	</TR>

    	<TR>
      		<TD>再次输入密码:</TD>
      		<TD><INPUT type="password" size="20" name="txtRPass"></TD>
    	</TR>

    	<TR>
      		<TD>性别:</TD>
      		<TD><INPUT type="radio" name="sex" value="m" checked>男
      		&nbsp;<INPUT type="radio" name="sex" value="f">女</TD>
    	</TR>

    	<TR>
      		<TD>出生日期:</TD>
     		<TD><INPUT type="text" size="4" maxlength="4" name="byear"> 年
       		<INPUT type="text" size="2" maxlength="2" name="bmon">月
        	<INPUT type="text" size="2" maxlength="2" name="bday">日</TD>
        </TR>

    	<TR>
      		<TD>电子邮箱:</TD>
     		 <TD><INPUT type="text" size="19" name="txtEmail"></TD>
  		</TR>

    	<TR>
     		<TD>&nbsp;</TD>
     		<TD><INPUT type="checkbox" value="agree" onClick="canSubmit();"  id="chk">
        	我同意遵守<A href="javascript:window.open('protocol.html');">会员协议</A></TD>
   		</TR>

    	<TR>
     		<TD align="right">&nbsp;</TD>
      		<TD><INPUT type="submit" value="注册" class="button" disabled id="regist">
       		<INPUT type="button" value="重填" class="button"
		 	onClick="doReset();"></TD>
    	</TR>
 	</TABLE>

</FORM>
</BODY>
</HTML>

注册成功提示



<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>注册成功</TITLE>
</HEAD>

<BODY>
<H1>注册成功！！！</H1>
</BODY>
</HTML>

 

 

 

青衣-白扇
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaScript有关练习作业及表单验证技术
09-22
javaScript有关练习作业及表单验证技术
实验4-表单验证及特效.rar
12-26
按照要求完成页面设计及验证，并附源代码 （1）使用表格或DIV+CSS进行页面布局，要求页面整齐美观 （2）设计一个论坛用户注册页面，包括用户名、密码、重复密码、性别、年龄、籍贯（省、市下拉联动）、上传头像、感兴趣的版块（复选框）等相关信息 （3）注册界面使用表单收集信息，所有相关信息选用合适的表单控件等
JavaScript内部测试题
webczw
07-24 1260
 某人想通过一个招聘网站发布自己的求职信息，在发布信息之前需要注册成为这个招聘网站的会员。注册信息包括用户名、密码、性别、出生日期以及电子邮件。在注册之前，要阅读会员协议，只有同意遵守会员协议才可以进行注册。 要求： 1、  用户名不能为空2、  密码和确认密码不能为空，密码长度不能小于6位3、  出生日期必须是数字，月范围1-12，日范围1-314、  电子邮
js验证邮箱
想不出一个好的标题，就用这个吧
03-31 4827
本文代码来自W3school，部分有删改&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;script&gt; function checkEmail(field,alerttxt) { with (field) { ...
HTML/CSS/JS用户注册登陆界面示例（表单验证/验证码生成/敏感词屏蔽/css动画/账号信息储存）
10-30
在前端开发中，构建用户注册登录界面是必不可少的步骤，这个示例项目涵盖了HTML、CSS和JavaScript的基础应用，包括表单验证、验证码生成、敏感词屏蔽以及简单的账号信息处理。以下将详细介绍这些知识点： 1. **HTML...
JavaScript 基础表单验证示例(纯Js实现)
10-19
以上内容包含了实现JavaScript基础表单验证的多个关键知识点和示例代码，涵盖了表单验证的概念、实现思路、代码实现方法和注意事项。通过理解和应用这些知识点，可以在Web开发中有效地实现前端表单验证功能。
JavaScript实现仿网易通行证表单验证
10-24
在实现仿网易通行证表单验证的过程中，我们将会涉及到很多前端技术，包括但不限于HTML、CSS以及...掌握这些知识点，对前端开发者来说是非常重要的，它们是构建一个用户体验良好、数据安全可靠的表单验证系统的基础。
js表单注册实现页面登录信息提示（附:阻止页面跳转）
01-08
了解这些基础知识后，你可以根据实际需求扩展验证规则，比如检查邮箱格式、密码强度等，或者使用更复杂的表单验证库来增强用户体验。在实际开发中，考虑到用户体验，还可以添加更友好的错误提示方式，如使用非模态...
原生js仿京东注册页面表单验证代码
09-22
本项目名为“原生js仿京东注册页面表单验证代码”，其主要目标是利用JavaScript实现一个与京东注册页面类似的表单验证功能。下面将详细探讨相关知识点。 1. **表单元素与事件监听**： - 在HTML中，表单元素如`...
javascript.html实现表单验证
03-16
附属：js文件附属:JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1] JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2] JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。
关于网站发布的一些问题
qq_26905059的博客
10-17 289
今天经过老师们的提点发现了阿里云很坑的一个地方，就是80端口居然默认不开放，经过修改安全组规则后网站连接失败问题解决（错误代码ERR_EMPTY_RESPONSE）。 随后在发布网站的过程中，发现修改/usr/local/nginx/conf/nginx.conf文件中网站根目录后刷新网站，根目录仍然为/home/wwwroot/default。解决办法是：重启nginx（捂脸） 新问题出现：重启n
要求用户输入一个电子邮件。验证电子邮件格式是否正确。 电子邮件格式：XX@XX.com 实现方式：该字符串中必须包含"@"字符串和"."字符串。 "@"不能出现在第一个位置，并且"@"位置大于"."；
xiaozhang___的博客
04-16 9080
要求用户输入一个电子邮件。验证电子邮件格式是否正确。电子邮件格式：XX@XX.com实现方式：该字符串中必须包含"@"字符串和"."字符串。"@"不能出现在第一个位置，并且"@"位置大于"."；而且"@"和"."之间要有内容。"."以后的字符串必须是com或cn或net。package lovo;import javax.swing.JOptionP
js正则：身份证简单验证，邮箱验证，密码验证
weixin_58659448的博客
08-08 210
身份证验证 1.1 地址码规则： 地址码长6位 以数字1-9开头 后5位为0-9的数字 根据以上规则，写出地址码的正则表达式： /^[1-9]\d{5}/ 1.2 年份码规则： 年份码长4位 以数字18，19或20开头 剩余两位为0-9的数字 根据以上规则，写出年份码的正则表达式： /(18|19|20)\d{2}/。如果不需要18开头的年份，可以去掉18。 1.3 月份码规则： 月份码长2位 第一位数字为0，第二位数字为1-9 或者第一位数字为1，第二位数字为0-2 根据以上规则，
JavaScript中的表单验证
ren__wei_的博客
01-10 5716
文章目录1.什么是表单验证2.常见的表单验证 1.什么是表单验证 大多数网站的注册页面中，都会要求用户输入生日，我们知道日期的格式是yyyy-MM-dd并且由数字组成，中间不允许出现字母或是其他符号，如果填写格式与日期格式不符合，name注册将失败，这种操作就是表单验证的体现。 表单验证就是js在数据被送往服务器前，对html表单中的数据进行验证的过程，在验证所有信息均符合要求之后，经表单提交到服务器由服务器进行数据处理。常见的表单验证有：表单中的必填项目、输入的邮件是否合法，输入日期是否合法等。 2.常见
复选框选中 按钮才有效果(场景：注册页面 同意XX协议勾选上才能点击注册按钮)
zlzy_myeclipse的博客
03-10 8775
jsp相关代码： &lt;form action="test/regist" method="post"&gt;&lt;input name="ck" onclick="doJudge()" id="ck" type="checkbox" value=""&gt;已阅读并同意&lt;a&gt;《XX使用协议》&lt
北大青鸟JavaScript第二章上机练习3
qq_41846601的博客
12-18 4476
验证邮箱地址有效性： 邮箱验证
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值