前端电脑端架构师

思考过程

src\views\regulatoryCenter\oldSupervision\elderlyInformation\olderAdd.vue

Thought

## 方法总结

### 使用的 Element-UI 组件

- el-form - 表单容器，通过 ref="formRef" 获取表单实例

- el-form-item - 表单项，配合 prop 属性绑定 rules 验证规则

### 实现方法

使用 Element-UI 表单的 validate 方法对整个表单进行验证。

```

this.$refs.formRef.validate((valid) 

=> {

  if (valid) {

    // 所有必填项验证通过，切换 tab

    this.tabIndex = this.tabIndex + 

    1

    this.$forceUpdate()

  } else {

    // 验证失败，不切换，显示错误提示

  }

})

```

### 关键点

1. validate vs validateField ：

   - validateField - 验证指定的单个或多个字段，数组中每个字段都会触发一次回调

   - validate - 验证整个表单，只触发一次回调，返回布尔值 valid

2. rules 配置 ：在 rules 中定义必填字段的验证规则

   ```

   rules: {

     name: [{ required: true, 

     message: '请输入姓名', trigger: 

     'blur' }],

     icCard: [{ required: true, 

     message: '请输入身份证号', 

     trigger: 'blur' }],

     // ...

   }

   ```

3. return 语句 ： validate 是异步的，需要 return 阻止后续代码继续执行