表单验证与正则表达式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Ruoyang666/article/details/85166531

问题:一个注册界面,包括用户名、密码、确认密码、邮箱,对其进行表单验证,要求:
各项都不能为空,
用户名由字母数字下划线组成,不能使用数字开头,
密码长度必须大于6位,但不能超过15位,
密码和确认密码内容需要相同,
邮箱必须符合邮箱的规则

<html>
    <body>
        <form>
            <div>
                用户名:<input type="text" name="username" id="username" />
            </div>
            <div>
                密码:<input type="password" name="password" id="password" onClick="ckpassword()"/>
            </div>
            <div>
                确认密码:<input type="password" name="secondpwd" id="secondpwd" onClick="cksecondpwd()"/>
            </div>
            <div>
                邮箱:<input type="text" name="email" id="email" onClick="ckemail()"/>
            </div>
            <div>
                <input type="button" value="提交" onClick="mysubmit()"/>
            </div>
        </form>
    </body>
    <script type="text/javascript">
        function ckpassword(){
            var username=document.getElementById("username").value;
            if(username==""){
                alert("用户名不能为空!");
                return false;
            }else{
                var reg=/\d/;
                var reg2=/[a-zA-Z0-9_]/;
                if(reg.test(username.substring(0))){
                    alert("用户名不能以数字开头!");
                    return false;
                }else{
                    if(!reg2.test(username)){
                        alert("用户名应该由字母数字下划线组成");
                        return false;
                    }
                }
            }
            
        };
        function cksecondpwd(){
            var username=document.getElementById("username").value;
            var password=document.getElementById("password").value;
            if(username==""){
                alert("用户名不能为空!");
                return false;
            }else if(password==""){
                alert("密码不能为空!");
                return false;
            }else{
                if(!(password.length>6)){
                    alert("密码长度必须大于6位!");
                    false;
                }else if(!(password.length<=15)){
                    alert("密码长度不能超过15位!");
                    false;
                }
            }
        };
        function ckemail(){
            var username=document.getElementById("username").value;
            var password=document.getElementById("password").value;
            var secondpwd=document.getElementById("secondpwd").value;
            if(username==""){
                alert("用户名不能为空!");
                return false;
            }else if(password==""){
                alert("密码不能为空!");
                return false;
            }else if(secondpwd==""){
                alert("确认密码不能为空!");
                return false;
            }else{
                if(!(password==secondpwd)){
                    alert("密码和确认密码内容需要相同!");
                    return false;
                }
            }
        };
        function mysubmit(){
            var username=document.getElementById("username").value;
            var password=document.getElementById("password").value;
            var secondpwd=document.getElementById("secondpwd").value;
            var email=document.getElementById("email").value;
            if(username==""){
                alert("用户名不能为空!");
                return false;
            }else if(password==""){
                alert("密码不能为空!");
                return false;
            }else if(secondpwd==""){
                alert("确认密码不能为空!");
                return false;
            }else if(email==""){
                alert("邮箱不能为空!");
                return false;
            }else{
                var reg=new RegExp(/([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/);
                if(!reg.test(email)){
                    alert("邮箱必须符合邮箱的规则!");
                    return false;
                }
                alert("提交成功");
            }
        }
    
    </script>
</html>

猜你喜欢

转载自blog.csdn.net/Ruoyang666/article/details/85166531
今日推荐