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

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

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

        思路:

        1.假设规则为非空判断

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

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

        required 红星星  :error 提示项

简单演示


   
    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",
          });
        }
	  }
	}

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

你可能感兴趣的:(vue.js,前端,elementui)