12306注册页面

最新推荐文章于 2022-11-20 09:01:15 发布

Yilingshu

最新推荐文章于 2022-11-20 09:01:15 发布

阅读量1.7k

点赞数 3

文章标签： html css js javascript

本文链接：https://blog.csdn.net/weixin_52163352/article/details/111463231

版权

话不多说，先上代码

<!-- 表单验证全部内容用div包住 -->
    <div class="box">
        <!-- 头部蓝色导航条 -->
        <div class="inf">帐户信息</div>
        <!-- 表单内容 -->
        <form action="../html/09.渐变轮播图模板.html" class="acc">
            <div class="use">
                <span class="qr">*</span>
                <span>用户名：</span>
                <input type="text" id="usename" class="wh" placeholder="请输入您的用户名">
                <!-- 提示信息 -->
                <span class="ts">6-30位字母、数字或"_"，字母开头</span>
            </div>
            <!-- 错误提示 -->
            <div class="err">
                <!-- 精灵图 -->
                <span class="jlt"></span>
                <span>用户名长度不够</span>
            </div>
            <!-- 密码框 -->
            <div>
                <span class="qr">*</span>
                <span>登陆密码：</span>
                <input type="password" id="paw" class="wh" placeholder="请输入您的密码">
            </div>
            <div class="err">
                <span class="jlt"></span>
                <span>登陆密码长度不能少于6个字符</span>
            </div>
            <!-- 确认密码 -->
            <div>
                <span class="qr">*</span>
                <span>确认密码：</span>
                <input type="password" class="wh" id="paws" placeholder="再次输入您的密码">
            </div>
            <div class="err">
                <span class="jlt"></span>
                <span>两次密码不一致</span>
            </div>
            <!-- 证件类型： -->
            <div>
                <span class="qr">*</span>
                <span>证件类型：</span>
                <select id="cn" class="wh">
                    <option>中国居民身份证</option>
                    <option>外国人永久身份证</option>
                    <option>港澳台居民身份证</option>
                </select>
            </div>
            <div class="rad">
                <ul id="cer">
                    <li>
                        <label>
                            <input type="checkbox" name="1" id="">中国居民身份证
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="checkbox" name="1" id="">外国人永久身份证
                        </label>
                    </li>
                    <li>
                        <label>
                            <input type="checkbox" name="1" id="">港澳台居民身份证
                        </label>
                    </li>
                </ul>
            </div>
            <!-- 姓名： -->
            <div class="ml">
                <span class="qr">*</span>
                <span>姓名：</span>
                <input type="text" class="wh" id="nam" placeholder="请输入证件上的中文姓名">
                <span class="ts">姓名填写规则（用于身份证核验，请正确填写）</span>
            </div>
            <div class="err">
                <span class="jlt"></span>
                <span>用户名不能为空</span>
            </div>
            <!-- 证件号码： -->
            <div>
                <span class="qr">*</span>
                <span>证件号码：</span>
                <input type="text" class="wh" id="sfz" placeholder="请输入您的证件号码">
                <span class="ts">（用于身份证核验，请正确填写）</span>
            </div>
            <div class="err">
                <span class="jlt"></span>
                <span>您输入的证件号码不正确</span>
            </div>
            <!-- 邮箱 -->
            <div class="ml">
                <span class="qr">*</span>
                <span>邮箱：</span>
                <input type="text" class="wh" id="eml" placeholder="请正确填写邮箱地址">
                <span></span>
            </div>
            <div class="err">
                <span class="jlt"></span>
                <span>您输入的邮箱格式有误</span>
            </div>
            <!-- 手机号 -->
            <div>
                <span class="qr">*</span>
                <span>手机号码：</span>
                <input type="text" class="wh" id="tel" placeholder="请填写您的手机号码">
                <span class="ts">请正确填写手机号码，稍后将向该手机号码发送短信验证码</span>
            </div>
            <div class="err">
                <span class="jlt"></span>
                <span>您的手机号码不正确</span>
            </div>
            <!-- 成人 -->
            <div>
                <span class="qr">*</span>
                <span>证件类型：</span>
                <select id="" class="wh">
                    <option>成人</option>
                    <option>儿童</option>
                </select>
            </div>
            <!-- 协议 -->
            <div class="rad">
                <label><input type="checkbox" name="" id="">
                    我已阅读并遵守</label>
                <a href="#">《中国铁路客户服务中心网站服务条款》</a>
                <a href="#">《隐私权政策》</a>
            </div>
            <!-- 提交按钮 -->
            <button class="but">下一步</button>
        </form>
    </div>

首先我们先搭建好它的html框架，要注意的是，因为我们要给它写入JavaScript，那么我们在书写的时候就要注意，尽量多使用div来包裹每个元素，例如，我写的时候把每一行都用div包裹，这样在js获取时能够更精确的获取到想要的元素。
然后看一下展示效果：
在这里插入图片描述
这个时候页面比较简陋，我们就需要用到css来美化：

