js学习周结

最新推荐文章于 2024-08-17 14:49:37 发布

前端小白在前进

最新推荐文章于 2024-08-17 14:49:37 发布

阅读量132

点赞数 3

本文链接：https://blog.csdn.net/m0_52040370/article/details/117381358

版权

本文介绍了JavaScript中正则表达式的使用，包括通过RegExp对象和字面量方式创建正则，以及使用test方法进行字符串匹配。接着展示了表单验证的案例，涉及手机号、QQ号、昵称和验证码的正则验证，当输入不符合规范时显示错误提示，否则显示正确反馈。最后，给出了一个注册页面的实例，包含手机号、QQ号、昵称和验证码的验证，并展示了密码强度的实时评估。

摘要由CSDN通过智能技术生成

正则表达式在js中的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //1.利用regExp对象来创建 正则表达式
        var regexp = new RegExp(/123/)
        console.log(regexp);
        // 2.利用字面量来创建 正则表达式
        var rg = /123/
        // test方法检测输入的字符串是否符合正则表达式要求的规范
        console.log(rg.test(123));
        console.log(rg.test('abc'));
    </script>
</body>
</html>

表单验证案例

window.addEventListener('load',function(){
    var regtel = /^1[3|4|5|7|8]\d{9}$/; // 手机号码的正则表达式
    var qqreg = /^[1-9]\d{4,}$/ //qq的正则表达式
    var nichengreg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/ //昵称的正则表达式
    var mesreg = /^\d{6}$/ //验证码的正则表达式
    var tel = document.querySelector('.tel')
    var qq = document.querySelector('.qq')
    var mes = document.querySelector('.mes')
    var nicheng = document.querySelector('.nicheng')
    regexp(tel,regtel) //手机号验证
    regexp(qq,qqreg)
    regexp(nicheng,nichengreg)
    regexp(mes,mesreg)
    // 表单验证函数
    function regexp(ele,reg) {
        ele.addEventListener('blur',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> 您的输入不正确'
            }
        })
    }
})

注册页面的案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人注册</title>
    <link rel="shortcut icon" href="favicon.ico" />
    <!--    引入我们初始化样式文件-->
    <link rel="stylesheet" href="css/base.css">
<!--    引入我们自己注册的css页面-->
    <link rel="stylesheet" href="css/register.css">
    <script src="js/reg.js"></script>
</head>
<body>
<div class="w">
    <header>
        <div class="logo">
            <a href="index.html">
                <img src="images/logo.png" alt="">
            </a>
        </div>
    </header>
    <div class="registerarea">
        <h3>注册新用户
        <div class="login">我有账号,去<a href="#">登陆</a></div>
        </h3>
        <div class="reg_form">
            <form action="">
                <ul>
                    <li><label for="">手机号:</label> <input type="text" class="inp tel">
                        <span class=""></span></li>
                    <li><label for="">QQ:</label> <input type="text" class="inp qq">
                            <span class="error"></span></li>
                    <li><label for="">昵称:</label> <input type="text" class="inp nicheng">
                                <span class="error"></span></li>
                    <li><label for="">短信验证码：</label> <input type="text" class="inp mes">
                        <span class="success"></span></li>
                    <li><label for="">登录密码：</label> <input type="password" class="inp">
                        <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
                    <li class="safe">安全程度 <em class="ruo">弱</em> <em class="zhong">中</em> <em class="qiang">强</em> </li>
                    <li><label for="">确认密码：</label> <input type="password" class="inp">
                        <span class="error"> <i class="error_icon"></i> 手机号码格式不正确，请从新输入 </span></li>
                    <li class="agree"><input type="checkbox" id="" name="">同意协议并注册
                        <a href="#">《知晓用户协议》</a>
                    </li>
                    <li><input type="submit" value="完成注册" class="btn"></li>
                </ul>
            </form>
        </div>
    </div>
    <footer>
        <div class="mod_copyright">
            <div class="links">
                <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |
                品优购公益 | English Site | Contact U
            </div>
            <div class="copyright">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                京ICP备08001421号京公网安备110108007702
            </div>
        </div>
    </footer>
</div>
</body>
</html>

.w {
    width: 1200px;
    margin: 0 auto;
}
header {
    height: 84px;
    border-bottom: 2px solid #c81523;
}
.logo {
    padding-top: 18px;
}
.registerarea {
    margin-top: 20px;
    height: 522px;
    border: 1px solid #ccc;
}
.registerarea h3 {
    height: 43px;
    border-bottom: 1px solid #ccc;
    background-color: #ececec;
    line-height: 42px;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 400;
}
.registerarea .login {
    float: right;
    font-size: 14px;
}
.registerarea .login a {
    color: #c81623;
}
.reg_form {
    width: 600px;
    margin: 50px auto 0;
}
.reg_form ul li {
    margin-bottom: 20px;
}
.reg_form ul li label {
    display: inline-block;
    width: 88px;
    text-align: right;
}
.reg_form ul li .inp {
    width: 242px;
    height: 37px;
    border: 1px solid #ccc;
}
.error {
    color: #c81523;
}
.error_icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url("../images/error.png") no-repeat;
    margin-top: -2px;
}
.success {
    color: green;
}
.success_icon {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    background: url("../images/success.png") no-repeat;
    margin-top: -2px;
}
.safe {
    padding-left: 167px;
}
.safe em {
    padding: 0 12px;
    color: #fff;
}
.safe .ruo {
    background-color: #de1111;
}
.zhong {
    background-color: #40b83f;
}
.qiang {
    background-color: #f79100;
}
.agree {
    padding-left: 95px;
}
.agree input {
    vertical-align: middle;
}
.agree a {
    color: #1b1ae6;
}
.btn {
    width: 200px;
    height: 34px;
    background-color: #c81623;
    font-size: 14px;
    color: #ffff;
    margin: 30px 0 0 70px;
}
.mod_copyright {
    text-align: center;
    padding-top: 20px;
}
.links {
    margin-bottom: 15px;
}
.links a {
    margin: 0 3px;
}
.copyright {
    line-height: 20px;
}

前端小白在前进

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js学习周结

正则表达式在js中的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &.
复制链接

扫一扫