form 自定义规则校验2次
时间: 2023-10-09 12:07:06 浏览: 63
您可以使用 Vue.js 的自定义指令来实现表单的自定义规则校验。以下是一个示例:
```vue
<template>
<form>
<label for="email">Email:</label>
<input type="email" id="email" v-model="email" v-validate-email>
<span v-if="emailError" class="error">{{ emailError }}</span>
<label for="password">Password:</label>
<input type="password" id="password" v-model="password" v-validate-password>
<span v-if="passwordError" class="error">{{ passwordError }}</span>
<button type="submit" :disabled="!isValid">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
email: '',
password: '',
emailError: '',
passwordError: '',
};
},
directives: {
'validate-email'(el, binding) {
el.addEventListener('blur', () => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(binding.value)) {
binding.instance.emailError = 'Invalid email format';
} else {
binding.instance.emailError = '';
}
});
},
'validate-password'(el, binding) {
el.addEventListener('blur', () => {
if (binding.value.length < 6) {
binding.instance.passwordError = 'Password must be at least 6 characters long';
} else {
binding.instance.passwordError = '';
}
});
},
},
computed: {
isValid() {
return !this.emailError && !this.passwordError;
},
},
};
</script>
```
在上面的代码中,我们使用 `v-validate-email` 和 `v-validate-password` 指令来分别对 email 和 password 进行校验。这两个指令都绑定了一个事件监听器,当输入框失去焦点时会触发校验逻辑。如果校验不通过,就会将错误信息保存在对应的变量中,并在模板中渲染出来。最后,我们使用 `computed` 计算属性来确定表单是否有效,以决定是否禁用提交按钮。
当然,这只是一个非常简单的示例。在实际应用中,您可能需要更多的校验规则、更复杂的校验逻辑,或者使用第三方的校验库来更方便地实现表单校验。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)