JS18---表单提交

最新推荐文章于 2021-07-14 10:22:21 发布
XIAO_YuBaby
最新推荐文章于 2021-07-14 10:22:21 发布
阅读量313
点赞数
分类专栏： javascript
本文链接：https://blog.csdn.net/xiao_yubaby/article/details/100898931
版权
javascript 专栏收录该内容
23 篇文章 0 订阅
订阅专栏
①onsubmit 表单提交事件

return false 表单不提交
return true 表单提交
②<form action="" method=" get/post">

action：提交路径（将数据提交到远程服务器上）
method：提交方式，需要加name属性
get：显示提交（信息会在路径栏出现）
post：信息在Network栏显示
③密码显示问题

将文本框类型由password变为text
④利用call和apply替换前边函数中的this

⑤checked为选择属性

选择上了为true，未选择上为false
⑥input文本框

①类型：text password checkbox(勾选) submit radio
radio

给同一等级的input加上相同的name属性，这样去点击一个，其他的会自动消失
对象.click() 默认选中
②placeholder(虚) value（实）
③user.focus() 让事件获得焦点
focus()为方法
onfocus为事件属性，表示获得焦点后去执行什么
⑦trim()去除空格

⑧去除Input点击上去出现的蓝边框 outline:none;

去除a标签的下划线：text-decoration:none;

去除i标签的倾斜：font-style:normal;

⑨其中输入错误才出现的提示用display为block和none写

⑩大体步骤

① 先写表单提交事件只有当同意并阅读那一栏被点击才可以提交
然后上边的文本框的输入都没有错误才可以提交
②文本框验证：点击提交的时候，先让所有的文本框依次获得焦点，在文本框失焦的时候进行验证
给每个需要判断的文本框加一个id属性，当表单失焦的时候，用call获取文本框的id
③写自定义对象，自定义对象中分别验证每个文本框中的内容
下边是12306火车票注册代码


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>中国铁路12306</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        body{
            background-color: #dedede;
        }
        .box{
            background-color: white;
            margin:auto ;
            text-align: center;
            height: auto;
            width: 1000px;
            border: solid 4px #a7c7ee;
        }
        ul{
            padding-top: 20px;
            padding-bottom: 20px;
            margin: auto;
            width:620px;
            height: auto;
            border: solid 1px transparent;
        }
        i{
            color: orange;
            font-size: 13px;
            font-style: normal;   /*去除i标签倾斜样式*/
            position: absolute;
            top: 14px;
            left: 327px;
        }
        .paw{
            display: inline-block; position: absolute;
            top:10px;
            left: 327px;
        }
        .paw>div{
            display: inline-block;
            width: 30px;
            height: 8px;
            background-color: #dedede;
        }
        .paw>div:first-of-type{
            background-color: red!important;
        }
        li{
            position: relative;
            width:626px;
            height: 40px;
            text-align: center;
        }
        input{
            position: absolute;
            top:6px;
            left: 120px;
            padding-left: 5px;
            outline: none;
        }
        input[type="text"],input[type="password"]{
            width: 200px;
            height: 28px;
            border:solid 1px #d0d0d0;
        }
        input[type="submit"]{
            border: none;
            border-radius: 5px;
            width: 80px;
            height:30px;
        }
        select{
            width: 200px;
            height: 28px;
            border:solid 1px #d0d0d0;
            position: absolute;
            top: 10px;
            left: 120px;
            outline: none;
        }
        .sub{
            width: 150px;
            height: 50px;
            background-color: orange;
        }
        .ck{
            font-size: 13px;
        }
        a{
            color: #3dc5ff;
            cursor: pointer;
        }
        u{
            padding-right: 6px;
        }

        .xing{
            position: absolute;
            font-size: 13px;
            display: inline-block;
            top: 14px;
            right:507px;
            width: 130px;
            text-align: right;
        }
        .four{
            position: absolute;
            top: 4px;
            left: 136px;
            font-size: 13px;
        }
        img{
            width: 15px;
            height: 12px;
            position: absolute;
            top: 14px;
            left: 300px;
        }
        .success{
            display: none;
        }
        .error{
            display: block;
        }
        .divele{
            font-size: 12px;
            color: red;
            width: 430px;
            height: 15px;
            margin-left: 118px;
            text-align: left;
        }
        #sex>input:first-of-type{
            top: 16px;
            left: 120px;
        }
        #sex>input:last-of-type{
            top: 16px;
            left: 200px;
        }
        #sex>span:first-of-type{
            position: absolute;
            top: 10px;
            left: 138px;
        }
        #sex>span:last-of-type{
            position: absolute;
            top: 10px;
            left: 219px;
        }
        .stuyouhui input{
            display: inline-block;
            width: 90px;
            height: 30px;
        }
        .stuyouhui span{
            position: absolute;
            top: 9px;
            left: 212px;
        }
        .stuyouhui input:first-of-type{
            top: 7px;
            left: 120px;
        }
        .stuyouhui input:last-of-type{
            top: 7px;
            left: 235px;
        }
    </style>
