用户名输入必须是6-12位的大小写字母或者6-12位的大小写字母加数字 vue3.0 rules
时间: 2024-09-19 22:04:35 浏览: 30
在 Vue 3.0 中,如果你想要设置一个验证规则,确保用户名只允许6到12位的大小写字母或包含数字,可以使用 `vuelidate` 或者自定义的 `rules` 配置。这里是一个例子:
```javascript
import { required, length, alphaNum } from 'vuelidate/lib/validators';
export default {
data() {
return {
username: '',
};
},
validations: {
username: {
required,
// 这里设置了6到12位长度,并且只能包含字母和数字
length: { between: [6, 12] },
alphaNum: {},
},
},
};
```
在这个配置中,`required` 确保字段非空,`length.between` 检查长度是否在指定范围内,`alphaNum` 则验证字符是否仅限于字母和数字。
如果你想直接在模板上使用 `v-model` 和 `v-bind:class` 来动态展示验证状态,你可以这样做:
```html
<input v-model="username" :class="{ 'is-invalid': $v.username.$invalid && !$v.username.$pristine }">
```
这会根据验证结果给输入框添加相应的 CSS 类,显示验证失败时的状态。