javascript实现较全功能注册表单

今天笔者仿照京东注册表单，进行设计了一个表单案例，在这个案例中，可以完成常见表单注册的绝大部分功能，比如表单注册信息的验证，校验用户名，校验密码强弱，注册信息的追踪。这其中用到了正则表达式，表单脚本的相关知识点。
请先看效果图：

笔者在这里仅对案例中主要代码进行讲解，读者可以下拉到本博客最后，点击链接进行下载案例全部资源。
这里页面的html代码和css代码不在这里列出，仅就javascript相关知识点进行分析。
在对表单注册信息进行验证的时候需要用到正则表达式对表单信息进行匹配验证，以满足注册条件。下面这段代码就是正则表达式的相关代码，仅供参考：

var regExpManger = {userNameReg:/^([\u4e00-\u9fa5]|\w|-)+$/, //用户名正则表达式regNum : /\d+/,          regWord : /[a-zA-Z]+/,      regOther : /[^\da-zA-Z]+/,emailReg: /^\w+@\w+(\.com)+$/,mobilReg: /^[1]\d*$/
}

知识是活的，以上表达式仅供参考。读者看了会感到疑惑，不用担心，请根据下面的代码进行了解领悟。
下面这段代码是对注册信息进行验证的，由于每条验证信息代码相似，这里笔者仅就用户名和注册密码进行讲解，请看代码：

var userName = document.getElementById("userName");//获取用户名节点对象
var userPwd = document.getElementById("userPwd");//获取密码节点对象
var confirmPwd = document.getElementById("confirmPwd");//获取确认密码节点对象
var email = document.getElementById("email");//获取邮箱节点对象
var mobile = document.getElementById("mobile");//获取手机号节点对象
var code = document.getElementById("code");//获取验证码节点对象
var agreement = document.getElementById("agreement");//获取协议节点对象
var btn = document.getElementById("btn");//获取注册按钮节点对象
var verifyCode = document.getElementById("verifyCode");//获取生成的验证码节点对象/*----------------------------校验用户名----------------------------*/
function checkUserName (e) {var _e = window.event || e;var box = userName.parentNode;//获取父节点var remind = box.nextElementSibling;//下一个兄弟节点var span = remind.lastElementChild;//获取remind中的span节点var v = userName.value;/*获取焦点*/if(_e){if(_e.type =="focus"){if(v.length == 0){box.className = "box";remind.className = "remind default";span.innerHTML = "支持汉字、字母、数字、-、_的组合，4-20个字符";return false;}}if(_e.type == "blur"){if(v.length == 0){box.className = "box";remind.className = "remind hide";return false;}}}/*其他事件*/if(v.length == 0){box.className = "box error";remind.className = "remind error";span.innerHTML = "请输入用户名";return false;}else{if(regExpManger.userNameReg.test(v)){if(v.length>=4 && v.length<=20){box.className = "box right";remind.className = "remind hide";return true;}else{box.className = "box error";remind.className = "remind error";span.innerHTML = "长度4-20个字符";return false;}}else{box.className = "box error";remind.className = "remind error";span.innerHTML = "格式错误，仅支持汉字、字母、数字、-、_的组合，4-20个字符";return false;}}
}
userName.onfocus = checkUserName;//获得焦点
userName.onblur = checkUserName;//失去焦点
userName.onkeyup = checkUserName;//按键弹起/*----------------------------校验密码----------------------------*/
function checkPwd (e) {var _e = window.event || e;var box = userPwd.parentNode;//获取父节点var remind = box.nextElementSibling;//下一个兄弟节点var span = remind.lastElementChild;//获取remind中的span节点var v = userPwd.value;/*获取焦点*/if(_e){if(_e.type =="focus"){if(v.length == 0){box.className = "box";remind.className = "remind default";span.innerHTML = "建议使用数字、字母和符号两种以上的组合，6-20个字符";return false;}}if(_e.type == "blur"){if(v.length == 0){box.className = "box";remind.className = "remind hide";return false;}}}/*其他事件*/if(v.length == 0){box.className = "box error";remind.className = "remind error";span.innerHTML = "请输入密码";return false;}else{/*验证密码长度和安全等级*/if(v.length>=6 && v.length<=20){box.className = "box right";var level = 0;if(regExpManger.regNum.test(v)){level++;}if(regExpManger.regWord.test(v)){level++;}if(regExpManger.regOther.test(v)){level++;}switch(level){case 1:remind.className = "remind ruo";span.innerHTML = "密码强度弱";break;case 2:remind.className = "remind zhong";span.innerHTML = "密码强度中";break;case 3:remind.className = "remind qiang";span.innerHTML = "密码强度强";break;default:remind.className = "remind ruo";span.innerHTML = "密码强度弱";}return true;}else{box.className = "box error";remind.className = "remind error";span.innerHTML = "密码长度不符合";return false;}}
}
userPwd.onfocus = checkPwd;//获得焦点
userPwd.onblur = checkPwd;//失去焦点
userPwd.onkeyup = checkPwd;//按键弹起

