原生js —— 表单验证练习（12306注册）

最新推荐文章于 2021-08-30 15:38:45 发布

Lemon

最新推荐文章于 2021-08-30 15:38:45 发布

阅读量695

点赞数 3

分类专栏：学习

本文链接：https://blog.csdn.net/weixin_43314846/article/details/100323446

版权

学习专栏收录该内容

80 篇文章 0 订阅

订阅专栏

12306注册

知识点：
① 获取父元素：对象.parentElement、对象.parentNode
② 获取最后一个子元素：对象.lastElementChild、对象.lastChild
③ 获取第一个子元素：对象.firstElementChild、对象.firstChild
④ 当触发select对象的onchange事件时，其value值为当前所选option元素innerHTML的值。
⑤ 单选框被选择时触发的事件为onclick事件
⑥ 若多个单选框只允许一个被选中，则可将其name相同。
⑦ 在某个文本框内输入内容时，只会触发一次获取焦点事件对应的函数，即从未获取焦点到获取焦点时会触发，在输入时不会触发，除非再次失去焦点，再次获取焦点才可。
⑧ 若要监听文本框的输入的内容，可用onkeyup/onkeydown事件。
⑨ 在进行正则匹配时，可用^只匹配开始，用$只匹配结束，也可用/^$/匹配开始和结束。

var reg=/^\d/
var str = "1as"
str.match(reg);//返回结果不为null
"as1".match(reg);//返回结果为null

var reg = /\d$/
"ab1".match(reg);//返回结果不为null
"1ab".match(reg);//返回结果为null

思想：
① 在该表单验证中会有不同的选择显示不同的内容的问题：当选择不同的内容时会显现该内容对应的元素，默认情况下，所有多余的元素都是隐藏的，只有当其对应的的内容被选中时才可显现。不同的选择对应不同的显示内容是用类名称去关联的
② 当输入密码时，是边输入边判断，若输入的密码满足要求且种类大于一定值时，对应的密码强度的背景颜色会改变。当输入的密码不满足要求但却种类大于一定值时，对一个的密码强度的背景颜色也是不会改变的。用输入框的onkeyup事件去判断的
③ 在每一个元素失焦后判断，若用户输入的内容符合标准，没有错误提示信息，若不符合，根据不同情况显示不同的错误提示。默认条件下，错误提示信息都是隐藏的。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/iconfont2.css">
</head>
<style>
    *{
        margin:auto;
        padding:auto;
        box-sizing:border-box;
        font-size: 12px;
    }
    ul,li{
        list-style: none;
    }
    li{
        margin-bottom:8px
    }

    .formList{
        width: 800px;
        margin:20px auto
    }
    input[type=text],input[type=password],input[type=date]{
        outline: none;
        height: 25px;
        width: 200px;
    }
    input[type=button]{
        border:none
    }
    input[type=radio]{

        vertical-align:middle;
    }
    .prompt{
        color:#FF7F00;
        margin-left:6px;
    }
    .prompt>a{
        color:#FF7F00;
    }
    .error{
        margin:0 0 0 160px;
        display: none;
    }
    .error>span{
        color:red;
        vertical-align: middle;
    }
    i{
        font-style:normal;
        color:red;
        font-weight: bold;
    }
    .icon{
        font-size:26px !important;
    }
    .progress{
        display:inline-block;
    }
    .progress>span{
        display: inline-block;
        width: 45px;
        height: 8px;
        background:silver;
    }
    .progress>span:nth-of-type(1){
        background: red;
    }
    .before{
        display:inline-block;
        width: 160px;
        text-align:right;
    }
    .ChinaID>div{
        margin:16px 0 0 160px;
    }
    .ChinaID>div>span{
        margin-left:5px;
    }
    input[type=checkbox]{
        vertical-align: middle;
    }
    input[type=submit]{
        width: 130px;
        height: 30px;
        background: #aaa;
        color:white;
        border-radius:5px;
        border:1px solid #aaa;
        outline:none;/*去除点击后边框变蓝*/
    }
    input[type=submit]:hover{
        cursor:not-allowed;
    }
    .Hongkong,.taiwan,.passport{
        display: none;
    }
