注册页面正则验证

最新推荐文章于 2022-05-28 15:31:21 发布

叶若梦

最新推荐文章于 2022-05-28 15:31:21 发布

阅读量642

点赞数 3

文章标签：正则表达式 html css javascript

本文链接：https://blog.csdn.net/y1668239128/article/details/111825756

版权

要求

验证用户名:长度6-10位之间，首字母必须大写，只能包含，字母、数字和下划线，且必须以字母开头
验证密码:密码长度6-12之间
验证手机号:必须是11位连续的数字，且两侧不能包含其他字符
验证出生日期(2000-09-20):要求年份是4位数字、月份和日期必须是两位数字，年份、月份和日期之间使用""连接

代码

<!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>任务单1</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        /* 输入正确的提示文字样式 */
        .true {
            color: green;
        }
        /* 输入错误的提示文字样式 */
        .false {
            color: red;
        }
        /* 所有输入框的样式 */
        .boxDate input {
            width: 33px;
            height: 18px;
        }
        /* 年份输入框 */
        .boxDate .year {
            width: 50px;
        }
    </style>
</head>
<body>
<div class="box boxUsername">
    <input type="text" placeholder="用户名" class="username">
    <span></span>
</div>
<div class="box boxPassword">
    <input type="text" placeholder="密码" class="password">
    <span></span>
</div>
<div class="box boxPhone">
    <input type="text" placeholder="手机号" class="phone">
    <span></span>
</div>
<div class="box boxDate">
    <input type="text" placeholder="" class="year">
    <i>-</i>
    <input type="text" placeholder="" class="months">
    <i>-</i>
    <input type="text" placeholder="" class="shit">
    <span></span>
</div>
<script>
    // 用户名验证
    // 获取用户名输入框
    var username=document.querySelector('.boxUsername .username');
    // 获取用户名提示框
    var hintName=document.querySelector('.boxUsername span ');
    // 用户框失去焦点
    username.addEventListener('blur',function() {
        var regUsername=/^[A-Z][\w]{6,10}$/
        if(regUsername.test(this.value)) {
            hintName.className='true'
            hintName.innerHTML='用户名格式输入正确'
        } else {
            hintName.className='false'
            hintName.innerHTML='用户名格式输入错误'
        }
    })

    // 密码验证
    // 获取密码输入框
    var password=document.querySelector('.boxPassword .password');
    // 获取密码提示框
    var hintWord=document.querySelector('.boxPassword span');
    // 密码框失去焦点
    password.addEventListener('blur',function() {
        var regPassword=/^[\w]{6,12}$/;
        if(regPassword.test(this.value)) {
            hintWord.className='true'
            hintWord.innerHTML='密码格式输入正确';
        } else {
            hintWord.className='false'
            hintWord.innerHTML='密码格式输入错误';
        }
    })

    // 手机号验证
    // 获取手机号输入框
    var phone=document.querySelector('.boxPhone .phone');
    // 获取手机号提示框
    var hintPhone=document.querySelector('.boxPhone span');
    // 手机号失去焦点
    phone.addEventListener('blur',function() {
        var regPhone=/^[0-9]{11}$/
        if(regPhone.test(this.value)) {
            hintPhone.className='true'
            hintPhone.innerHTML='手机号格式输入正确';
        } else {
            hintPhone.className='false'
            hintPhone.innerHTML='手机号格式输入错误';
        }
    })

    // 出生日期验证
    // 获取年份输入框
    var year=document.querySelector('.boxDate .year');
    // 获取月份输入框
    var months=document.querySelector('.boxDate .months');
    // 获取天数输入框
    var shit=document.querySelector('.boxDate .shit');
    // 获取出生日期提示框
    var hintDate=document.querySelector('.boxDate span');

    // 年份失去焦点
    year.addEventListener('blur',function() {
        var regYear=/^[0-9]{4}$/;
        if(regYear.test(this.value)) {
            hintDate.className='true'
            hintDate.innerHTML='出生日期格式输入正确';
        } else {
            hintDate.className='false'
            hintDate.innerHTML='年份格式输入错误';
        }
    })

    // 月份失去焦点
    months.addEventListener('blur',function() {
        var regMonths=/^[0][0-9]|10|11|12$/;
        if(regMonths.test(this.value)) {
            hintDate.className='true'
            hintDate.innerHTML='出生日期格式输入正确';
        } else {
            hintDate.className='false'
            hintDate.innerHTML='月份格式输入错误';
        }
    })

    // 日期失去焦点
    shit.addEventListener('blur',function() {
        var regShit=/^[0-2][0-9]|30|31$/;
        if(regShit.test(this.value)) {
            hintDate.className='true'
            hintDate.innerHTML='出生日期格式输入正确';
        } else {
            hintDate.className='false'
            hintDate.innerHTML='日期格式输入错误';
        }
    })
</script>
</body>
</html>

效果图

在这里插入图片描述

叶若梦

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
注册页面正则验证

要求验证用户名:长度6-10位之间，首字母必须大写，只能包含，字母、数字和下划线，且必须以字母开头验证密码:密码长度6-12之间验证手机号:必须是11位连续的数字，且两侧不能包含其他字符验证出生日期(2000-09-20):要求年份是4位数字、月份和日期必须是两位数字，年份、月份和日期之间使用""连接代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> &l
复制链接

扫一扫