javascript实现较全功能注册表单

最新推荐文章于 2024-08-18 18:06:37 发布
最新推荐文章于 2024-08-18 18:06:37 发布
阅读量6.4k 收藏 29
点赞数 7
分类专栏： JavaScript 文章标签： javascript 注册表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhongguohaoshaonian/article/details/52763274
版权

今天笔者仿照京东注册表单，进行设计了一个表单案例，在这个案例中，可以完成常见表单注册的绝大部分功能，比如表单注册信息的验证，校验用户名，校验密码强弱，注册信息的追踪。这其中用到了正则表达式，表单脚本的相关知识点。
请先看效果图：
这里写图片描述
笔者在这里仅对案例中主要代码进行讲解，读者可以下拉到本博客最后，点击链接进行下载案例全部资源。
这里页面的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实现注册功能
weixin_45747067的博客
10-15 3860
1：直接效果图 当页面上所有input输入框内的内容全部符合正则表达式时，才可以注册成功 1.1当所有内容全部正确是 1.2：当所有内容全部正确时，并注册成功 1.3：当所有内容输入后，并且至少有一个没有成功后，注册页面失败后 2：代码 2.1：html代码 <body id="body"> <br /><br /><br /><br...
JavaScript实现注册模块功能
weixin_33712987的博客
12-24 244
一直用JQuery，JavaScript都有些忘记了，今天又拾起来了。。。<script LANGUAGE=javascript RUNAT=Server> function isEmail(strEmail) { /** *检测邮箱 **/ var tdEmailTip = document...
JavaScript
最新发布
m0_73852099的博客
08-18 812
对象（object）是 JavaScript 语言的核心概念，也是最重要的数据类型,对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合。var user={age:13对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用var user={如果属性的值还是一个对象，就形成了链式引用var user={name:xyy,age:12,
javascript注册表单验证实现
gfdonx的专栏
11-02 477
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> function check(){ var username = document.getElementById("username"); var userpass = docume
JavaScript验证注册表单（包含多种表单元素）
05-05
一个注册表单（文本框、单选按钮、复选框、下拉列表、文本域……） JavaScript验证
全JavaScript语言Web实现学习项目
02-18
【全JavaScript语言Web实现学习项目】是一个以JavaScript为核心的Web开发实践项目，旨在帮助开发者通过实际操作，深入理解和掌握JavaScript在构建Web应用中的各种技术与技巧。在这个项目中，我们将主要探讨...
JavaScript_用于构建iOS Android应用程序的全功能HTML框架.zip
05-20
标题中的"JavaScript_用于构建iOS Android应用程序的全功能HTML框架.zip"指出，这个压缩包包含了一个使用JavaScript构建跨平台移动应用的框架。描述中的“JavaScript”进一步强调了该框架的核心技术是JavaScript。 ...
javascript实现checkbox全选的代码
12-10
在JavaScript中，实现复选框（checkbox）全选的功能是一个常见的需求，特别是在处理表单或者数据筛选时。这里我们详细探讨如何使用JavaScript实现这个功能，以及两种不同的调用方法。 首先，我们需要创建一个名为`...
jquery实现全选、全不选以及单选功能
10-20
本文将深入探讨使用jQuery实现全选、全不选以及单选功能的代码实现方法。首先，需要了解的是jQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历和事件处理、动画和Ajax交互，使Web开发更为方便...
js -DOM-【注册表单的实现】
ZHANGLIHAOOO的博客
02-03 921
【内容:javascript案例-注册表单校验】 前面我们已经学过了正则，以下我们在对表单数据进行验证时，就会使用到正则表达式，并且会使用上面提到过的dom来显示一些错误信息。               需求: 1.      验证邮箱符合规则，并且不能为空 2.      验证会员名密码不能为空，并且保证长度至少6位 3.      重复密码要与密码一致.           分析
javascript注册页面代码
06-08
javascript注册页面代码（只包含用户名&密码&邮箱的验证）
JS注册表单验证
10-15
网上常见的用JS编写的注册表单验证的代码，非常实用哦
简单的登录注册页面 实现js验证
06-30
简单的登录注册页面 使用的是sqlserver2005 包含sql语句。
js正则表达式注册页面表单验证
10-21
主要为大家详细介绍了js正则表达式注册页面表单验证,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现登陆注册
2302_80798583的博客
04-26 891
【代码】js实现登陆注册。
js注册表单验证
flynetcn的专栏
12-28 5848
      function IsDigit(cCheck)       {       return ((0 }            function IsAlpha(cCheck)       {       return (((a }                    function IsChinese(cCheck)     {   var re=/^[/u4E00
javascript注册表单
YL的专栏
11-07 1948
html部分： 注册表单 用户名: 密码: 确认密码: QQ: E-mail:
js表单注册验证
不吃鱼的猫
04-14 1504
简单的js登录 javascript代码 function checkname(){ na=form1.yourname.value; if( na.length 12) { divname.innerHTML='长度是1~12个字符'; }else
JavaScript实现全方位Form表单验证实战
本文档主要介绍了如何使用JavaScript进行表单验证，包括在HTML中实现基础的用户输入验证功能，适用于JavaScript基础学习者进行考试或理解表单交互过程。主要内容涵盖以下几个方面： 1. **正则表达式验证**： 正则...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值