VUE el-form组件不绑定model时进行校验

在el-form中如果要使用:rules规则校验时,需要在el-form标签绑定 :model

如何不绑定model而进行校验字段:

        思路:

        1.假设规则为非空判断

        2.获取该字段,进行非空判断,记录该字段是否校验完成,添加到校验标识中

        3.表单或数据提交时,判断校验标识

        required 红星星  :error 提示项

简单演示

<el-form-item label="name" required :error="customError(this.name,'name')">
   <el-input v-model="name"></el-input>
</el-form-item>

    data() {
      return {
        name: '',
        validateField: [],
    },
	methods: {
	  customError(obj,filedName){
        var i = this.validateField.indexOf(filedName);
        if (!obj.trim()) {
          if(i == -1){
			this.validateField.push(filedName);
          }
          return "请填写必填项！"
        } else {
          if(i > -1){
            this.validateField.splice(i,1);
          }
          return '';
        }
      },
	  checkSummit(){
	   if(this.validateField.length == 0){
		//submit
	   }else{
          this.$message({
            message: "请填写必填项！",
            type: "error",
          });
        }
	  }
	}

也可加入不同规则进行校验~~!