vue form表单验证

[面向百度编程cv]

 <el-form-item >
          <el-input v-model="item.didians" @focus="didian" class="strong" placeholder="请选择">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
   </el-form-item>

input获取焦点时显示弹窗，选择完条件回显当前页。进行表单验证。提交时验证没有通过怎么回事

[jio可]

赋值字段和form字段不一致，并且没看到prop属性

[面向百度编程cv]

<el-form-item label=""
          :prop="'outCompanyList.'+index+'.companyId'"
        :rules="ruleForm.didians" 
        >
          <el-input v-model="item.didians" @focus="didian" class="strong" placeholder="请选择">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>

表单是循环出来的

[亦夜]

表单验证规则不应该是加到表单上吗

[sha虫剂]

要想验证成功item.didians这个变量要跟form上面绑定的变量是一致才行

[面向百度编程cv]

因为要动态添加表单，写在e-form上是不行的

[jio可]

把代码贴完整，这样能看不出什么问题。form初始化有什么字段，rules里面怎么配置的。ruleForm.didians是校验还是字段，item.didians又是啥

[MR. Johnny xu]

谢谢分享 记下了

[初学者liwd]

很好，谢谢分享

[面向百度编程cv]

//父组件
<template>
  <div class="body">
    <div class="left">
      <el-form ref="edus" :inline="true" label-width="auto" label-position="right" :model="edus">
        <apply-form
          v-for="(item,index) in edus.outCompanyList"
          :key="index"
          @addindex="addEduction"
          @deleteIndex="deleteEducation"
          :index="index"
          :item="item"
          ref="change"
        ></apply-form>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      edus: { outCompanyList: [{}] },
    };
  },
  methods: {
    deleteEducation(index) {
      if (this.edus.outCompanyList.length !== 1) {
        this.edus.outCompanyList.splice(index, 1);
      }
    },
    addEduction() {
      this.edus.outCompanyList.push({});
    },
  },
  components: {
    applyForm: (resolve) => require(["./components/applyForm"], resolve),
  },
};
</script>

<style lang="scss" scoped>
</style>

子组件
<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-form-item label="地点:" :prop="'outCompanyList.'+index+'.companyId'">
          <el-input v-model="item.didians" @focus="didian"  placeholder="请选择">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item>
          <el-input v-model="item.address"  placeholder="请输入"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <tree v-if="ShowTree" @close="Cloneshow" @TreeData="TreeTransfer"></tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ShowTree: false,
      ruleForm: {
        useType: [
          { required: true, message: "请选择！", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("请选择！"));
              } else {
                callback();
              }
            },
          },
        ],
        didians: [
          { required: true, message: "请选择!", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                console.log(value, "222");
                callback(new Error("请选择!"));
              } else {
                callback();
              }
            },
          },
        ],
      },
    };
  },
  components: {
    Tree: (resolve) => require(["./tree"], resolve),
  },
  computed: {},
  props: ["index", "item"],
  created() {},
  watch: {},
  methods: {
       didian(val) {
      this.ShowTree = true;
    },
    Cloneshow() {
      this.ShowTree = false;
    },
    //删除
    deleteCand() {
      this.$emit("deleteIndex", this.index);
    },
    //添加
    addEduView() {
      this.$emit("addindex");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

<template>
  <div class="farmerDetail">
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :visible.sync="isShowUndertaking"
      center
      :width="width"
      :before-close="() => $emit('close')"
    >
      <el-card v-loading="loading">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <el-tree
          :data="treedata"
          default-expand-all
          :props="defaultProps"
          node-key="defaultPropss.nodeId"
          ref="tree"
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="confirm">确 定</el-button>
        <el-button @click="$emit('close')">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      title: "",
      isShowUndertaking: true,
      loading: false,
      width: "20vw",
      defaultProps: {
        children: "children",
        label: "nodeName",
      },
      filterText: "",
      TreeNode: {},
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    getappCode() {
      //后台数据
    },
    handleNodeClick(node, data, value) {
      this.TreeNode = node;
    },
    confirm() {
      this.$emit("TreeData", this.TreeNode);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

[面向百度编程cv]

多谢。

TreeTransfer (data) {
  this.item.didians = data
}
这个是第三个el-tree弹窗回显的数据赋给item.didians

[jio可]

// 没看到这个
TreeTransfer (data) {
  this.item.didians = data
}

[jio可]

 components: {
    applyForm: (resolve) => require(["./components/applyForm"], resolve),
  }

可以这样写

import applyForm from './components/applyForm'
export default {
   components: {
    applyForm
  }
}

添加一项的时候应该把初始值加上，不然校验的时候监听不到

 addEduction() {
      const item = {address: '', didians: ''}
      this.$set(this.edus.outCompanyList, this.edus.outCompanyList.length, item)
    },