elementui表单校验

Question

页面初始化就表单校验，

<el-form-item :label="$t('userManual.userManualTag')" prop="userManualTagId">
              <template>
                <el-select
                  v-model="model.userManualTagId"
                  :placeholder="$t('reminder.select')"
                  remote
                  :loading="loading"
                  value-key="userManualTagId"
                >
                  <el-option v-for="item in model.userManualTagList" :key="item.userManualTagId" :label="item.title" :value="item.userManualTagId"> </el-option>
                </el-select>
              </template>
            </el-form-item>

然后校验规则是这个
userManualTagId: [{ required: true, message: this.$t('reminder.select'), trigger: 'change', type:'string'}],
编辑回显的时候userManualTagId是空字符串，为什么直接就提示请选择了，不是表单提交的时候userManualTagId为空才校验吗

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题解答

您的问题是关于 ElementUI 表单校验的，具体来说是页面初始化时就进行表单校验。

ElementUI 提供了 el-form 和 el-form-item 两个组件来实现表单的创建和校验。el-form 组件可以用来包裹表单项，el-form-item 组件可以用来包裹单个表单项。

在您的代码中，您使用了 el-form-item 组件，并且使用了 prop 属性来指定该表单项的校验规则。prop 属性的值是表单项的名称，ElementUI 会根据这个名称来找到对应的校验规则。

如果您想在页面初始化时就进行表单校验，可以使用 el-form 组件的 validate 方法。例如：

<template>
  <el-form :model="form" :rules="rules" ref="form" @validate="handleValidate">
    <el-form-item :label="$t('userManual.userManualTag')" prop="userManualTagId">
      <!-- 表单项内容 -->
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      rules: {
        userManualTagId: [
          { required: true, message: 'Please input user manual tag id' }
        ]
      }
    }
  },
  methods: {
    handleValidate() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          // 表单校验失败
        } else {
          // 表单校验成功
        }
      })
    }
  }
}
</script>

在上面的代码中，我们使用 el-form 组件的 validate 方法来校验表单。validate 方法会根据 rules 对象中的规则来校验表单项。如果表单项的值不满足规则，validate 方法将返回 false，否则将返回 true。

在 handleValidate 方法中，我们使用 validate 方法来校验表单，然后根据校验结果来处理表单校验的结果。

希望这可以帮助您解决问题。如果您有任何其他问题，请随时问我。