</head>
<body>
<div class="box">
    <form action="" method="get" class="userform">
        <ul>
            <li><div class="xing">用户名：</div>
                <input type="text" placeholder="用户名设置成功后不可更改"class="useritem" name="userid" id="userid"/>
                <i>6-30位字母,数字或"_",字母开头</i>
            </li>
            <div class="divele success">请输入用户名!</div>        <!--一定要注意定位问题-->
            <li><div class="xing">登录密码：</div>
                <input type="password" placeholder="6-20位字母，数字或字符"class="useritem" name="userpaw" id="userpaw"/>
                <img src="img/eye1.png" alt="" class="two"/>
                <div class="paw">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </li>
            <div class="divele success">请输入密码!</div>
            <li><div class="xing">确认密码：</div>
                <input type="password" placeholder="再次输入您的登录密码"class="useritem" name="userpaw2" id="userpaw2"/>
                <img src="img/eye1.png" alt="" class="two"/>
            </li>
            <div class="divele success">请输入确认密码!</div>
            <li><div class="xing">证件类型：</div>
                <select name="" class="select1">
                    <option selected>中国居民身份证</option>
                    <option>港澳居民来往内地通行证</option>
                    <option>台湾居民来往大陆通行证</option>
                    <option>护照</option>
                </select>
            </li>
            <li class="san">         <!--加相同的name，则每次只可以选中一个-->
                <input type="radio" class="three" name="name1" />
                <span class="four" >中国居民身份证</span>
            </li>
            <li class="san">
                <input type="radio"  class="three" name="name1"/>
                <span class="four">外国人永久居留身份证</span>
            </li>
            <li class="san">
                <input type="radio"  class="three" name="name1"/>
                <span class="four">港澳台居民居住证</span>
            </li>
            <li><div class="xing">姓名：</div>
                <input type="text" placeholder="请输入姓名" class="useritem" name="username" id="username"/>
                <i><a>姓名填写规则</a>(用于身份验证，请正确填写)</i>
            </li>
            <div class="divele success">请输入您的姓名!</div>
            <li><div class="xing">证件号码：</div>
                <input type="text" placeholder="请输入您的证件号码" class="useritem" name="userNum" id="userNum"/>
                <i>(用于身份验证，请正确填写)</i>
            </li>
            <div class="divele success">请输入证件号码!</div>
            <li class="add1 success">
                <div class="xing">证件有效期截止日期：</div>
                <input type="text"/>
                <i>(用于身份核验，请正确填写)</i>
            </li>
            <li class="add1 success">
                <div class="xing">出生日期：</div>
                <input type="text"/>
                <i>(用于身份核验，请正确填写)</i>
            </li>
            <li class="add1 success" id="sex">
                <div class="xing">性别：</div>
                <input type="radio" class="xuanze" name="name2"/>
                <span>男</span>
                <input type="radio" class="xuanze" name="name2"/>
                <span>女</span>
            </li>
            <li class="china success">
                <div class="xing">国家/地区：</div>
                <select name="">
                    <option selected>中国</option>
                    <option>韩国</option>
                    <option>日本</option>
                    <option>美国</option>
                </select>
            </li>
            <li>
                <div class="xing">邮箱：</div>
                <input type="text" placeholder="请正确填写邮箱地址" class="useritem" name="useremil" id="useremil"/>
            </li>
            <div class="divele success">请输入邮箱!</div>
            <li class="student">
                <div class="xing">手机号码(+86)：</div>
                <input type="text" placeholder="请输入您的手机号码" class="useritem" name="usertel " id="usertel"/>
                <i>请正确填写号码，稍后将向该手机号发送短信验证码</i>
            </li>
            <div class="divele success">请输入手机号码!</div>
            <li>
                <div class="xing">旅客类型：</div>
                <select name=""  class="select2">
                    <option>成人</option>
                    <option>儿童</option>
                    <option>学生</option>
                    <option>残疾军人,伤残人民警察</option>
                </select>
            </li>
            <li class="student" style="display: none">
                <div class="xing">学校所在省份：</div>
                <select name="">
                    <option>北京</option>
                    <option>上海</option>
                    <option>广州</option>
                    <option>陕西</option>
                </select>
            </li>
            <li class="student" style="display: none">
                <div class="xing">学校名称：</div>
                <input type="text" placeholder="简码/汉字" class="useritem" name="useremil"/>
            </li>
            <li class="student" style="display: none">
                <div class="xing">院系：</div>
                <input type="text" class="useritem" />
            </li>
            <li class="student" style="display: none">
                <div class="xing">班级：</div>
                <input type="text" />
            </li>
            <li class="student" style="display: none">
                <div class="xing">学号：</div>
                <input type="text" />
            </li>
            <li class="student" style="display: none">
                <div class="xing">学制：</div>
                <select name="">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </li>
            <li class="student" style="display: none">
                <div class="xing">入学年份：</div>
                <select name="">
                    <option>2019</option>
                    <option>2018</option>
                    <option>2017</option>
                    <option>2016</option>
                    <option>2015</option>
                </select>
            </li>
            <li class="student" style="display: none">
                <div class="xing">优惠卡号：</div>
                <input type="text"/>
            </li>
            <li class="stuyouhui student" style="display: none">
                <div class="xing">优惠区间：</div>
                <input type="text" placeholder="简码/汉字"/>
                <span>—</span>
                <input type="text" placeholder="简码/汉字" />
                <i>填写与学生证一致的优惠区间（选择车站所在城市）</i>
            </li>
            <li class="ck">
                <input type="checkbox" class="check"/>
                <span class="four">我已阅读并同意遵守
                 <a href="">《中国铁路客户服务中心网站服务条款》</a>
                <a href="">《隐私权政策》</a>
                </span>
            </li>
            <li>
                <input type="submit" value="下一步" class="sub"/>
            </li>
        </ul>
    </form>
