表单验证登陆注册判断

熊他丫的

已于 2024-09-09 08:46:43 修改

阅读量182

点赞数

分类专栏： JavaScript html 文章标签： html javascript

于 2021-11-16 08:57:30 首次发布

本文链接：https://blog.csdn.net/m0_62791728/article/details/121348225

版权

前端开发 JavaScript 表单验证正则表达式用户体验

关键词由CSDN通过智能技术生成

JavaScript 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

5 篇文章 0 订阅

订阅专栏

<body>

    <div>请输入账号：<input type="text"><span></span><b><em style="color: red;">*</em> 用户名以字母开头，必须数字和字母的组合</b></div>

    <div>请输入密码：<input type="text"><span></span><b><em style="color: red;">*</em>必须字母和数字的组合，5--10</b></div>

    <div>请输入手机号：<input type="text"><span></span></div>

    <div>请输入邮箱：<input type="text"><span></span></div>

    <button>提交</button>

    <script>

        var ipt=document.getElementsByTagName('input');

        var span=document.getElementsByTagName('span');

        var btn=document.getElementsByTagName("button")[0];

        function cheakUser(){

            var value=ipt[0].value;

            var pattern=/^[a-zA-Z](?!^[0-9]+$)(?!^[a-z]+$)(?![A-Z]+$)[0-9a-zA-Z]{2,11}$/;

            if(pattern.exec(value)==null){

                span[0].innerText='错误';

                span[0].style.color='red';

                return false;

            }else{

                span[0].innerText='正确';

                span[0].style.color='green';

                return true;

            }

        }

        ipt[0].onblur=cheakUser

        function cheakPass(){

            var value=ipt[1].value;

            var pattern=/^(?!^[0-9]+$)(?!^[a-z]+$)(?![A-Z]+$)[0-9a-zA-Z]{5,10}$/;

            if(pattern.exec(value)==null){

                span[1].innerText='错误';

                span[1].style.color='red';

                return false;

            }else{

                span[1].innerText='正确';

                span[1].style.color='green';

                return true;

            }

        }

        ipt[1].onblur=cheakPass;

        function cheakTel(){

            var value=ipt[2].value;

            var pattern=/^1[3-8][0-9]{9}$/;

            if(pattern.exec(value)==null){

                span[2].innerText='错误';

                span[2].style.color='red';

                return false;

            }else{

                span[2].innerText='正确';

                span[2].style.color='green';

                return true;

            }

        }

        ipt[2].onblur=cheakTel;

        function cheakEmail(){

            var value=ipt[3].value;

            var pattern = /^[a-z0-9]\w{2,5}@[0-9a-z]{2,5}\.com$/

            if(pattern.exec(value)==null){

                span[3].innerText='错误';

                span[3].style.color='red';

                return false;

            }else{

                span[3].innerText='正确';

                span[3].style.color='green';

                return true;

            }

        }

        ipt[3].onblur=cheakEmail;

        btn.onclick=function(){

            if(cheakUser()&&cheakPass()&&cheakTel()&&cheakEmail()){

                alert('提交成功');

            }else{

                alert('提交失败');

            }

        }

    </script>

</body>