uview表单对于对象进行规则校验,判断对象user下的子对象person内部name属性值是否为空
时间: 2023-07-05 19:32:01 浏览: 99
可以使用uView表单提供的`rules`属性来对对象进行规则校验,判断对象`user`下的子对象`person`内部`name`属性值是否为空。具体做法如下:
1. 在`<u-form>`标签中使用`v-model`绑定对象`user`:
```html
<u-form :model="user">
<u-form-item label="姓名">
<u-input v-model="user.person.name" placeholder="请输入姓名"></u-input>
</u-form-item>
<!-- 其他表单项省略 -->
<u-form-item>
<u-button type="primary" @click="submitForm">提交</u-button>
</u-form-item>
</u-form>
```
2. 在`data`中定义对象`user`:
```js
data() {
return {
user: {
person: {
name: '',
age: '',
// 其他属性
},
// 其他属性
}
}
}
```
3. 在`<u-form>`标签中使用`rules`属性定义验证规则:
```html
<u-form :model="user" :rules="rules">
<!-- 表单项省略 -->
</u-form>
```
4. 在`data`中定义验证规则`rules`,其中`person.name`属性使用`required`规则:
```js
data() {
return {
user: {
person: {
name: '',
age: '',
// 其他属性
},
// 其他属性
},
rules: {
'person.name': [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
'person.age': [
// 其他规则
]
// 其他属性的规则
}
}
}
```
这样,当用户提交表单时,uView表单会自动校验`user`对象的`person.name`属性是否为空,如果为空,则显示`'请输入姓名'`提示信息。如果校验通过,则执行`submitForm`方法。该方法中可以获取到`user`对象,然后进行其他操作。
阅读全文