04. element-ui form表单校验：自定义error内容

最新推荐文章于 2023-12-01 09:01:37 发布

原创最新推荐文章于 2023-12-01 09:01:37 发布 · 7.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5 #elementui

前端进阶专栏收录该内容

63 篇文章

订阅专栏

本文介绍了如何在Element-UI的form表单中实现自定义校验规则和错误提示。通过示例展示了两种方式，一种是仅显示文本错误信息，另一种是利用error插槽创建自定义的错误提示，包括添加超链接和自定义样式。同时，还提及了如何使用label插槽自定义表单标题。这种方式允许开发者丰富表单验证错误时的反馈内容，并提供更友好的用户体验。

element-ui的form表单，可自定义校验规则，也可对错误提示自定义设定

form表单自定义校验及错误提示，有两种方式

方式一：错误信息只显示文本
方式二：自定义错误提示

表单校验实现

// 自定义校验规则
  validateDockerfile (rule, value, callback) {
    let res
    if(!value) {
      res = rule.required ? new Error('请输入自定义文件内容') : undefined
    } else {
      const val = value.split('\n')
      val.forEach(element => {
        const valid = fn(element ) // fn():假设的element校验方法
        if(valid) {
          res = new Error('自定义文件内容输入不正确')
        }
      })
    }
    callback(res)
  }

// data:定义rules
rules: any = {
	'buildConfigData:dockerfile': [
	   { required: true, trigger: 'blur',validator: this.validateDockerfile }
	 ]
}

//html：使用error插槽，创建自定义风格的错误显示结果，不使用则在错误时显示validateDockerfile 里new Error所定义的文本
<el-form-item label="dockerfile内容"
      prop="buildConfigData:dockerfile"
      key="dockerfile">
      <el-input type="textarea"
        autosize
        placeholder="请输入dockerfile内容"
        v-model="form.buildConfigData.dockerfile"></el-input>
      <span slot="error"
        class="item-error">
        自定义内容格式不正确，详情请<a class="normal-color" target="_blank" href="http://...">参考文档</a>
      </span>
</el-form-item>

总结：

error插槽提供自定义错误信息的能力，丰富表单校验错误时所展示的内容、及提供用户自定义的操作（如添加超链接、自定义本文样式等），使用方式如下即可：

<span slot="error"
    class="item-error">
    自定义内容格式不正确，详情请<a class="normal-color" target="_blank" href="http://...">参考文档</a>
 </span>

延申：同样的，表单标题也可自定义。如下，使用label插槽：

<el-form-item label="dockerfile内容"
      prop="buildConfigData:dockerfile"
      key="dockerfile">
      <span slot="label">
      	<a target="_blank" href="http://...">检&nbsp;查&nbsp;结&nbsp;果</a>：
      </span>
      <el-input type="textarea"></el-input>
      <span slot="error"
        class="item-error">
        自定义内容格式不正确，详情请<a class="normal-color" target="_blank" href="http://...">参考文档</a>
      </span>
</el-form-item>