b站pink老师JavaScript的ES6面向对象课程中：正则表达式案例代码—

b站pink老师JavaScript的ES6面向对象课程中：正则表达式案例代码——表单验证

news2024/11/27 12:52:14

目标效果：

1.当输入的手机号，QQ号，昵称，短信验证码，登录密码，确认密码：如果符合标准，就提示正确的文字;如不符合标准，则提示不正确。

2.判断确认密码是否与登录密码相等，来看确认密码是否正确。

3.手机号正则表达式：/^1[3|4|5|7|8][0-9]{9}$/（11位）

QQ号正则表达式：[1-9][0-9]{4,} (腾讯QQ号从10000开始)

昵称正则表达式：/^[\u4e00-\u9fa5]{2,8}$/（2-8位的汉字）

短信验证码正则表达式：/^\d{6}$/（6位的数字）

登录密码正则表达式：/^[a-zA-Z0-9_-]{6,16}$/（6-16位的数字,大小写字母，下划线和短横线）

e.g.1初始状态

e.g.2输入的手机号不符合标准

e.g.3输入的手机号符合标准

e.g.4所有内容符合标准

代码部分：

1.reg.js部分（全是重点）

window.onload = function () {
    var regtel = /^1[3|4|5|7|8]\d{9}$/;//手机号的正则表达式 11位
    var regqq = /^[1-9]\d{4,}$/;//qq号的正则表达式 从10000开始
    var regnc = /^[\u4e00-\u9fa5]{2,8}$/;//昵称的正则表达式 2-8位的汉字
    var regmsg = /^\d{6}$/;//验证码的正则表达式 6位的数字
    var regpwd = /^[a-zA-Z0-9_-]{6,16}$/;//密码的正则表达式 6-16位的数字,大小写字母，下划线和短横线
    var tel = document.querySelector('#tel');
    var qq = document.querySelector('#qq');
    var nc = document.querySelector('#nc');
    var msg = document.querySelector('#msg');
    var pwd = document.querySelector('#pwd');
    var surepwd = document.querySelector('#surepwd');
    regexp(tel, regtel);//传递 手机号参数 和 手机号的正则表达式，调用函数regexp
    regexp(qq, regqq);//传递 qq号参数 和 qq号的正则表达式，调用函数regexp
    regexp(nc, regnc);//传递 昵称参数 和 昵称的正则表达式，调用函数regexp
    regexp(msg, regmsg);//传递 验证码参数 和 验证码的正则表达式，调用函数regexp
    regexp(pwd, regpwd);//传递 密码参数 和 密码的正则表达式，调用函数regexp
    function regexp(ele, reg) {//封装一个表单验证函数regexp，如果符合标准，就提示正确的文字;如不符合标准，则提示不正确
        //ele是传递过来的参数，reg是该参数对应的正则表达式
        ele.onblur = function () {
            if (reg.test(this.value)) {
                // console.log('正确的');
                this.nextElementSibling.className = 'success';
                this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
            } else {
                // console.log('不正确');
                this.nextElementSibling.className = 'error';
                this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正确，请重新输入';
            }
        }
    }
    surepwd.onblur = function () {
        if (this.value == pwd.value) {
            this.nextElementSibling.className = 'success';
            this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
        } else {
            this.nextElementSibling.className = 'error';
            this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 两次密码输入不一致';
        }
    }
}

2.register.html部分（辅助作用，用于查看结构）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <!-- 初始化css -->
    <link rel="stylesheet" href="css/base.css">
    <!-- register css文件 -->
    <link rel="stylesheet" href="css/register.css">
    <script src="js/reg.js"></script>
</head>