读者可以看出，校验用户名和校验密码代码差别并不是很大，其他信息的校验和校验用户名非常相似，所以笔者并没有全部列出。onfocus和onblur是表单操作常用的属性，分别表示获取焦点和失去焦点的操作。
下面请读者看一下生成验证码的代码，实际的网页中，验证码是由后台数据库生成的，笔者在这里只是进行一个模拟，供读者参考。请看代码：

var verifyCode = document.getElementById("verifyCode");
var codeNum = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z",
"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z",
"0","1","2","3","4","5","6","7","8","9"];
function randomNum(){var str = "";for(var i=0; i<5; i++){var index = parseInt(Math.random()*codeNum.length);str = str + codeNum[index];}verifyCode.innerHTML = str;
}
randomNum();
verifyCode.onclick = function(){randomNum();
}

代码中的关键点是用到了Math.random()方法，用于生成随机数，parseInt(Math.random()*codeNum.length)这句代码就是随机生成codeNum中的一个下标，借此来调用其中的字母和数字。

/*----------------------------点击注册按钮----------------------------*/
btn.onclick = function(){var agreeBox = agreement.parentNode;var remind = agreeBox.nextElementSibling;var span = remind.lastElementChild;if(agreement.checked){agreeBox.className = "agreeBox";remind.className = "remind hide";if(checkUserName()&&checkPwd()&&checkConfirmPwd()&&checkEmail()&&checkMobile()&&checkCode()){location.href="index.html";}}else{agreeBox.className = "agreeBox error";remind.className = "remind error";span.innerHTML = "请同意协议";return false;}
}

最后，让读者了解一下按钮点击的相关代码，上述代码中有一个条件语句，条件是各个函数表达式都为真才执行代码，这就起到了表单验证追踪追踪的作用，当用户没有填写注册信息直接点击注册按钮时，就会在相关的表单下出现提示信息。
最后，附上本案例完整资源下载链接：
注册表单完整资源下载

javascript实现较全功能注册表单相关推荐

jQuery弹出层登录和全屏注册表单
jQuery弹出层登录和全屏注册表单,这是一款很漂亮的jQuery登录和注册表单,点击登录时弹出一个登录窗口并伴随动画效果,注册页面则是全屏显示,非常时尚的jQuery表单. 代码: <!DOC ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
jQuery带背景切换登录注册表单
jQuery带背景切换登录注册表单原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :jQuery带背景切换登录注册 ...
购物车的制作与注册表单验证
购物车的制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
创建一个简单的后台教务管理系统,包含动态增删改查学生,年级和课程信息及查看登录日志等功能,包含表单验证.
创建一个简单的后台教务管理系统,包含动态增删改查学生,年级和课程信息及查看登录日志等功能,包含表单验证. 一.显示页面新建一个登录页面,即login.jsp <%--Created by In ...
史上很全的注册表修改大全
史上很全的注册表修改大全请使用 Ctrl+F 键来查找你想要的不想别人使用你电脑的某些功能,或是在网吧想使用某些功能,或是让自己的电脑速度更快怎么办如果你有点注册表的知识就OK拉没有多深奥 ...
登录滑块验证表单_如何构建双滑块登录和注册表单
登录滑块验证表单 Some of you might already know but for those who don't, I'm starting a Weekly Coding Challe ...
php销售清单录入界面,列表,表格,商品清单表,注册表单的用法 2019年8月31日
1.谈谈你对html标签,元素与属性的理解,并举例说明. 2.列表有几种,如何定义? 3.列表与表格的区别与联系?什么时候用列表,什么时候用表格,为什么? 4.编程实现,用列表制作你的工作计划,要求使 ...
使用php创建一个注册表单,如何实现一个简单的注册表单
创建一个注册表单是非常容易的 - 它事实上意味着,你只需要创建一个表单,表单将更新一些User的模型对象(这个例子是一个Doctrine实体)并保存它. 受欢迎的FOSUserBundle 提供了一个 ...

javascript实现较全功能注册表单

javascript实现较全功能注册表单相关推荐

最新文章

热门文章