@import"reset.css";

.box {
    width: 1000px;
    margin: 0 auto;
    margin-top: 10px;
    overflow: hidden;
    border: 1px solid pink;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    font-size: 13px;
}

.inf {
    width: 100%;
    height: 30px;
    background-color: pink;
    box-sizing: border-box;
    line-height: 30px;
    text-indent: 1.5em;
}

input {
    outline: none;
}

.acc {
    margin-left: 200px;
    margin-top: 20px;
    line-height: 35px;
}

.wh {
    width: 200px;
    height: 30px;
}

.qr {
    color: red;
}

.err {
    color: red;
    margin-left: 25px;
    display: none;
}

.jlt {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(../images/icon.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: 0px -350px;
    margin-left: 50px;
    vertical-align: middle;
    margin-right: 10px;
}

.acc input {
    display: inline-block;
    box-sizing: border-box;
}

.use input {
    margin-left: 13px;
}

.ml {
    margin-left: 26px;
}

.rad {
    margin-left: 75px;
}

.ts {
    color: #ff7f00;
}

.but {
    display: block;
    margin-left: 120px;
    width: 100px;
    height: 30px;
    background-color: #ff7f00;
    border: none;
    cursor: pointer;
    outline: none;
}

看看效果：
在这里插入图片描述
这里静态效果就写完了

然后开始写js：

var usename=document.getElementById("usename")
var errs=document.getElementsByClassName("err")

//封装一个判断函数

/**
 * 
 * @param {string} nam //调用此函数的元素
 * @param {RegExp} reg //传入的正则表达式
 * @param {number} index //获取的错误提示是一个数组，传入下标
 */
function common(nam,reg,index){
    nam.style.border=""
    errs[index].style.display="none"
    if(reg.test(nam.value)==false){
        errs[index].style.display="block"
        nam.style.border="1px solid red"
    }
}
//用户名的长度及内容判断
usename.addEventListener("blur",function(){
    var reg=/^[a-zA-Z][a-zA-Z0-9]{5,29}$/
    common(usename,reg,0)
})
//密码是否大于6位
var paw=document.getElementById("paw")

paw.addEventListener("blur",function(){
    this.style.border=""
    var pawtext = paw.value
    if(pawtext.length<6){
        errs[1].style.display="block"
        this.style.border="1px solid red"
    }
    if(pawtext.length>6){
        errs[1].style.display="none"
    }
})

//密码是否一致
var paws=document.getElementById("paws")

paws.addEventListener("blur",function(){
    this.style.border=""
    if(paws.value!=paw.value){
        errs[2].style.display="block"
        this.style.border="1px solid red"
    }
    if(paws.value==paw.value){
        errs[2].style.display="none"
    }
})


//证件类型
var cn=document.getElementById("cn")
var ops=cn.children

var cer=document.getElementById("cer")
var rads=cer.getElementsByTagName("input")

rads[0].setAttribute("checked","checked")

cn.oninput=function(){
    if(cn.value==ops[0].value){
        rads[1].removeAttribute("checked")
        rads[2].removeAttribute("checked")
        rads[0].setAttribute("checked","checked")
    }
    if(cn.value==ops[1].value){
        rads[0].removeAttribute("checked")
        rads[2].removeAttribute("checked")
        rads[1].setAttribute("checked","checked")
    }
    if(cn.value==ops[2].value){
        rads[0].removeAttribute("checked")
        rads[1].removeAttribute("checked")
        rads[2].setAttribute("checked","checked")
    }
}


//姓名
var nam=document.getElementById("nam")
//用户名的长度及内容判断
nam.addEventListener("blur",function(){
    this.style.border=""
    errs[3].style.display="none"
    if(nam.value==""||nam.value.length<2||nam.value.length>6){
        errs[3].style.display="block"
        this.style.border="1px solid red"
    }
})

//证件号码

var sfz=document.getElementById("sfz")

sfz.addEventListener("blur",function(){
    var reg=/^[1-9][0-9]{16}[0-9x]$/
    common(sfz,reg,4)
})

// 邮箱
var eml=document.getElementById("eml")
eml.addEventListener("blur",function(){
    var reg=/^[0-9a-zA-Z]+@[0-9a-zA-Z]{2,}\.(com)$/
    common(eml,reg,5)
})
// 手机号码
var tel=document.getElementById("tel")
tel.addEventListener("blur",function(){
    var reg=/^1[0-9]{9}[0-9]$/
    common(tel,reg,6)
})

效果：
在这里插入图片描述

使用正则来判断输入的信息是否符合规范
这样我们的注册表单就写完了。

Yilingshu

关注

3
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
12306注册页面

话不多说，先上代码 <div class="box">  <div class="inf">帐户信息</div>  <form action="../html/09.渐变轮播图模板.html" class="acc"> &lt
复制链接

扫一扫

12306注册页面

“相关推荐”对你有帮助么？