正则式表单验证

Posted 2020-08-31 Monroe.Yu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了正则式表单验证相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            form{
                width: 350px;
                height: 400px;
                background-color:#FAEBD7;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -175px;
                margin-left: -200px;
                font-size:14px;
                line-height: 60px;
            }
            #div1{
                margin-top: 50px;
            }
            span{
                display:inline-block;
                width:100px;
                height:20px;
                text-align:right;
            }
            #denglu{
                position: absolute;
                bottom: 30px;
                left: 90px;
                font-size: 14px;
            }
            #reset{
                position: absolute;
                bottom: 30px;
                left: 180px;
                font-size: 14px;
            }
            a{
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <form action="" method="get" name="myform" onsubmit="return get()">
            <div id="div1">
                <span>用户名：</span>
                <input class="a" type="text" name="username" placeholder="请输入用户名"  />
            </div>

            <div>
                <span>密码：</span>
                <input class="a"  type="password" name="pwd" placeholder="请输入密码" />
            </div>

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

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

            <div>
                <span>用户协议：</span>
                <input onclick="agreeAction()" type="checkbox" name="xuanze[]" />
                <a href="#">用户协议</a>
                <input type="hidden" name="agree" id="agree" value="0"/>

            </div>


            <div>
                <input id="denglu" type="submit" value="登录" />
                <input id="reset" type="reset" />
            </div>
        </form>


        <script>
        var ob=/^[\d \w _]{6,12}$/
        var ob1=/^[\d \w _]{6,20}$/
        var ob2=/^1[3578]\d{9}$/
        var ob3=/^[\d]{8,11}@qq.com$/




        function agreeAction(){
            var agree = document.getElementById(‘agree‘).value;
            if(agree == 0){
                document.getElementById(‘agree‘).value = 1;
            }else{
                document.getElementById(‘agree‘).value = 0;
            }
            }

        function get(){
            var name=document.myform.username.value;
            var pwd=document.myform.pwd.value;
            var tel=document.myform.tel.value;
            var email=document.myform.email.value;
            if(name==""){
                alert(‘请输入用户名‘);
                document.myform.username.focus();
                return false;
            }
            else if(!ob.test(name)){

                alert(‘账号输入不正确请重新输入‘);
            }

            if(pwd==""){
                alert(‘请输入密码‘);
                document.myform.pwd.focus();
                return false;
            }else if(!ob1.test(pwd)){

                alert(‘密码输入不正确请重新输入‘);
            }

            if(tel==""){
                alert(‘请输入手机号‘);
                document.myform.tel.focus();
                return false;
            }else if(!ob2.test(tel)){

                alert(‘手机号输入不正确请重新输入‘);
            }

            if(email==""){
                alert(‘请输入邮箱‘);
                document.myform.email.focus();
                return false;
            }else if(!ob3.test(email)){
                alert(‘邮箱输入错误请重新输入‘)
            }


            var agree = document.getElementById(‘agree‘).value;
            if(agree == 0){
                alert(‘请阅读并且同意用户协议‘);
                return;
            }
            alert(‘数据正确，可以提交‘);

        }




        </script>
    </body>
</html>

以上是关于正则式表单验证的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript 正则表单验证（用户名密码确认密码手机号座机号身份证号）