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

原创 于 2018-07-28 15:09:02 发布 · 1.9k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js

本文介绍了一个具体的表单验证实例，包括用户名、密码等字段的有效性校验，以及使用JavaScript实现这些功能的方法。此外，还涉及了如何确保用户同意服务条款才能提交表单。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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


<!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>

 

 

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值