使用正则表达式验证用户名

Question

我正在尝试使用正则表达式验证 Vue 中的用户名字段。 我在文本框上有一个按键事件，并且在每个按键上都调用了以下方法

userNameValidation(event) {
        if (!event.key.match(/^[a-zA-Z0-9._]+$/)) {
            event.preventDefault();
        }
    }    

这个正则表达式的问题是它允许. 和_在我不想要的开头。
我希望用户名包含字母、数字、 . 和_它应该以字母开头。

Answer 1

使用两个字符集，一个在开始时匹配[az]一次，然后是更宽松的一个匹配零次或多次。

/^[az][a-z0-9._]*$/i

Answer 2

而不是验证按键事件。 您可以一次验证模糊上的用户名字段以匹配整个正则表达式。

演示：

 new Vue({ el: '#app', data: { username: null }, methods: { validateUserName() { if (!this.username.match(/^[az][a-z0-9._]*$/i)) { console.log('validation not passed!'); event.stopPropagation(); } else { console.log('validation passed!'); } } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> User Name : <input type="text" v-model="username" @blur="validateUserName"/> </div>