element-plus 表格表单校验 -1

如果您使用的是 element-plus 的表格和表单组件，并且需要进行校验，可以使用其提供的校验规则和自定义校验方法。

对于表格组件，您可以在列定义中添加 `rules` 属性来设置校验规则，例如：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"></el-table-column>
  <el-table-column prop="age" label="年龄" :rules="[{ required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '年龄必须为数字值' }]"></el-table-column>
</el-table>

在上述示例中，我们为姓名和年龄两列设置了校验规则，其中 `required` 表示必填，`type` 表示输入类型。当表格中的数据被修改时，如果不符合校验规则，将会弹出相应的提示信息。

对于表单组件，您可以使用 `el-form` 组件中的 `rules` 属性来设置校验规则，例如：

<el-form :model="form" :rules="rules">
  <el-form-item label="姓名" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="form.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

在上述示例中，我们设置了一个 `form` 对象来存储表单数据，并为姓名和年龄两个字段设置了校验规则。当用户提交表单时，如果不符合校验规则，将会弹出相应的提示信息。

您还可以使用自定义校验方法来实现更复杂的校验逻辑，例如：

<el-form :model="form" :rules="rules">
  <el-form-item label="密码" prop="password">
    <el-input v-model="form.password" type="password"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="password2">
    <el-input v-model="form.password2" type="password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

data() {
  return {
    form: {
      password: '',
      password2: ''
    },
    rules: {
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { validator: this.validatePassword, trigger: 'blur' }
      ],
      password2: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: this.validatePassword2, trigger: 'blur' }
      ]
    }
  }
},
methods: {
  validatePassword(rule, value, callback) {
    if (value.length < 6 || value.length > 16) {
      callback(new Error('密码长度应为6-16位'))
    } else {
      callback()
    }
  },
  validatePassword2(rule, value, callback) {
    if (value !== this.form.password) {
      callback(new Error('两次输入的密码不一致'))
    } else {
      callback()
    }
  },
  submitForm() {
    this.$refs.form.validate(valid => {
      if (valid) {
        // 校验通过，提交表单
      } else {
        // 校验不通过，弹出提示信息
      }
    })
  }
}

在上述示例中，我们为密码和确认密码两个字段设置了自定义校验方法 `validatePassword` 和 `validatePassword2`，用于检查密码长度和两次输入的密码是否一致。在提交表单时，我们调用 `$refs.form.validate` 方法来进行校验，并根据校验结果来决定是否提交表单。