<body>
    <div class="w">
        <!-- header -->
        <div class="header">
            <div class="logo">
                <a href="index.html">
                    <img src="img/logo.png" alt="">
                </a>
            </div>
        </div>
        <!-- registerarea -->
        <div class="registerarea">
            <h3>
                注册新用户
                <em>
                    我有账号，去<a href="login.html">登陆</a>
                </em>
            </h3>
            <div class="reg_form">

                <form action="demo.php">
                    <ul>
                        <li>
                            <label for="tel">手机号:</label>
                            <input type="text" class="inp" id="tel">
                            <span></span>
                        </li>
                        <li>
                            <label for="">QQ:</label>
                            <input type="text" class="inp" id="qq">
                            <span></span>
                        </li>
                        <li>
                            <label for="">昵称:</label>
                            <input type="text" class="inp" id="nc">
                            <span></span>
                        </li>
                        <li>
                            <label for="">短信验证码:</label>
                            <input type="text" class="inp" id="msg">
                            <span></span>
                        </li>
                        <li>
                            <label for="">登陆密码:</label>
                            <input type="text" class="inp" id="pwd">
                            <span></span>
                        </li>
                        <li class="safe">
                            安全程度
                            <em class="ruo">弱</em>
                            <em class="zhong">中</em>
                            <em class="qiang">强</em>
                        </li>

                        <li>
                            <label for="">确认密码:</label>
                            <input type="text" class="inp" id="surepwd">
                            <span></span>
                        </li>
                        <li class="agree">

                            <input type="checkbox">同意协议并注册
                            <a href="#">《知果果用户协议》</a>
                        </li>
                        <li>
                            <input type="submit" value="完成注册" class="over">
                        </li>
                    </ul>
                </form>

            </div>
        </div>
        <div class="footer">
            <p class="links">
                关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U
            </p>

            <p class="copyright">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                京ICP备08001421号京公网安备110108007702
            </p>
        </div>
    </div>
</body>

</html>

3.register.css部分（辅助作用）

.w {
    width: 1200px;
    margin: auto;
}

.header {
    height: 82px;
    border-bottom: 2px solid #b1191a;
}

.logo {
    padding-top: 15px;
}

.registerarea {
    height: 580px;
    border: 1px solid #ccc;
    margin-top: 20px;
}

.registerarea h3 {
    height: 40px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    padding: 0 10px;
    font-weight: 400;
    line-height: 40px;
    font-size: 18px;
}

.registerarea h3 em {
    float: right;
    font-size: 14px;
}

.registerarea a {
    color: #c81623;
}

.reg_form {
    width: 600px;
    height: 400px;
    margin: 40px auto 0;
}

.reg_form li {
    margin-bottom: 15px;
}

.reg_form label {
    display: inline-block;
    width: 100px;
    height: 36px;
    line-height: 36px;
    text-align: right;
}

.inp {
    width: 238px;
    height: 34px;
    border: 1px solid #ccc;
    margin-left: 10px;
}

.error {
    color: #df3033;
    margin-left: 10px;
}

.error_icon,
.success_icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../img/error.png) no-repeat;
    vertical-align: middle;
    margin-top: -2px;
}

.success {
    color: #40b83f;
    margin-left: 10px;
}

.success_icon {
    background-image: url(../img/success.png);
}

.safe {
    padding-left: 187px;
    color: #b2b2b2;
}

.safe em {
    padding: 0 12px;
    color: #fff;
}

.ruo {
    background-color: #de1111;
}

.zhong {
    background-color: #40b83f;
}

.qiang {
    background-color: #f79100;
}

.agree {
    padding-top: 20px;
    padding-left: 100px;
}

.agree input {
    vertical-align: middle;
    margin-right: 5px;
}

.agree a {
    color: #1ba1e6;
}

.over {
    width: 200px;
    height: 34px;
    background-color: #c81623;
    margin: 30px 0 0 130px;
    border: none;
    color: #fff;
    font-size: 14px;
}

.footer {
    height: 120px;
    text-align: center;
}

.links {
    margin-top: 20px;
    height: 30px;
}

.copyright {
    line-height: 20px;
}

4.base.css部分（辅助作用）

/*清除元素默认的内外边距  */
* {
    margin: 0;
    padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {
    font-style: normal;
}
/*去掉列表前面的小点*/
li {
    list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
    border: 0;  /*ie6*/
    vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
    cursor: pointer;
}
/*取消链接的下划线*/
a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #e33333;
}

button,
input {
    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    /*取消轮廓线 蓝色的*/
    outline: none;
}

body {
    background-color: #fff;
    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    color: #666
}

.hide,
.none {
    display: none;
}
/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/27142.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！