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

编程入门行业动态更新时间:2024-10-23 07:20:33

用div+css设计注册界面,js校验<a href=https://www.elefans.com/category/jswz/34/1686191.html style= 输入用户名、密码、Email、年龄、邮编的合法行"/>

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

用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=".0/"><img alt="知识共享许可协议" style="border-width:0" src=".0/88x31.png" /></a><br />本作品采用<a rel="license" href=".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>