使用replace清除字符串中的特殊字符,如果清除了,长度发生了变化,就判断用户输入包含特殊字符串,进而清空输入框,并提示用户。

<div id="baba">
        请输入密码:<input type="password" v-model.lazy="userInfo.userPwd" placeholder="长度不得大于10,必须是数字和字母">
    </div>
    <script>
        new Vue({
            el: '#baba',
            data() {
                return {
                    userInfo: {
                        userPwd: '',
                    }
                }
            },
            watch: {
                "userInfo.userPwd": function (newVal, oldVal) {
                    console.log("新值", newVal);
                    console.log("旧值", oldVal);
                    if (newVal.length > 10) {
                        alert("密码过长请重新设置");
                    }else if (newVal.length != newVal.replace(/[^\w]/g, '').length) {
                        //replace就是清除的意思,判断清除特殊字符串后,如果长度和没有清除之前保持一致
                        //那就代表有特殊字符串,就执行这个if代码块
                        alert("只能为数字和字母");
                        this.userInfo.userPwd='';
                    }
                }
            },
        })
    </script>

Logo

前往低代码交流专区

更多推荐