正则完成检验输入框案例

最新推荐文章于 2024-01-10 16:32:03 发布
最新推荐文章于 2024-01-10 16:32:03 发布
阅读量235 收藏
点赞数
分类专栏： 笔记 文章标签： javascript 前端 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50736511/article/details/121662876
版权

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!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>
<style>
    @font-face {
        font-family: "iconfont";
        /* Project id 2979397 */
        src: url('//at.alicdn.com/t/font_2979397_vxwwjjstked.woff2?t=1638340094530') format('woff2'),
            url('//at.alicdn.com/t/font_2979397_vxwwjjstked.woff?t=1638340094530') format('woff'),
            url('//at.alicdn.com/t/font_2979397_vxwwjjstked.ttf?t=1638340094530') format('truetype');
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-zhengque:before {
        content: "\e629";
    }

    .icon-34:before {
        content: "\e68f";
    }

    .father {
        margin: 100px auto;
        width: 400px;
        height: 200px;
        background-color: rgb(255, 245, 227);
        border-radius: 20px;
        padding-top: 30px;
    }

    .father>label {
        margin: 50px;
    }

    .r {
        display: none;
    }

    .e {
        display: none;
    }

    .font {
        font-size: 12px;
        color: rgb(240, 128, 128);
        margin: 0px 30px;
        visibility: hidden;

    }

    .passspan {
        font-size: 12px;
        color: rgb(240, 128, 128);
        margin: 8px 110px;
        visibility: hidden
    }

    .passr {
        display: none;
    }

    .passe {
        display: none;
    }

    .low {
        font-size: 10px;
        display: inline-block;
        padding: 0px 40px;
    }

    .center {
        font-size: 10px;
        display: inline-block;
        padding: 0px 30px;

    }

    .strong {
        font-size: 10px;
        display: inline-block;
        padding: 0px 30px;
    }
</style>

<body>
    <form action="" class="father">
        <label for="">
            用户名：<input type="text" class="input">
            <span class="r "> ⭕</span>
            <span class="e "> ❌</span>
            <div style="padding: 8px;">
                <span class="font">只能由数字字母下划线组成，且开头不能是_的6~12位字符串</span>
            </div>
        </label>
        <label for="">
            密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" class="pass">
            <span class="passr"> ⭕</span>
            <span class="passe"> ❌</span>
            <span class="passspan">密码不能少于8位且不能输入空格</span>
            <p style="font-size: 10px;margin: 15px; display: inline-block;">密码强度:</p>
            <span class="low">弱</span>
            <span class="center">中</span>
            <span class="strong">强</span>
        </label>
    </form>
</body>

</html>

<script>
    //用户名需求
    const ipt = document.querySelector('.input')
    const right = document.querySelector(".r")
    const left = document.querySelector(".e")
    const font = document.querySelector(".font")
    //定义一个正则 []里面是A-Za-z0-9的一个只占一个字符位 {}是站{}里面的字符位
    const res = /^[a-zA-Z0-9]\w{5,11}$/
    ipt.addEventListener('input', function (a) {
        //如果正则检验是对的就改变他们相应的样式
        if (res.test(ipt.value)) {
            right.style.cssText = "display:inline-block;"
            left.style.cssText = "display: none;"
            font.style.visibility = "hidden"
            console.log("正确");
        }
        //如果用户删除了输入框里的内容重置样式
        else if (ipt.value.length == 0) {
            right.style.cssText = "display:none"
            left.style.cssText = "display:none;"
            // visibility:hidden保留原来位置  
            //display:none不保留原来位置
            font.style.cssText = "visibility:hidden;"

        }
        //正则检验不对
        else {
            left.style.cssText = "display:inline-block;"
            right.style.cssText = "display: none;"
            font.style.cssText = "visibility:visible;"
            console.log("错误");
        }

    })
    //密码需求
    const passipt = document.querySelector('.pass')
    const passright = document.querySelector(".passr")
    const passleft = document.querySelector(".passe")
    const pass = document.querySelector(".pass")
    const passspan = document.querySelector(".passspan")
    const low = document.querySelector(".low")
    const center = document.querySelector(".center")
    const strong = document.querySelector(".strong")
    //设置正则 
    //数字
    const res1 = /\d/
    //字母 i不区分大小写
    const res2 = /[a-z]/i
    //特殊符号 []里面只占一位
    const res3 = /[.@#%^]/
    //空格
    const res4 = /\s/
    // if(pass.value.length)
    //input监听输入框内容改变
    pass.addEventListener("input", function () {
        //当输入框字符串小于8个时给出提示
        if (pass.value.length <= 8) {
            passright.style.cssText = "display:none"
            passleft.style.cssText = "display: inline-block;"
            passspan.style.cssText = "visibility:visible;"
            //字符串大于8
        } else {
            passleft.style.cssText = "display:none;"
            passright.style.cssText = "display: inline-block;"
            passspan.style.visibility = "hidden"

        }
        //检验输入框有没有空格
        if (res4.test(passipt.value)) {
            passright.style.cssText = "display:none"
            passleft.style.cssText = "display: inline-block;"
            passspan.style.cssText = "visibility:visible;"
        }
        //当用户删除输入框里的内容
        else if (pass.value.length == 0) {
            passright.style.cssText = "display:none"
            passleft.style.cssText = "display:none;"
            passspan.style.cssText = "visibility:hidden;"
            low.style.cssText = "background-color:none"
            center.style.cssText = "background-color:none"
            strong.style.cssText = "background-color:none"
        }
        //定义一个索引用来记录密码的强弱
        let level = 0
        //满足第一个正则要求
        if (res1.test(passipt.value)) {
            level++
        }
        //满足第二个正则要求
        if (res2.test(passipt.value)) {
            level++
        }
         //满足第三个正则要求
        if (res3.test(passipt.value)) {
            level++
        }
        console.log(level);
        //根据level设置样式
        if (level === 1) {
            low.style.cssText = "background-color: rgb(250, 171, 171);"
            center.style.cssText = "background-color:none"
            strong.style.cssText = "background-color:none"

        } else if (level === 2) {
            center.style.cssText = "background-color: rgb(233, 185, 122);"
            strong.style.cssText = "background-color:none"

        }
        else if (level === 3) {
            strong.style.cssText = "background-color:darkseagreen"
        }
    })

</script>
万事胜意sy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
常用输入框正则验证
12-28
使用正则运算，完成对输入框内容的验证，包含下面内容验证： 1.用户名 2.密码 3.服务器IP或域名 4.服务器端口 5.邮箱地址 6.固定电话或手机号码 7.车牌号
常用输入框验证（使用正则匹配）
wang_liuyong的博客
08-27 1728
使用方法： 使用string.match(reg)匹配到不符合规则的值会返回会NULL // 初始化表单数据 this.mainForm = this.fb.group({ id: [null, [Validators.required,this.contentValidators(/^[a-zA-Z0-9_]{1,}$/)]] }); /** * 输入字符内...
前端常用input输入框正则校验总结及输入框输入限制处理
qq_40868156的博客
04-26 1万+
1.下面是封装好后的工具方法，进行输入框常见的正则校验: // 中文姓名校验器(只能输入汉字，最多10个) export const checkName = name => { return /^[\u4E00-\u9FA5]{1,10}$/.test(name) } // 手机号码校验（只能输入数字，1开头,第二位为3~9，后面9位为1~9） export const checkPhone = phone => { return /^1[3456789]\d{9}$/.test(ph
【正则校验】输入框的校验规则
最新发布
m0_65041204的博客
01-10 857
输入框校验规则、正则校验、限制输入
input 各种正则校验
qq_44716001的博客
07-28 1358
【代码】input 各种正则校验。
正则表达式在线测试工具
10-30
- 通过调用`match()`方法来检测文本中的匹配项。 - 显示匹配结果，如果存在多个匹配，则循环遍历并将它们显示出来。 3. **DOM操作**：利用JavaScript对DOM进行操作，比如更新页面上的内容、清空输入框等。 #### ...
正则表达式验证工具（Regular）及文档
07-13
"正则表达式验证工具（Regular）"是一款专为帮助用户理解和测试正则表达式设计的软件，它允许用户输入正则模式并实时检验其有效性，对初学者来说是一个极好的学习工具。 正则表达式的基本结构包括字符、元字符、...
[课件]DOM操作与实战案例.zip
12-16
1. **页面动态更新**：在用户输入时实时更新显示，例如实时搜索框，可以使用`addEventListener('input')`监听输入框的改变，然后用DOM操作更新结果区域。 2. **图片轮播**：通过改变图片元素的`src`属性，配合...
正则表达式大全
11-09
#### 三、正则表达式案例分析 1. **匹配中文字符** - 正则表达式：`[\u4e00-\u9fa5]` - 描述：匹配所有中文字符。 2. **获取字符串长度（中文按两个字符计算）** - JavaScript 代码： ```javascript String....
正则表达式测试工具
10-18
在这个“正则表达式测试工具”中，我们可以便捷地检验和调试我们的正则表达式，以确保它们能够按照预期工作。 1. **界面设计与易用性** 工具的界面设计简洁明了，符合中文用户的使用习惯。它以javascript编写，这...
输入框正则校验
savivy的博客
10-28 627
~function () { var form = document.getElementById('form'), tel = form.username, pass = form.pass, repass = form.repass, yzm = form.yzm, verify = form.verify, btn = form.btn; var b = document.createE..
前端-input组件-输入内容校验正则表达式大全
吕氏春秋i
03-15 1958
这里说明一下 如果输入超过100 就返回100 当然也可以限制。
表单输入框校验正则表达式汇总
weixin_45824116的博客
09-07 166
表单输入框校验正则表达式
正则表达式验证输入框内容
weixin_39891473的博客
12-06 852
亲测有效 1 只能输入字母和数字和 / . onkeyup="value=value.replace(/[^\w\.\/]/ig,'')" 2 只能输入正整数 onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.val
Input常用的输入框验证(正则)
热门推荐
CodingAnHour
10-19 3万+
1、只是不能输入空格 2、不能输入空格及英文状态下的逗号 3、只能输入数字 最近发现有可能因为手机输入内容联想可以跳过input 中限制只能输入数字 大家额外注意下把     可以在js中在限制下把!  isNaN();验证非数字类型 4、只能输入英文及数字 5、验证首位是汉字 // 汉字 var reg = new Re
input框中的简单正则校验集合
sika-master的博客
05-15 2741
正则校验输入框的值 ` 在做开发的时候经常会要用到正则校验，因为自带的校验满足不了业务需求 基于项目需求，综合一下常用的正则验证 文章目录正则校验输入框的值前言一、只能输入汉字、英文字符和数字二、只能输入数字和+、- 字符（用于电话号校验）待续 前言 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、只能输入汉字、英文字符和数字 val.target.value.replace
input 输入框的各种校验
cdd9527的博客
04-19 3559
input 输入框的各种校验
前端对于input输入框正则校验
m0_75145793的博客
03-22 902
先在input标签里输入val="value=value.replace(/[^\X]/g,'')" 然后在(/[\X]/g,'')里的X替换需要增加的校验,中文u4E00-u9FA5，数字0-9，英文a-z\A-Z，其它符号@、点或其它符号。可以单个也可以多个，中间用\隔开就行了。
输入框基本输入正则
Teamig的博客
05-10 223
https://blog.csdn.net/xh_960125/article/details/111032824
js正则表达式限制输入框中文
04-29
JS正则表达式可以用来限制输入框中文字符。一般情况下，JS正则表达式可以通过匹配字符来判断输入框中文字符是否符合要求。 例如，可以通过以下代码来检查输入框中只能输入中文字符： ``` function validateInput(input) { var reg = /^[\u4e00-\u9fa5]+$/; if (!reg.test(input.value)) { alert("输入框中只能输入中文字符！"); input.value = ""; input.focus(); return false; } return true; } ``` 以上代码中，使用了正则表达式“/^[\u4e00-\u9fa5]+$/”，其中“^”表示匹配输入字符串的开始，“[\u4e00-\u9fa5]”表示匹配所有中文字符，“+”表示匹配字符串1次或多次，“$”表示匹配输入字符串的结尾。 当输入框中输入的字符不符合要求时，会弹出一个提示框，清空输入框中已输入的字符，并将输入框焦点聚焦到该输入框中，让用户重新输入。 需要注意的是，以上代码只能限制输入框中输入中文字符，如果需要限制输入框中输入其它字符，需要相应修改正则表达式。另外，也需要考虑到用户可能会通过其它方式输入非中文字符的情况，如复制粘贴等操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万事胜意sy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值