问题1：

Elementui在重置表单时，无法使用this.$refs[‘formRefVal‘].resetFields()清空表单数据；

---

必须为每一个 el-form-item 配置一个指定的 prop 参数，this.$refs[‘formRefVal‘].resetFields() 它会跟进初始值，还原原来的值。

根据文档显示，resetFields是对整个表单进行重置，将所有字段值重置为空并移除校验结果。但是实际上resetFields是清空validateMessage，然后把值重置成了上一次初始化的值。

form的每个item加prop属性，需要和绑定数据的最后名称一致
（即与 v-model 指定的值要和 prop 的参数值要一致）

参考链接

1. Elementui在重置表单时，无法使用this.$refs[‘formRefVal‘].resetFields()清空表单数据；

在配置上面的 this.$refs[‘formRefVal‘].resetFields() 会报如下错误，笔者觉得可能是组件的加载顺序问题。

[Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'resetFields')"

---

问题2：

如何自定义表单内组件的长度

---

<el-form-item prop="name" label="名称">
<el-input v-model="testform.name" autocomplete="off" style="width:80%;"></el-input>
</el-form-item>
<el-form-item prop="age" label="年龄">
<el-input v-model="testform.age" autocomplete="off" style="width:100%;"></el-input>
</el-form-item>

参考链接

1. el-form设置el-select和el-input一样的宽度

---

问题3：

表单字段内数据检验规则的配置方法

---

参考链接

1. el-form的入门学习 该文章内有关于表单字段内数据检验规则的配置方法

---

问题4：

如何阻止表单自顾自的提交，必填的字段没填也能提交的 bug

xxx.vue 演示模板

<el-form :model="form" :rules='formRule' ref='form'>
<el-form-item prop="name" label="姓名">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submit('form')">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>


export default {
  name: "test",
  data() {
    return {
      // 表单字段
      formData: {
        name: '',
      },
      // 表单检验规则
      formRule: {
        name: [{ required: true, message: '请输入名称', triggle: 'blur' }],
      },
method:{
submit(formName){
      this.$refs[formName].validate(valid => {
      if (valid) {
          console.log("success submit!!");   
          }   
      else{
          console.log("error submit!!");
        }
        });
	}
   }
  }
 }
}

注意是 ref 属性的参数值，才能对该表单的检验规则进行一个操作，记得回传一个 ref 参数值。

---

问题5：

自定义表单 form 验证器 validator 无效问题

解决方法：必须定义一个 const 变量的validator，而不是在 export default { } 内部定义 validator 方法，像是调用 validator: this.validator 是无法生效的 验证器，笔者尝试过。

具体的无效验证器例子：

export default {
	data() {
		return {
			formModel: {
				name: ''
			},
rules: {
	name: [
		{ validator: this.checkName, trigger: "blur",required: true }
			]
	}
	·
	·
	·
method: {
checkName:{
    // 自定义验证器   但却是无效的
}
}

无效验证器 IDEA 开发工具内的显示如下：（validator 是紫色的，无效验证器）

而有效的验证器 IDEA 开发工具内的显示会是这样的：（validator 是橙色的，有效验证器）

xxx.vue 正确有效验证器演示模板：

<template>
<el-form
		:model="formModel"
		:rules="rules"
		ref="ruleForm"
	>
		<el-form-item label="姓名" prop="name">
	        <el-input
	          v-model="formModel.name"
	          placeholder="请输入姓名"
	          clearable>
	        </el-input>
	    </el-form-item>
	</el-form>
</template>
<script>

const checkName = (rule, value, callback) =>{

  if (!value) {
    callback(new Error('xxx不能为空'))
  }
  if (!checkfield(value)) {
    callback(new Error('已保存过该数据！'))
  }
  callback()
};

export default {
	data() {
		return {
			formModel: {
				name: ''
			},
			rules: {
				name: [
					{ validator: checkName, trigger: "blur",required: true }
				]
			}
		}
	},
  methods: {
  submit() {
		this.$refs.ruleForm.validate((valid, errObj)=>{
		    valid && console.log('表单校验通过')
		})
	  },
  }
}
</script>

参考链接

1. el-form自定义规则rules——validate的使用 & 小红心不出现解决方案

2. vue表单rules校验

3. 在vue中使用rules对表单字段进行验证

---