.rule{
    display: none;
}
</style>
<body>
<form class="formList" method="get" action="">
    <ul>
        <li class="normal">
            <span class="before"><i>* </i> 用户名：</span>
            <input placeholder="用户名设置成功后不可修改" type="text" id="userId" class="normalInput"/>
            <span class="prompt">6-30位字母、数字或"_"组成，字母开头</span>
            <div class="error" id="userError">
                <span class="iconfont icon" >&#xe616;</span>
                <span >请输入用户名！</span>
                <span>用户名长度不能少于6个字符！</span>
                <span>用户名只能由字母、数字和_组成,须以字母开头！</span>
            </div>
        </li>
        <li class="normal">
            <span class="before"><i>* </i>登录密码：</span>
            <input placeholder="6-20位字母、数字或符号" type="password" id="psw" class="normalInput"/>
            <div class="progress">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="error">
                <span class="iconfont icon" >&#xe616;</span>
                <span>请输入密码</span>
                <span>密码长度不能少于6个字符！</span>
                <span>格式错误，必须且只能包含字母，数字，下划线中的两种或两种以上！</span>
            </div>
        </li>
        <li class="normal">
            <span class="before"><i>* </i>确认密码：</span>
            <input placeholder="再次输入您的登录密码" type="password" id="confirmPsw" class="normalInput">
            <div class="error">
                <span class="iconfont icon" >&#xe616;</span>
                <span>请输入确认密码！</span>
                <span >确认密码与密码不同！</span>
            </div>
        </li>
        <li class="normal">
            <span class="before"><i>* </i>证件类型：</span>
            <select style="width:200px;height: 25px" id="chooseType">
                <option>中国居民身份证</option>
                <option>港澳居民来往内地通行证</option>
                <option>台湾居民来往大陆通行证</option>
                <option>护照</option>
            </select>
            <span class="prompt rule"><a href="">证件填写规则</a></span>
        </li>
        <li class="ChinaID">
            <div><input type="radio" name="choose" checked class="radioList" id="CHINA"/><span>中国居民身份证</span></div>
            <div><input type="radio" name="choose" class="radioList" id="foreigner"/><span>外国人永久居留身份证</span></div>
            <div><input type="radio" name="choose" class="radioList" id="other"/><span>港澳台居民居住证</span></div>
            </div>
        </li>
        <li class="normal">
            <span class="before"><i>* </i>姓名：</span>
            <input placeholder="请输入姓名" type="text" id="name" class="normalInput"/>
            <span class="prompt"><a href="">姓名填写规则</a>(用于身份核验，请正确填写)</span>
            <div class="error">
                <span class="iconfont icon" >&#xe616;</span>
                <span>请输入您的姓名！</span>
                <span>允许输入的字符串在3-30个字符之间！</span>
            </div>
        </li>
        <li class="normal">
            <span class="before"><i>* </i>证件号码：</span>
            <input placeholder="请输入您的证件号码" type="text" id="passport" class="normalInput"/>
            <span class="prompt">( 用于身份核验，请正确填写 )</span>
            <div class="error">
                <span class="iconfont icon" >&#xe616;</span>
                <span>请输入证件号码！</span>
                <span>请正确输入18位的证件号码！</span>
            </div>
        </li>
        <li class="Hongkong taiwan">
            <span class="before"><i>* </i>证件有效截止日期：</span>
            <input type="date" class="normalInput" id="date"/>
            <span class="prompt">( 用于身份核验，请正确填写 )</span>
            <div class="error">
                <span class="iconfont icon" >&#xe616;</span>
                <span>有效截止日期不可为空！</span>
            </div>
        </li>
        <li class="Hongkong passport taiwan">
            <span class="before"><i>* </i>出生日期：</span>
            <input type="date" class="normalInput" id="birthDate"/>
            <span class="prompt">( 用于身份核验，请正确填写 )</span>
            <div class="error">
                <span class="iconfont icon" >&#xe616;</span>
                <span>出生日期不可为空！</span>
            </div>
        </li>
        <li class="Hongkong passport taiwan" >
            <span class="before"><i>* </i>性别：</span>
            <input type="radio" style="margin-right: 6px;" class="sex"/>男
            <input type="radio" style="margin: 0 6px 0 20px;" class="sex"/>女
            <div class="error">
                <span class="iconfont icon" >&#xe616;</span>
                <span>必须要选择性别！</span>
            </div>
        </li>
        <li class="passport">
            <span class="before"><i>* </i>国家/地区：</span>
            <select style="width:200px;height: 25px">
                <option>中国CHINA</option>
                <option>中国CHINA</option>
                <option>中国CHINA</option>
                <option>中国CHINA</option>
                <option>中国CHINA</option>
            </select>
        </li>
        <li class="normal">
            <span class="before">邮箱：</span>
            <input placeholder="请正确填写邮箱地址" type="text" id="email" class="normalInput">
            <div class="error">
                <span class="iconfont icon" >&#xe616;</span>
                <span >请输入有效的电子邮件地址！</span>
            </div>
        </li>
        <li class="normal">
            <span class="before"><i>* </i>手机号码（+86）：</span>
            <input placeholder="请输入您的手机号码" type="text" id="tel" class="normalInput">
            <span class="prompt">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
            <div class="error">
                <span class="iconfont icon" >&#xe616;</span>
                <span >请输入有效的手机号码！</span>
            </div>
        </li>
        <li>
            <div style="margin:10px 0 0 160px ">
                <input type="checkbox" id="confirm"/>
                <span>我已阅读并同意遵守
                <a href="" style="text-decoration: none;">《中国铁路客户服务中心网站服务条款》</a>
                <a href="" style="text-decoration: none;">《隐私权政策》</a>
            </span>
            </div>
        </li>
        <li style="margin:40px 0 0 200px">
           <input type="submit" value="下一步"  class="next"/>
        </li>
    </ul>
