【JS】制作注册页面

使用js制作注册页面，使用正则表达式验证该数据是否符合要求

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>注册页面</title></head><body><div class="box" id="box"><h2>注册</h2><!--请求方式设置为get--><form id="form" action="" method="get"><ul><li><label><span>*</span>用户名：</label><!--设置输入框的提示信息--><input type="text" name="username" placeholder="只能输入6-20个字母、数字、下划线" id="username" /></li><li><label><span>*</span>电子邮箱：</label><input type="text" name="email" placeholder="输入正确的电子邮箱地址" id="email" /></li><li><label><span>*</span>密码：</label><!--输入类型设置为密码类型--><input type="password" name="pwd" placeholder="由字母开头，包含字母、数字、下划线，6-16位" id="pwd" /></li><li><!--设置行内元素标签--><label><span>*</span>确认密码：</label><input type="password" name="pwdOk" placeholder="确认密码必须与密码一致" id="pwdOk" /></li></ul><!--绑定表单提交方法--><button type="button" onclick="formSubmit()">提交</button></form></div></body>
</html>

css页面

         body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{margin: 0;padding: 0;}ul{list-style: none;}input{border:0;}.clear:after{content: "";display: block;clear: both;}.box{width: 500px;margin:30px auto;padding:30px 40px;border:1px solid #ddd;box-shadow: 0 0 10px #bbb;box-sizing: border-box;}.box h2{text-align: center;color:#666;font-size: 22px;line-height: 40px;}.box form{padding:15px 0;}.box form ul li{display: flex;height: 40px;line-height: 40px;margin-bottom: 15px;}.box form ul li input{border:1px solid #ddd;height: 38px;padding:0 10px;line-height: 38px;flex:1;box-sizing: border-box;}.box form ul li label{display: block;width: 120px;}.box form ul li label span{color:red;padding-right:10px;}.box form button{width: 100%;border:none;height: 40px;background-color: green;color:#fff;}

js页面

         //自定义验证用户名的方法function validate_strLenght(str){var regExp=/^(\w){6,20}$/;return regExp.test(str);}//自定义验证email方法function validate_email(str){var regExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;return regExp.test(str);}//自定义验证密码的方法function validate_pwd(str){var regExp=/^[a-zA-Z]\w{5,15}/;return regExp.test(str);}//根据表单控件的id填写var username=document.getElementById("username");//通过id获取元素var email=document.getElementById("email");//根据表单控件pwd的id填写var pwd=document.getElementById("pwd");var pwdOk=document.getElementById("pwdOk");//通过标签名获取元素var form=document.getElementsByTagName("form")[0];//表单提交function formSubmit(){//使用自定义方法验证用户名、验证邮箱if(validate_strLenght(username.value)&&validate_email(email.value)&&validate_pwd(pwd.value)&&checkOk()){//调用表单提交方法document.getElementById("form").submit() ;alert("登录成功");}else{//控制台输出console.log("验证失败");}}//检查用户名username.onblur=function(){if(validate_strLenght(username.value)){console.log("用户名符合要求");}else{console.log("用户名不符合要求");}}//检查emailemail.onblur=function(){if(validate_email(email.value)){console.log("邮箱格式符合要求");}else{console.log("邮箱格式不符合要求");}}//密码框失去焦点的时候pwd.onblur=function(){if(validate_pwd(pwd.value)){console.log("密码符合要求");}else{console.log("密码不符合要求");}}function checkOk(){if(pwd.value==pwdOk.value){console.log("密码与重复密码一致");return true;}else{console.log("密码与重复密码不一致");return false;}}pwdOk.onkeyup=checkOk;

【JS】制作注册页面相关推荐

利用 HBuilderX 制作新闻列表页以及制作注册页面
一.制作新闻中心板块样式实践任务:制作新闻列表页 1.在web2项目文件夹中,创建一个空白网页文件,命名为news.html 2.网页文件用于展示一些新闻标题的列表,其中包含标题标签和列表标签 3. ...
HTML制作注册页面
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
制作注册页面（HTML）
一.项目成品二.案例说明本项目考察的是对于表格.列表(无序).表单标签的综合运用, 首先我们要写把这个整体看做是一个大表格,每行两列,分很多行我们的所有步骤都是基于一个表格每行两列的情况下,开始 ...
使用js完成注册页面验证-注册有返回值的onsubmit事件函数
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>注册页 ...
【HTML、CSS、JS】注册页面实现（带验证码，密码强度验证，表格提交验证等）
由于是个刚学这方面的菜鸡,所以好多代码都是从各个大佬那儿粘贴复制过来的orz,边搬运边学习吧可以说是.以下为部分参考.图片字体我都在网上找的,没有商用应该不犯法吧quq 密码强度检测:https:// ...
JS完成注册页面的省市联动（JS内置对象全局函数，select标签操作）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
【JavaScript】案例1：使用JS完成注册页面校验
jsp网页制作html页面,JSP制作静态网页.ppt
JSP制作静态网页 JSP制作静态网页主要内容 1 制作网站的原型 2 制作注册页面 2.1 HTML的常用标签 2.2 CSS简介 2.3 使用HTML+CSS制作注册页面 2.4 JavaScr ...
html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查 ...

【JS】制作注册页面

【JS】制作注册页面相关推荐

最新文章

热门文章