首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 elementUI的form表单验证

vue3在table里使用elementUI的form表单验证的示例代码

2023-12-13 11:28:14 作者：小朱小先生

这篇文章主要介绍了vue3在table里使用elementUI的form表单验证的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

常规情况下。rules和formItem是一对一的。例如下面的情况，判断表单内的测试1和测试2是否为空。

<template>
    <el-form
        :model="formParams.form"
        :rules="formParams.rules"
    >
      <el-form-item label="测试1" prop="input1">
        <el-input v-model="formParams.form.input1"></el-input>
      </el-form-item>
      <el-form-item label="测试2" prop="input2">
        <el-input v-model="formParams.form.input2"></el-input>
      </el-form-item>
    </el-form>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
const formParams = reactive({
  form:{
    input1: "",
    input2: ""
  },
  rules: {
    input1: {
      validator: validator_isEmpty,
      trigger: 'change'
    },
    input2: {
      validator: validator_isEmpty,
      trigger: 'change'
    }
  }
})
function validator_isEmpty (rule: any, value: string, callback: any)  {
  if (isEmpty(value)) {
  callback(new Error("必填项，请输入数据"));
} else {
  callback();
}
}
const isEmpty = function (value: any) {
  if (
      value === null ||
      value === undefined ||
      value === "" ||
      value.toString().trim() === "" ||
      value.length === 0 ||
      Object.keys(value.toString()).length === 0 ||
      JSON.stringify(value) === "[{}]"
  ) {
    return true;
  } else {
    return false;
  }
}
</script>
<style scoped lang="scss">
</style>

但是，如果在table中就按照常规的写法如下会发现不管如何输入或删除都将触发valid=false校验。如果在validator_isEmpty中打印value值会发现，value一直未undefined。

<template>
  <el-form
      :model="tableData.data"
      :rules="tableData.rules"
  >
    <el-table
        :data="tableData.data">
      <el-table-column label="测试1">
        <template #default="scope">
          <el-form-item prop="input1">
            <el-input v-model="scope.row.input1"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="测试2">
        <template #default="scope">
          <el-form-item prop="input2">
            <el-input v-model="scope.row.input2"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
let tableData = reactive({
data:[
  {
    input1: "",
    input2: ""
  }
],
rules: {
    input1: {
      validator: validator_isEmpty,
      trigger: 'change'
    },
    input2: {
      validator: validator_isEmpty,
      trigger: 'change'
    }
  }
})
const formParams = reactive({
  form: {
    input1: "",
    input2: ""
  },
  rules: {
    input1: {
      validator: validator_isEmpty,
      trigger: 'change'
    },
    input2: {
      validator: validator_isEmpty,
      trigger: 'change'
    }
  }
})
function validator_isEmpty(rule: any, value: string, callback: any) {
  if (isEmpty(value)) {
    callback(new Error("必填项，请输入数据"));
  } else {
    callback();
  }
}
const isEmpty = function (value: any) {
  if (
      value === null ||
      value === undefined ||
      value === "" ||
      value.toString().trim() === "" ||
      value.length === 0 ||
      Object.keys(value.toString()).length === 0 ||
      JSON.stringify(value) === "[{}]"
  ) {
    return true;
  } else {
    return false;
  }
}
</script>
<style scoped lang="scss">
</style>

所以使用下面的方式。但是有几个重点。

1、外层的el-form的model需要关联到tableData.data，否则使用validate方法将无法触发

2、去掉外层el-form的rules属性

3、对el-table-column里的el-form-item添加rules属性，其中rules中的validator采用bind的方式传递行参数

4、对el-table-column里的el-form-item中prop属性需要保留

之后的操作就跟普通的form验证一样

<template>
  <el-form
      :model="tableData.data"
  >
    <el-table
        :data="tableData.data">
      <el-table-column label="测试1">
        <template #default="scope">
          <el-form-item prop="input1" :rules="{
            validator: validator_isEmpty_arg.bind(this, scope.row.input1),
            trigger: 'change'
          }">
            <el-input v-model="scope.row.input1"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="测试2">
        <template #default="scope">
          <el-form-item prop="input2" :rules="{
            validator: validator_isEmpty_arg.bind(this, scope.row.input2),
            trigger: 'change'
          }">
            <el-input v-model="scope.row.input2"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
</template>
<script lang="ts" setup>
import {reactive} from "vue";
let tableData = reactive({
  data: [
    {
      input1: "",
      input2: ""
    }
  ]
})
function validator_isEmpty_arg(rowValue: any, rule: any,value: string, callback: any){
  if (isEmpty(rowValue)) {
    callback(new Error("必填项，请输入数据"));
  } else {
    callback();
  }
}
const isEmpty = function (value: any) {
  if (
      value === null ||
      value === undefined ||
      value === "" ||
      value.toString().trim() === "" ||
      value.length === 0 ||
      Object.keys(value.toString()).length === 0 ||
      JSON.stringify(value) === "[{}]"
  ) {
    return true;
  } else {
    return false;
  }
}
</script>
<style scoped lang="scss">
</style>

到此这篇关于vue3在table里使用elementUI的form表单验证的文章就介绍到这了,更多相关vue3 elementUI的form表单验证内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

vue3在table里使用elementUI的form表单验证的示例代码

您可能感兴趣的文章: