21.5正则

ohhiya

已于 2024-01-30 13:12:16 修改

阅读量333

点赞数 6

分类专栏： 4A 文章标签： javascript 前端 html

于 2024-01-30 12:22:42 首次发布

本文链接：https://blog.csdn.net/2202_75526478/article/details/135930181

版权

4A 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文展示了使用JavaScript实现的身份证号码验证、表单字段（如用户名、密码、手机号）的合法性检查，以及文本内容中敏感词的过滤替换示例。

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

身份证验证

表单验证

过滤并替换敏感词

身份证验证

 <!-- 案例身份证号码验证 -->
<body>
    <script>
        var str = prompt('请输入要验证的身份证号码：')
        var reg = /^[1-9]\d{5} (18|19|[23]\d)\d{2} (0[1-9]|1[0-2]) ([0-2][1-9]|10|20|30|31) \d{3}[0-9Xx]$/;
        if (reg.test(str)) {
            console.log('您输入的身份证号码合法');
        } else {
            console.log('您输入的身份证号码不合法');
        }
    </script>
</body>

表单验证

  <style>
        label{
            width: 80px;display: inline-block; margin-bottom: 20px;
        }
        input{
            width: 300px; padding: 5px;
        }
        .green{
            color: green;
        }
        .red{
            color: red;
        }
    </style>
</head>

<body>
    <form>
        <label>用户名：</label>
        <input type="text" name="username" placeholder="长度3~10位，英文大小写字母"><span></span><br>
        <label>密码：</label>
        <input type="password" name="pwd" placeholder="长度6~20位，英文大小写字母、数字、下划线"><span></span><br>
        <label>确认密码：</label>
        <input type="password" name="conf" placeholder="请再次输入密码"><span></span><br>
        <label>手机号：</label>
        <input type="text" name="tell" placeholder="以13、15、16、17、18、19开头的11位数字"><span></span><br>
    </form>

    <script>
        // 验证用户名、密码、手机号是否合法
        function checkItem(obj,name,reg){
            var osp = obj.nextElementSibling;
            obj.onblur = function(){
                if (reg.test(obj.value)){
                    osp.innerHTML = '恭喜您' + name + '合法！';
                    osp.className = 'green';
                }else{
                    osp.innerHTML = '您输入的' + name + '不合法，请重新输入！';
                    osp.className = 'red';
                }
            };
        }
        // 验证两次输入密码是否一致
    function checkPwd(obj,previous){
        obj.onblur = function(){
            if (obj.value == previous.value){
                obj.nextElementSibling.innerHTML = '密码正确！';
                obj.nextElementSibling.className = 'green';
            }else{
                obj.nextElementSibling.innerHTML = '两次输入的密码不一致，请重新输入！';
                obj.nextElementSibling.className = 'red';
            }
        }
    }
    // 获取所有input元素
    var oinp = document.getElementsByTagName('input');
    // 调用check Item（）函数
    checkItem(oinp[0],'用户名',/^[a-zA-z]{3,10}$/);
    checkItem(oinp[1],'密码',/^\w{6,20}$/);
    checkItem(oinp[3],'手机号',/^1[356789]\d{9}$/);
    // 调用checkPwd（）函数
    checkPwd(oinp[2],oinp[1]);
    </script>

</body>

过滤并替换敏感词

<body>
    <div>过滤前的内容：<br>
    <textarea id="before" cols="30"  rows="5"></textarea>
    </div>
    <button id="btn">过滤</button>
    <div>过滤后的内容：<br>
        <textarea id="after" cols="30" rows="5"></textarea>
    </div>
    <script>
        document.getElementById('btn').onclick = function(){
            var str = document.getElementById('before').value;
            var reg = /(好)|(坏)/gi;
            var newStr = str.replace(reg,'*');
            document.getElementById('after').value = newStr;
        }
    </script>
</body>