vue3怎么写表单两个校验规则
时间: 2023-07-18 08:35:50 浏览: 48
您好!针对您的问题,您可以在 Vue3 中使用自定义校验规则函数来实现表单的校验。以下是一个示例代码:
```html
<template>
<div>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" v-model="username" />
<div v-if="!validateUsername(username)">
<p>用户名必须是 6-12 位字母或数字</p>
</div>
<div v-if="!validatePassword(password)">
<p>密码必须是 8-16 位字母和数字的组合</p>
</div>
<label for="password">密码:</label>
<input type="password" id="password" v-model="password" />
</form>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
}
},
methods: {
validateUsername(username) {
const reg = /^[a-zA-Z0-9]{6,12}$/
return reg.test(username)
},
validatePassword(password) {
const reg = /^(?=.*\d)(?=.*[a-zA-Z])[a-zA-Z\d]{8,16}$/
return reg.test(password)
},
},
}
</script>
```
在上述代码中,我们通过 `v-model` 绑定了表单输入框的值,并使用 `v-if` 指令来根据校验结果显示或隐藏错误提示。同时,我们在 `methods` 中定义了两个自定义校验规则函数 `validateUsername` 和 `validatePassword`,并使用正则表达式来进行校验。
希望以上回答能够解决您的问题,如有任何疑问,请随时追问!