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

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

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

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

表单校验实现

// 自定义校验规则
  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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

总结：

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

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

延申：同样的，表单标题也可自定义。如下，使用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>
1
2
3
4
5
6
7
8
9
10
11
12