JavaScript实现注册功能

1：直接效果图
当页面上所有input输入框内的内容全部符合正则表达式时，才可以注册成功
1.1当所有内容全部正确是
1.2：当所有内容全部正确时，并注册成功

1.3：当所有内容输入后，并且至少有一个没有成功后，注册页面失败后

2：代码
2.1：html代码

<body id="body"><br /><br /><br /><br /><br /><br /><br /><br /><div id="div">用&nbsp;&nbsp;户&nbsp;&nbsp;名：<input class="input" type="text" id="userName" οnblur="regName()"  /><span id="userNameReg"></span></div><br /><div id="div">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input class="input" type="password" id="pwd" οnblur="regpwd()" /><span id="pwdReg"></span></div><br /><div id="div">确认密码：<input class="input" type="password" id="conpwd" οnblur="regconpwd()"/><span id="conpwdReg"></span></div><br /><div id="div">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：<input class="input" type="text" id="mailbox" οnblur="regmailbox()" /><span id="mailboxReg"></span></div><br /><div id="div">手&nbsp;&nbsp;机&nbsp;&nbsp;号：<input class="input" type="text" id="cellphone" οnblur="regphone()" /><span id="cellphoneReg"></span></div><br /><div id="div">身份证号：<input class="input" type="text" id="identity" οnblur="regidentity()" /><span id="identityReg"></span></div><br /><div id="div">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：<input class="input" type="text" id="address" οnblur="regaddress()" /><span id="addressReg"></span></div><br /><br /><br /><div><input id="btn" type="button" οnmοuseοver="chengColor('red')"οnmοuseοut="chengColor('#000')" value="校验" οnclick="regbtn()"/></div></body>

2.1:css样式

<style type="text/css">#div{margin-top: 40px;margin-left: 1800px;font-size: 50px;height: 40px;}#btn{width: 500px;height:120px;font-size: 40px;margin-left:2000px ;background-color: #E9E9E9;border-radius: 15px;border:1px solid #000}.input{font-size: 50px;width: 500px;height: 60px;border-radius: 15px;border:1px solid #000;background: #FCFBF9;}#body{background-image: url(timg.jpg);background-repeat: no-repeat;background-size: cover;background-attachment: fixed;}</style>

2.3：JavaScript代码

**<script type="text/javascript">//改变but字体颜色function chengColor(color){document.getElementById("btn").style.color=color;}//判断用户名function regName(){var userNameRule =  /^[A-Z]{1}[A-Za-z_]{5,19}/;reg("userName",userNameRule);// return true;}//判断密码function regpwd(){var pwdRule=/^[A-Z][A-z0-9\.]{7,14}$/;reg("pwd",pwdRule);// return true;}//确认密码function regconpwd(){var conpwdRule=/^[A-Z][A-z0-9\.]{7,14}$/;reg("conpwd",conpwdRule);return true;}//判断邮箱格式   function regmailbox(){var mailboxRule =/^[A-z0-9]+@[A-z0-9]+\.[a-z]{1,3}$/;reg("mailbox",mailboxRule);return true;}//判断手机号格式function regphone(){var cellphoneRule =/0?(13|14|15|18|17|19)[0-9]{9}$/;reg("cellphone",cellphoneRule );}//判断身份证格式function regidentity(){var identityCard = /^[1-9]{1}[0-9]{17}$|[1-9]{1}[0-9]{16}(X|x)$/;reg("identity",identityCard);return true;}//判断地址格式function regaddress() {var addressCard =/^[\u4e00-\u9fa5][A-z0-9]+$/;reg("address",addressCard);return true;}//实现校验按钮function regbtn(){if(document.getElementById("userNameReg").innerHTML=="√"&&document.getElementById("pwdReg").innerHTML=="√"&&document.getElementById("conpwdReg").innerHTML=="√"&&document.getElementById("mailboxReg").innerHTML=="√"&&document.getElementById("cellphoneReg").innerHTML=="√"&&document.getElementById("identityReg").innerHTML=="√"&&document.getElementById("addressReg").innerHTML=="√"){alert("注册成功");}else{alert("注册失败");}}/***判断正则表达式是否正确* eleID：input输入的id* rule：正则表达式*/function reg(eleID, rule){var inputValue = document.getElementById(eleID).value;var result = rule.test(inputValue.trim());if (result && inputValue != ""){document.getElementById(eleID+"Reg").innerHTML = "√";document.getElementById(eleID+"Reg").style.color = "green";}else {document.getElementById(eleID+"Reg").innerHTML = "×";document.getElementById(eleID+"Reg").style.color = "red";}}

4：所说垃圾，希望可以帮到你

JavaScript实现注册功能相关推荐

Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述自定义事件很难 ...
spring 3.x 学习笔记_spring mvc、spring jdbc 实现网站的登录注册功能
使用spring mvc.spring jdbc 实现网站的登录注册功能 1. 据业务模型创建model 一般实现序列化 2. 用spring 注解(@Repositor ...
网站学习心得-登陆注册功能
//环境: 1.没什么环境要求正文一.需求分析: 1.注册功能实现新用户信息的创建:账号.密码.昵称.邮箱账号:不能重复,不能少于6位,纯数字密码:不能少于6位昵称:最长6位字符,不能重复 ...
02.javaWeb旅游网小项目【注册功能】
用户注册模块 1.实现注册功能 1)注册功能(前台页面) 前台注册页面注册校验成功使用异步交互(JQuery-ajax) 点击注册将当前提交内容从后台数据库查询是否存在 $(function () ...
第二章、天天生鲜注册功能基本实现
第二章天天生鲜项目实现基本功能学习入门指南: 天天生鲜项目搭建文件可从公众号学聚思获取,关注公众号:学聚思.学聚思.学聚思.重要的事情说三遍本文博客获取关键词:天天生鲜注册实现博客本项目关键词 ...
书店管理系统（Servlet+MySQL）登录与注册功能篇
书店管理系统(Servlet+MySQL) 这个工程主要是对之前的一些总结吧,尽可能地用上所学的所有功能来实现,具体代码稍后也会上传到Github上. 在前端上并没有用上CSS等技术,只用上了基础的H ...
Flask项目实战——7—(Redis数据库存储验证码信息、验证登录界面的表单信息、注册功能实现、登录实现)
推荐一个API平台:聚合数据 1.Redis数据库存储验证码信息保存手机验证码到Redis数据库公有视图文件:apps/common/views.py # -*- encoding: utf-8 ...
easymall注册功能
1 EasyMall商城项目 EasyMall(易买网)商城项目是以java语言为主,Jsp.HTML.css.JavaScript为辅开发的一个电子商城项目.该项目用最传统的技术(Servlet.J ...
Vue3官网-可复用组合式API（十四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，h() 参数，使用JavaScript代替模板功能)，插件
Vue3官网-可复用&组合式API(十四)实例 property($slots,$attrs).渲染函数render(虚拟节点VNode,h() 参数,使用JavaScript代替模板功能), ...

JavaScript实现注册功能

JavaScript实现注册功能相关推荐

最新文章

热门文章