用div+css设计注册界面,js校验输入用户名、密码、Email、年龄、邮编的合法行

最新推荐文章于 2024-02-29 20:36:42 发布

原创最新推荐文章于 2024-02-29 20:36:42 发布 · 8.4k 阅读

25 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css+div设计注册界面 #js验证输入合法行 #js内嵌式

html 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何使用div+css设计一个注册界面，并通过js进行用户名、密码、Email、年龄和邮编的合法性校验。内容包括校验规则，如用户名8-10位，密码6-8位，邮箱格式验证，年龄限制在0-150，邮编为6位数字。同时提供js内嵌式语句的使用提示和表单对齐的技巧。

用div+css设计注册界面

1. js校验输入用户名、密码、Email、年龄、邮编的合法行

2.校验具体要求如下：

用户名长度为8-10位；密码为6-8位；Email必须是一个合法的邮箱；年龄为0-150的整数；邮编为6位数字。

界面如下图（黄色字体部分不是哈哈哈！😊😊）

ヾ(≧▽≦*)o哈哈下面直接给出代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>sunny的设计</title>

    <style>
	.mxl_bigbox_10{margin-left:30%;
				 padding-left: 10%；	
				 margin-right:30%;
	}
	.mxl_innerbox_10{
		margin-left: 20%;

	}
	h1{text-align: center;
	   background-color:#C0C0C0;
	   width:60%;
	   color:white;
	   font-size: 30px;
	}
    </style>
</head>

	
<body>
	
<div class="mxl_bigbox_10">
	<h1>用户注册</h1>
	<div class="mxl_innerbox_10">
	<form action="#" method="post" ="" id= "form" >
    用户名：<input type="text" id="username" ><br>
    密码：　<input type="password" id="key"><br>
    Email:　 <input type="email" id="email"><br>	
    年龄：　<input type="text" id="age"><br>
    性别：<input type="radio" checked="checked">男<input type="radio">女<br>
    邮编：　<input type="text" id="youbian"><br><br>
            
            <input type="submit">
            <input type="reset">
    </div>
 </div>
    </form>
  <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="知识共享许可协议" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />本作品采用<a rel="license" href="http://creativecommons.org/licenses/by/4.0/">知识共享署名 4.0 国际许可协议</a>进行许可。  
</body>
</html>



　　<script >
// onfocus（焦点聚焦事件）、onblur（焦点离开事件）、
// onkeyup（按键抬起的事件）
   
		  
// 校验用户名 
  function confirmName(){
	// 获取用户名
  var name=document.getElementById("username");
  name.οnblur=function(){
    if((name.value).length!=0){
     //定义正则表达式要求输入8-9个数字
      reg=/^\d{8,9}$/;
   		 if(!reg.test(name.value)){
        alert("对不起，输入的用户名限8-9个数字 ");
       }   
     }
   }
}
// 校验邮箱
  function confirmEmail(){
	// 获取用户名
  var email=document.getElementById("email");
  email.οnblur=function(){
    if((email.value).length!=0){
     //定义正则表达式
       reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
   		 if(!reg.test(email.value)){
        alert("对不起，您输入的邮箱格式不正确 ");
       }   
     }
   }
}
//年龄验证
 function confirmAge(){
	// 获取用户名
  var age=document.getElementById("age");
  age.οnblur=function(){
    if((age.value).length!=0){
     //定义正则表达式
      reg= /^(?:0|[1-9][0-9]?|150)$/;
    	if(!reg.test(age.value)){
        alert("对不起，请输入0-150的整数 ");
       }   
     }
   }
}

//邮编验证
 function confirmYoubian(){
	// 获取邮编
  var youbian=document.getElementById("youbian");
  youbian.οnblur=function(){
    if((youbian.value).length!=0){
     //定义正则表达式(6位数字)
      reg=/^\d{6}$/;
    	if(!reg.test(youbian.value)){
        alert("对不起，请输入6位数 ");
       }   
     }
   }
}


//js页面加载
// 1.window.onload = function(){}; —-js 
// 2.$(window).load(function(){});——Jquery 
//1、2表示：页面全部加载完成（引用文件，图片）
//         在加载内部函数，且只能执行一个
//        （当文件由多个onload或者load，只加载最后一个）。 
window.οnlοad=function(){
  confirmName();
  confirmEmail();
  confirmAge();
  confirmYoubian();
};

	</script>