</div>
<script>
    var userform=document.getElementsByClassName("userform")[0];  //表单
    var divthree=document.getElementsByClassName("paw")[0].children;   //密码颜色变化
    var three=document.getElementsByClassName("three");       //三个按钮
    var two=document.getElementsByClassName("two");            //两个眼睛
    var check=document.getElementsByClassName("check")[0];
    var sub=document.getElementsByClassName("sub")[0];
    var useritem=document.getElementsByClassName("useritem");
    var divele=document.getElementsByClassName("divele");
    var select1=document.getElementsByClassName("select1")[0];
    var select2=document.getElementsByClassName("select2")[0];
    var san=document.getElementsByClassName("san");
    var add1=document.getElementsByClassName("add1");
    var xuanze=document.getElementsByClassName("xuanze");
    var china=document.getElementsByClassName("china")[0];
    var student=document.getElementsByClassName("student");
    //console.log(useritem.length);
    var user={
        userid:function(){
            if(this.value){  //里边写了东西
                console.log(this.value.match(/\s/));     //  /^\s$/ 不用加^ $
                console.log(this.value);
                if(this.value.match(/\s/)){   //里边有空格
                    this.style.borderColor="red";
                    divele[this.index].className="divele error";
                    divele[this.index].innerHTML=" 用户名中不能包含空格!";
                }
                else{
                    if(this.value.length>6&&this.value.length<=30){
                        if(this.value.match(/^[a-zA-Z]+\d+[_]+$/)||this.value.match(/^[a-zA-Z]+[_]+\d+$/)){
                            divele[this.index].className="divele success";
                            this.style.borderColor=" #d0d0d0";
                        }
                        else{
                            this.style.borderColor="red";
                            divele[this.index].className="divele error";
                            divele[this.index].innerHTML="用户名只能由字母、数字和_组成,须以字母开头！";
                        }
                    }
                    else{
                        divele[this.index].innerHTML="用户名长度不能少于6个字符！";
                        this.style.borderColor="red";
                        divele[this.index].className="divele error";
                    }
                }
            }
            else{
                this.style.borderColor="red";
                divele[this.index].className="divele error";
                divele[this.index].innerHTML=" 请输入用户名!";
            }
        },
        userpaw:function(){
            if(this.value){  //里边写了东西
                if(this.value.match(/\s/)){
                    divele[this.index].innerHTML="输入的密码中不能包含空格！";
                    this.style.borderColor="red";
                    divele[this.index].className="divele error";
                }
                else{     //里边没有空格
                    if(this.value.length>=6){        //正则里边或是单个 |  其他或是 ||
                        if(this.value.match(/^[0-9]+$/)||this.value.match(/^[_]+$/)||this.value.match(/^[A-Za-z]+$/)){   //写正方向太难，写反方向
                            divele[this.index].className="divele error";
                            divele[this.index].innerHTML="格式错误，必须且只能包含字母，数字，下划线中的两种或两种以上！";
                            this.style.borderColor="red";
                        }
                        else if(this.value.match(/^[A-Za-z]+[0-9]+[_]+$/)||this.value.match(/^[A-Za-z]+[_]+[0-9]+$/)||this.value.match(/^[_]+[A-Za-z]+[0-9]+$/)
                        ||this.value.match(/^[0-9]+[A-Za-z]+[_]+$/)||this.value.match(/^[0-9]+[_]+[A-Za-z]+$/)||this.value.match(/^[_]+[0-9]+[A-Za-z]+$/)){
                            divele[this.index].className="divele success";
                            this.style.borderColor=" #d0d0d0";
                        }
                        else{    //有字母，数字，下划线中的两种或两种以上
                            divele[this.index].className="divele success";
                            this.style.borderColor=" #d0d0d0";
                        }
                    }
                    else{
                        divele[this.index].innerHTML="密码长度不能少于6个字符！";
                        this.style.borderColor="red";
                        divele[this.index].className="divele error";
                    }
                }
            }
            else{
                this.style.borderColor="red";
                divele[this.index].className="divele error";
                divele[this.index].innerHTML=" 请输入密码!";
            }
        },
        userpaw2:function(){
            if(this.value){  //里边写了东西
                if(this.value==useritem[this.index-1].value){  //里边写了东西
                    divele[this.index].className="divele success";
                    this.style.borderColor=" #d0d0d0";
                }
                else{
                    this.style.borderColor="red";
                    divele[this.index].className="divele error";
                    divele[this.index].innerHTML=" 确认密码与密码不同!"
                }
            }
            else{
                this.style.borderColor="red";
                divele[this.index].className="divele error";
                divele[this.index].innerHTML="请输入确认密码!";
            }

        },
        username:function(){
            if(this.value){  //里边写了东西
                if(this.value.match(/^\w+$/)){
                    this.style.borderColor="red";
                    divele[this.index].className="divele error";
                    divele[this.index].innerHTML="姓名只能包含中文或者英文，如有生僻字或繁体字参见姓名填写规则进行填写！";
                }
                else{
                    divele[this.index].className="divele success";
                    this.style.borderColor=" #d0d0d0";
                }
            }
            else{
                this.style.borderColor="red";
                divele[this.index].className="divele error";
            }
        },
        userNum:function(){
            if(this.value){  //里边写了东西
                if(this.value.match(/^\d{17}[0-9X]{1}$/)){
                    divele[this.index].className="divele success";
                    this.style.borderColor=" #d0d0d0";
                }
                else{
                    this.style.borderColor="red";
                    divele[this.index].className="divele error";
                    divele[this.index].innerHTML="请正确输入18位的证件号码！";
                }
            }
            else{
                this.style.borderColor="red";
                divele[this.index].className="divele error";
                divele[this.index].innerHTML="请输入证件号码!";
            }
        },
        useremil:function(){
            if(this.value){  //里边写了东西
                if(this.value.match(/^\w{5,10}\@((qq)|(163))\.((com)|(cn))$/)){
                    divele[this.index].className="divele success";
                    this.style.borderColor=" #d0d0d0";
                }
                else{
                    this.style.borderColor="red";
                    divele[this.index].className="divele error";
                    divele[this.index].innerHTML="请输入有效的电子邮件地址！";
                }
            }
            else{
                this.style.borderColor="red";
                divele[this.index].className="divele error";
                divele[this.index].innerHTML="请输入邮箱!";
            }
        },
        usertel:function(){
            if(this.value){  //里边写了东西
                if(this.value.match(/^[1]{1}[34578]{1}[0-9]{9}$/)){
                    divele[this.index].className="divele success";
                    this.style.borderColor=" #d0d0d0";
                }
                else{
                    divele[this.index].className="divele error";
                    this.style.borderColor="red";
                    divele[this.index].innerHTML="您输入的手机号不是有效格式！";
                }
            }
            else{
                this.style.borderColor="red";
                divele[this.index].className="divele error";
                divele[this.index].innerHTML="请输入手机号码!";
            }
        }
    }
    //console.log(divthree);
    //密码颜色变化事件   添加按键事件
        useritem[1].onkeyup=function(){
            if(useritem[1].value.length>=6){
                if(useritem[1].value.match(/^[A-Za-z]+[0-9]+[_]+$/)||useritem[1].value.match(/^[A-Za-z]+[_]+[0-9]+$/)||useritem[1].value.match(/^[_]+[A-Za-z]+[0-9]+$/)
                        ||useritem[1].value.match(/^[0-9]+[A-Za-z]+[_]+$/==null)||useritem[1].value.match(/^[0-9]+[_]+[A-Za-z]+$/)||useritem[1].value.match(/^[_]+[0-9]+[A-Za-z]+$/)){
                    divthree[1].style.backgroundColor="orange";
                    divthree[2].style.backgroundColor="green";
                }
                else if(useritem[1].value.match(/^[0-9]+$/)||useritem[1].value.match(/^[_]+$/)||useritem[1].value.match(/^[A-Za-z]+$/)){
                    divthree[1].style.backgroundColor="#dedede";
                    divthree[2].style.backgroundColor="#dedede";
                }
                else{
                    divthree[1].style.backgroundColor="orange";
                    divthree[2].style.backgroundColor="#dedede";
                }
            }
            else{
                divthree[1].style.backgroundColor="#dedede";
                divthree[2].style.backgroundColor="#dedede";
            }
        }
    //失焦事件
    for(var i=0;i<useritem.length;i++){
        useritem[i].index=i;
        useritem[i].onblur=function(){
            //console.log(this.id);
            user[this.id].call(this);
        }
    }
    //表单提交事件   在所有的框都通过验证并且check被点击了后才可以提交
    userform.onsubmit=function(){
        if(check.checked){
            for(var i=0;i<useritem.length;i++){
                useritem[i].focus();
            }
            sub.focus();
            var errlength=document.getElementsByClassName("error").length;
            if(errlength){  //非0
                return false;
            }
            return true;
        }
        else{
            return false;
        }
    }
    //眼睛事件
    two[0].onclick=function(){
        if(useritem[1].type=="password"){
            useritem[1].type="text";
            this.src="img/eye.png";
        }
        else{
            useritem[1].type="password";
            this.src="img/eye1.png";
        }
    }
    two[1].onclick=function(){
        if(useritem[1].type=="password"){
            useritem[1].type="text";
            this.src="img/eye.png";
        }
        else{
            useritem[1].type="password";
            this.src="img/eye1.png";
        }
    }
    //点击中国居民身份证下边变换   onchange
    select1.onchange=function(){    //option不能有value
       //console.log(select1.value);   //用当前value必须将原本select中的value=""属性去除
        if(this.value=="港澳居民来往内地通行证"||this.value=="台湾居民来往大陆通行证"){
            for(var i=0;i<san.length;i++){
                san[i].style.display="none";
            }
            for(var k=0;k<add1.length;k++){
                add1[k].style.display="block";
            }
        }
        else if(this.value=="护照"){
            china.style.display="block";
            console.log(add1[2].className);
            for(var i=0;i<san.length;i++){
                san[i].style.display="none";
            }
            for(var k=0;k<add1.length;k++){
                add1[k].className="add1 error"
            }
            add1[0].style.display="none";
        }
        else if(this.value=="中国居民身份证"){
            china.style.display="none";
            for(var i=0;i<san.length;i++){
                san[i].style.display="block";
            }
            for(var k=0;k<add1.length;k++){
                add1[k].style.display="none";
            }
        }
    }
    //san 中国居民按钮点击事件
    san[0].onclick,san[2].onclick=function(){
        china.style.display="none";
        for(var k=0;k<add1.length;k++){
            add1[k].style.display="none";
        }
    }
    san[1].onclick=function(){
        china.style.display="block";
        for(var k=0;k<add1.length;k++){
            add1[k].style.display="block";
        }
    }
    //旅客类型
    select2.onchange=function(){
        if(this.value=="学生"){
            console.log(1);
            for(var i=0;i<student.length;i++){
                student[i].style.display="block";
            }
        }
        else{
            for(var i=0;i<student.length;i++){
                student[i].style.display="none";
            }
        }
    }
    window.onload=function(){
        three[0].click();
        //男女选择事件
        xuanze[0].click();
    }
</script>
</body>
</html>