</form>
</body>
<script>
    var liList = document.getElementsByClassName("normal");
    var chooseType = document.getElementById("chooseType");
    var ChinaID = document.getElementsByClassName("ChinaID");
    var Hongkong = document.getElementsByClassName("Hongkong");
    var passport = document.getElementsByClassName("passport");
    var taiwan = document.getElementsByClassName("taiwan");
    var radioList = document.getElementsByClassName("radioList");
    var rule = document.getElementsByClassName("rule")[0];
    var formList = document.getElementsByClassName("formList")[0];
    var psw = document.getElementById("psw");
    var next = document.getElementsByClassName("next")[0];
    var progress = document.getElementsByClassName("progress")[0].children;
    var normalInput = document.getElementsByClassName("normalInput");
    var errorList = document.getElementsByClassName("error");
    var confirm = document.getElementById("confirm");
    var sex=document.getElementsByClassName("sex");
    var pswStr = "";
    var blurEvent = {
        userId:function () {
            var lastEle = this.parentElement.lastElementChild;
            var reg = /^[a-zA-Z]+/;
            console.log(lastEle);
            if(!this.value.length || this.value.length<6 || this.value.length>30){
                lastEle.style.display="block";
                lastEle.children[0].style.display="inline-block";
                for(var j=1;j<lastEle.children.length;j++){
                    if((this.value.length<6 || this.value.length>30) && this.value.length){
                        if(lastEle.children[j].innerHTML=="用户名长度不能少于6个字符！"){
                            lastEle.children[j].style.display="inline-block";
                        }else{
                            lastEle.children[j].style.display="none";
                        }
                    }else{
                        if(lastEle.children[j].innerHTML=="请输入用户名！"){
                            lastEle.children[j].style.display="inline-block";
                        }else{
                            lastEle.children[j].style.display="none";
                        }
                    }

                }
            }
            else if(this.value.match(reg)==null){
                lastEle.style.display="block";
                lastEle.children[0].style.display="inline-block";
                for(var i=1;i<lastEle.children.length;i++){
                    if(lastEle.children[i].innerHTML=="用户名只能由字母、数字和_组成,须以字母开头！"){
                        lastEle.children[i].style.display="inline-block";
                        console.log(lastEle.children[i].style.display)
                    }else{
                        lastEle.children[i].style.display="none";
                    }
                }
            }else{
                lastEle.style.display="none";
            }
        },
        psw:function () {
            var reg = /\d+/;
            var reg1 = /[a-zA-Z]+/;
            var reg2 = /_+/;
            var reg3=/[^_0-9a-zA-Z]+/;
            var erro = this.parentElement.lastElementChild;
            if(!this.value.length || this.value.length<6 || this.value.length>20){
                erro.style.display="block";
                erro.children[0].style.display="inline-block";
                for(var i=1;i<erro.children.length;i++){
                    if((this.value.length<6 || this.value.length>20) && this.value.length){
                        if(erro.children[i].innerHTML=="密码长度不能少于6个字符！"){
                            erro.children[i].style.display="inline-block";
                        }else{
                            erro.children[i].style.display="none";
                        }
                    }else{
                        if(erro.children[i].innerHTML=="请输入密码"){
                            erro.children[i].style.display="inline-block";
                        }else{
                            erro.children[i].style.display="none";
                        }
                    }
                }
            }
            else if(this.value.length>=6){
                if((this.value.match(reg1)!=null && this.value.match(reg2)!=null) || (this.value.match(reg1)!=null && this.value.match(reg)!=null) || (this.value.match(reg2)!=null && this.value.match(reg)!=null)){
                    if(this.value.match(reg3)){
                        erro.style.display="block";
                        erro.children[0].style.display="inline-block";
                        for(var i=1;i<erro.children.length;i++){
                            if(erro.children[i].innerHTML=="格式错误，必须且只能包含字母，数字，下划线中的两种或两种以上！"){
                                erro.children[i].style.display="inline-block";
                            }else{
                                erro.children[i].style.display="none";
                            }
                        }
                    }else{
                        erro.style.display="none";
                        pswStr = this.value;
                    }
                } else{
                    erro.style.display="block";
                    erro.children[0].style.display="inline-block";
                    for(var i=1;i<erro.children.length;i++){
                        if(erro.children[i].innerHTML=="格式错误，必须且只能包含字母，数字，下划线中的两种或两种以上！"){
                            erro.children[i].style.display="inline-block";
                        }else{
                            erro.children[i].style.display="none";
                        }
                    }
                }
            }
        },
        confirmPsw:function () {
            var erro = this.parentElement.lastElementChild;
            if(!this.value.length){
                erro.style.display="block";
                erro.children[0].style.display="inline-block";
                for(var i=1;i<erro.children.length;i++){
                        if(erro.children[i].innerHTML=="请输入确认密码！"){
                            erro.children[i].style.display="inline-block";
                        }else{
                            erro.children[i].style.display="none";
                        }
                }
            }else if(this.value!=pswStr){
                erro.style.display="block";
                erro.children[0].style.display="inline-block";
                for(var i=1;i<erro.children.length;i++){
                    if(erro.children[i].innerHTML=="确认密码与密码不同！"){
                        erro.children[i].style.display="inline-block";
                    }else{
                        erro.children[i].style.display="none";
                    }
                }
            }else{
                erro.style.display="none";
            }
        },
        name:function () {
            var error = this.parentElement.lastElementChild;
            if(!this.value.length){
                error.style.display="block";
                error.children[0].style.display="inline-block";
                error.children[1].style.display="inline-block";
                error.children[2].style.display="none";
            }else if((this.value.length<3 || this.value.length>20)){
                error.style.display="block";
                error.children[0].style.display="inline-block";
                error.children[1].style.display="none";
                error.children[2].style.display="inline-block";
            }else{
                error.style.display="none";
            }
        },
        passport:function(){
            var reg=/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            var error = this.parentElement.lastElementChild;
            if(!this.value.length){
                error.style.display="block";
                error.children[0].style.display="inline-block";
                error.children[1].style.display="inline-block";
                error.children[2].style.display="none";
            }
            else if(this.value.match(reg)==null){
                error.style.display="block";
                error.children[0].style.display="inline-block";
                error.children[2].style.display="inline-block";
                error.children[1].style.display="none";
            }
        },
        email:function () {
            var reg=/^[0-9a-zA-Z]{3,20}\@(qq|163|yahoo|126|263hotmail)\.com$/;
            var error = this.parentElement.lastElementChild;
            if(this.value.length && this.value.match(reg)==null){
                error.style.display="block";
                error.children[0].style.display="inline-block";
                error.children[1].style.display="inline-block";
            }else{
                error.style.display="none";
            }
        },
        tel:function () {
            var reg = /^1[3578]{1}[0-9]{9}$/;
            var error = this.parentElement.lastElementChild;
            if(this.value.match(reg)==null){
                if(!this.value.length){
                    error.style.display="none";
                }
                else{
                    error.style.display="block";
                    error.children[0].style.display="inline-block";
                    error.children[1].style.display="inline-block";
                }
            }else{
                error.style.display="none";
            }
        },
        birthDate:function () {
            var error = this.parentElement.lastElementChild;
            if(this.value==""){
                error.style.display="block";
            }else{
                error.style.display="none";
            }
        },
        date:function () {
            var error = this.parentElement.lastElementChild;
            if(this.value==""){
                error.style.display="block";
            }else{
                error.style.display="none";
            }
        }
    }
    psw.onkeyup=function(){
        /*边输入边判断输入内容是否符合要求，若符合，则计算输入的内容的种类，根据不同的种类的数量来显示不同的背景色*/
       var reg1 = /\d+/;
       var reg2 = /[a-zA-Z]+/;
        var reg3 = /_+/;
        if(this.value.length>=7){
            if((this.value.match(reg1)!=null && this.value.match(reg2)!=null && this.value.match(reg3))){
                progress[1].style.background="orange";
                progress[2].style.background="green";
            }else if((this.value.match(reg1)!=null && this.value.match(reg2)!=null) || (this.value.match(reg1)!=null && this.value.match(reg3)!=null) || (this.value.match(reg2)!=null && this.value.match(reg3)!=null)){
                progress[2].style.background="";
                progress[1].style.background="orange";
            }
            else{
                progress[1].style.background="";
                progress[2].style.background="";
            }
        }else if(this.value.length<6){
            progress[1].style.background="";
            progress[2].style.background="";
        }
    }
    chooseType.onchange = function () {
        var value = this.value;
        if(value=="中国居民身份证"){
            radioList[0].checked="true";
            for(var i=0;i<ChinaID.length;i++){
                ChinaID[i].style.display="block";
                ChinaID[i].className="ChinaID normal"
            }
            for(var j=0;j<Hongkong.length;j++){
                Hongkong[j].style.display="none";
                Hongkong[j].className="Hongkong"
            }
            for(var k=0;k<passport.length;k++){
                passport[k].style.display="none";
                passport[k].className="passport"
            }
        }else if(value=="港澳居民来往内地通行证"||value=="台湾居民来往大陆通行证"){
            for(var i=0;i<ChinaID.length;i++){
                ChinaID[i].style.display="none";
                ChinaID[i].className="ChinaID";
            }
            for(var k=0;k<passport.length;k++){
                passport[k].style.display="none";
                passport[k].className="passport";
            }
            for(var j=0;j<Hongkong.length;j++){
                Hongkong[j].style.display="block";
                Hongkong[j].className="Hongkong normal"
            }

        }else if(value=="护照"){
            rule.style.display="none";
            for(var i=0;i<ChinaID.length;i++){
                ChinaID[i].style.display="none";
                ChinaID[i].className="ChinaID";
            }
            for(var j=0;j<Hongkong.length;j++){
                Hongkong[j].style.display="none";
                Hongkong[j].className="Hongkong";
            }
            for(var k=0;k<passport.length;k++){
                passport[k].style.display="block";
                passport[k].className="passport normal"
            }
        }
    }
    for(var i=0;i<radioList.length;i++){
        radioList[i].onclick=function () {
            if(this.id=="foreigner"){
                rule.style.display="inline-block";
                for(var k=0;k<passport.length;k++){
                    passport[k].style.display="block";
                    passport[k].className="passport normal"
                }
                for(var j=0;j<Hongkong.length;j++){
                    Hongkong[j].style.display="block";
                    Hongkong[j].className="Hongkong normal"
                }
            }
            else if(this.id=="CHINA" || this.id=="other"){
               if(this.id=="other"){
                   rule.style.display="inline-block"
               }
               else{
                   rule.style.display="none"
               }
                for(var k=0;k<passport.length;k++){
                    passport[k].style.display="none"
                    passport[k].className="passport"
                }
                for(var j=0;j<Hongkong.length;j++){
                    Hongkong[j].style.display="none";
                    Hongkong[j].className="Hongkong"
                }

            }
        }
    }
    confirm.onclick = function (ev) {
        if(this.checked){
            next.style.background = "#ff591a";
            next.style.cursor="pointer"
        }else{
            next.style.background="#aaa";
            next.style.cursor="not-allowed"
        }
    }
    formList.onsubmit = function () {
        if(confirm.checked){
            console.log(liList)
            for(var i=0;i<liList.length;i++){
                    liList[i].children[1].focus();

            }
            next.focus();//为什么把next写到div上就出错呢？
            for(var j=0;j<errorList.length;j++){
                if(errorList[j].style.display=="block"){
                    return false;
                }
            }
            return true;
        }else{
            return false;
        }

    };
    for(var i=0;i<normalInput.length;i++){
        normalInput[i].onblur = function () {
            blurEvent[this.id].call(this)
        }
    }
   for(var i=0;i<sex.length;i++){
       sex[i].index = i;
       sex[i].onblur=function (ev) {
           var erro = this.parentElement.lastElementChild;
          if(this.index==0){
              if(!this.checked && !sex[this.index+1].checked){
                erro.style.display="block";
              }else{
                  erro.style.display="none";
              }
          }
       }
   }

</script>
</html>

Lemon

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
原生js —— 表单验证练习（12306注册）

12306注册知识点：① 获取父元素：对象.parentElement、对象.parentNode② 获取最后一个子元素：对象.lastElementChild、对象.lastChild③ 获取第一个子元素：对象.firstElementChild、对象.firstChild④ 当触发select对象的onchange事件时，其value值为当前所选option元素innerHTML的...
复制链接

扫一扫

专栏目录