表单验证（总结）

<Button type="success" size="small" class="fr" @click="rowHandle('add')">新增</Button>
<Modal width="350" v-model="isShowModal" title="新增/编辑">
      <Form
        ref="selectData"
        :model="selectData"
        :rules="ruleValidate"
        :label-width="80"
        @submit.native.prevent
      >
        <FormItem label="语言类型" prop="langCode">
          <Select
            v-model="selectData.langCode"
            placeholder="请选择语言类型"
            :disabled="isDisabled"
            @on-change="rulesFn"
          >
            <Option
              v-for="item in channelList"
              :value="item.value"
              :key="item.value"
            >{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="标签名" prop="tagName">
          <Input v-model="selectData.tagName" placeholder="请输入标签名" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="relateFn">返回</Button>
        <Button type="info" @click="confirmFn('selectData')">确定</Button>
      </div>
    </Modal>

data:{
ruleValidate: {
        tagName: [{ required: true, message: "请输入标签名", trigger: "blur" }],
        langCode: [
          { required: true, message: "请选择语言类型", trigger: "blur" },
        ],
      },
      selectData: {
        tagName: "",
        lang: "",
        langCode: "",
        tagId: "",
      },
      },
      methods:{
        rowHandle(type, row) {
      this.modeType = type;
      this.isShowModal = true;
       if (type == "add") {
        this.$refs.selectData.resetFields();//每次新增时清空上次的数据
        this.isDisabled = false;
      }
    },
       rulesFn() {     
      this.$refs.selectData.validate();//下拉框改变进行表单验证
    },
    confirmFn(selectData) {
      let that = this;
       this.$refs[selectData].validate((valid) => {
       if (valid) {
       }
       })
}    
  }