VUE 编写校验规则 比如 姓名为空时 年龄不必校验 姓名不为空时 校验年龄字段
时间: 2024-05-06 15:18:12 浏览: 59
在 Vue 中,可以使用自定义校验函数来实现这种校验规则。首先,在表单中设置 `v-model` 绑定姓名和年龄字段:
```html
<template>
<form>
<label>姓名:</label>
<input type="text" v-model="name" />
<br />
<label>年龄:</label>
<input type="number" v-model="age" />
<br />
<button @click.prevent="submitForm">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
name: '',
age: null
}
},
methods: {
submitForm() {
// 提交表单
}
}
}
</script>
```
然后,在 `data` 中添加一个变量 `nameRequired` 用来表示姓名是否必填,以及一个自定义校验函数 `validateAge`:
```js
export default {
data() {
return {
name: '',
age: null,
nameRequired: false
}
},
methods: {
submitForm() {
// 提交表单
},
validateAge(rule, value, callback) {
if (this.nameRequired && !value) {
callback(new Error('请输入年龄'))
} else {
callback()
}
}
}
}
```
最后,在表单元素上设置校验规则:
```html
<template>
<form>
<label>姓名:</label>
<input type="text" v-model="name" />
<br />
<label>年龄:</label>
<input type="number" v-model="age" :disabled="!name" :rules="[{
validator: validateAge,
trigger: 'blur'
}]" />
<br />
<button @click.prevent="submitForm">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
name: '',
age: null,
nameRequired: false
}
},
methods: {
submitForm() {
// 提交表单
},
validateAge(rule, value, callback) {
if (this.nameRequired && !value) {
callback(new Error('请输入年龄'))
} else {
callback()
}
}
}
}
</script>
```
其中,通过 `:disabled="!name"` 控制年龄输入框的禁用状态,而 `:rules` 则指定了校验规则,包括校验函数和触发方式。在校验函数中,通过判断 `nameRequired` 和 `value` 的值来决定是否校验年龄字段。
阅读全文