代码-JS之注册页面验证

最新推荐文章于 2022-06-02 16:33:14 发布

羊驼可以吃吗

最新推荐文章于 2022-06-02 16:33:14 发布

阅读量1.2k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<form name="f1" action="06tanlan.php" method="post">
    用户名：<input type="text" name="username"><span>长度为4~10位的数字字母组合</span><br>
    密　码：<input type="text" name="pwd"><span>不能使用特殊符号，长度至少6位</span><br>
    手　机：<input type="text" name="tel" /><span></span><br>
    邮　箱：<input type="text" name="email"><span></span><br>
    <input type="submit" value="提交">
</form>

<script>

    //单独判断密码强度
    document.f1.pwd.onkeyup = function(){
        //验证密码（带密码强度：纯数字，纯小写字母，纯大写字母表示弱，二者组合表示中，三者都有表示强）
        if(!/^[a-z0-9]{6,}$/gi.test(this.value)){
            this.nextSibling.innerHTML = '请输入长度大于6位的数字字母组合';
        }else if(/(^[0-9]+$)|(^[a-z]+$)|(^[A-Z]+$)/g.test(this.value)){
            //弱
            this.nextSibling.innerHTML = '密码强度弱';
        }else if(/(^[0-9a-z]+$)|(^[0-9A-Z]+$)|(^[A-z]+$)/g.test(this.value)){
            //中
            this.nextSibling.innerHTML = '密码强度中';
        }else{
            //强
            this.nextSibling.innerHTML = '密码强度强';
        }
    };

    //绑定onsubmit事件
    document.f1.onsubmit = function(){
        //验证用户名
        if(!/^[a-z0-9]{4,10}$/gi.test(this.username.value)){
            alert('用户名请输入4~10位的数字字母组合');
            return false;
        }
        //验证密码
        if(!/^[a-z0-9]{6,}$/gi.test(this.pwd.value)){
            alert('密码请输入大于6位的数字字母组合');
            return false;
        }
        //验证手机
        if(!/^1(32|33|34|35|86)\d{8}$/g.test(this.tel.value)){
            alert('手机号格式不正确');
            return false;
        }
        //验证邮箱
        if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.email.value)){
            alert('邮箱格式不正确');
            return false;
        }
    };
</script>

</body>
</html>