好例题-----表单校验

最新推荐文章于 2022-05-02 16:07:53 发布

九月上

最新推荐文章于 2022-05-02 16:07:53 发布

阅读量127

点赞数

分类专栏：好例题文章标签：好例题表单校验

本文链接：https://blog.csdn.net/weixin_44389868/article/details/87729518

版权

好例题专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<style>
        input{margin-top: 10px}
        span{color: red;font-size: 12px;margin-left: 5px;display: none}
        .one{width: 80px;height: 25px;background: #d1d1d1;border: none;border: 1px solid #ccc;border-radius: 2px;}
		.two{width: 80px;height: 25px;background: skyblue;border: none;border: 1px solid #ccc;border-radius: 2px;}
</style>
<body>
    <form action="a.html" method="GET" onsubmit="return check()">
        <label for="">用&nbsp;户&nbsp;名&nbsp;：</label><input type="text" id="txt-name"><span id="sp-name">*请输入8-12位字母</span><br>
        <label for="">密&nbsp;&nbsp;码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;：</label><input type="password" id="txt-pwd"><span id="sp-pwd">*只能输入6位数字</span><br>
        <label for="">确认密码：</label><input type="password" id="txt-pwds"><span id="sp-pwds">*两次输入密码不同</span><br>
        <label for="">手机号码：</label><input type="text" id="txt-ipend"><span id="sp-ipend">*手机号码格式不对</span><br>
        <input type="checkbox" id="txt-ch">同意xxx协议<br>
        <input type="submit" value="注册" id="txt-su" disabled class="one">
    </form>
    <script>
        //获取input
        var txtName=document.getElementById('txt-name');//用户名
        var spName=document.getElementById('sp-name');//用户名警告
        
        var txtPwd=document.getElementById('txt-pwd');//密码
        var spPwd=document.getElementById('sp-pwd');//密码警告

        var txtPwds=document.getElementById('txt-pwds');//确认密码
        var spPwds=document.getElementById('sp-pwds');//确认密码警告

        var txtIpend=document.getElementById('txt-ipend');//手机号
        var spIpend=document.getElementById('sp-ipend');//手机号警告

        var txtCh=document.getElementById('txt-ch');//协议
        var txtSu=document.getElementById('txt-su');//注册
        agr(txtCh);
        //改变勾中
        txtCh.onchange=function(){
            agr(this);
        }
        //是否勾中同意协议
        function agr(obj){
            if(obj.checked){
                txtSu.className='two';
                txtSu.disabled=false;
            }else{
                txtSu.className='one';
                txtSu.disabled=true;
            }
        }
        //校验表单
        function check(){
            return name()&&pwd()&&pwds()&&ipend();
        }
        //校验用户名
        function name(){
            var p=/^[a-zA-Z]{8,12}$/;
            if(!p.test(txtName.value)){
                spName.style.display='inline-block';
                return false;
            }else{
                return true;
            }
            
        }
        //校验密码
        function pwd(){
            var p=/^\d{6}/;
            if(!p.test(txtPwd.value)){
                spPwd.style.display='inline-block';
                return false;
            }
            return true;
        }
        //校验确认密码
        function pwds(){
            if(txtPwd.value!=txtPwds.value){
                spPwds.style.display='inline-block';
                return false;
            }
            return true;
        }
        //校验手机号
        function ipend(){
            var p=/^1\d{10}$/;
            if(!p.test(txtIpend.value)){
                spIpend.style.display='inline-block';
                return false;
            }
            return true;
        }
    </script>
</body>