vue学习笔记——Vue3+element plus实现表单验证的方法

最近想实现vue3+element plus来实现表单验证，发现element plus的官方沿用的还是vue2的方法来进行表单验证。
通过查阅其他资料，写了一版关于vue3+element plus的表单验证模板，代码及注释如下：

<template>
  <div>
    <el-row>
      <el-col :span="1"></el-col>
      <el-col :span="10">
        <div style="margin: 20px"></div>
        <el-form
          label-position="left"
          label-width="50px"
          :model="formInfoObj"
          :rules="rules"
          ref="ruleForms"
        >
          <el-form-item label="标题" prop="titleVal">
            <el-input v-model="formInfoObj.titleVal"></el-input>
          </el-form-item>
          <el-form-item label="链接" prop="urlVal">
            <el-input v-model="formInfoObj.urlVal"></el-input>
          </el-form-item>
          <el-form-item label="类别" class="form-left" prop="selectVal">
            <el-select v-model="formInfoObj.selectVal" placeholder="请选择类别">
              <el-option
                v-for="item in selectObj"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="form-left">
            <el-button type="primary" @click="submitButton"> 提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2"></el-col>
    </el-row>
  </div>
</template>
<script>
import { reactive, ref } from "vue";
import globalValidate from "../../uitls/validate.js";
export default {
  setup() {
    //使用ref定义dom对象
    const ruleForms = ref(null);

    //使用reactive定于数据
    const state = reactive({
      selectObj: [
        {
          value: "1",
          label: "项目1",
        },
        {
          value: "2",
          label: "项目2",
        },
        {
          value: "3",
          label: "项目3",
        },
        {
          value: "4",
          label: "项目4",
        },
      ],

      //定义提交的数据
      formInfoObj: {
        titleVal: "",
        urlVal: "",
        selectVal: "",
      },
      rules: {
        //定义验证规则，有两种方式：
        //1.使用ele原生的验证规则。
        titleVal: [{ required: true, message: "请输入标题", trigger: "blur" }],

        //2.通过引用整体的验证规则的js来进行验证。
        urlVal: [
          {
            required: true,
            validator: globalValidate.requiredFunction,
            trigger: "blur",
          },
        ],
        selectVal: [{ required: true, message: "此项为必填", trigger: "blur" }],
      },
    });

    //定义提交按钮函数
    const submitButton = () => {
      //通过ref的值触发验证
      ruleForms.value.validate((valid) => {
        if (valid) {
          console.log("通过");
          console.log(state.formInfoObj);
          //触发成功验证表单，调用接口；
        } else {
          console.log("未通过");
        }
      });
    };

    return { ...state, submitButton, ruleForms };
  },
};
</script>
<style >
.form-left .el-form-item__content {
  display: flex;
}
</style>

这里的第二种方法的验证规则是调用外部的js，我们可以在项目内写一个全局的验证规则，然后调用来实现。
改模板的js如下：

export default {
    requiredFunction:(rule, value, callback)=>{
        if(value==""){
            return callback(new Error("此项为必填项,请输入"));
        }
         return callback();
    }
}

前端效果如下：

以上就是vue3+element plus来实现表单验证的方法，欢迎大家交流。