uniapp表单校验vue3组合式使用uiapp的uni-forms表单校验功能，常规校验可以参考，自定义校验同样支持！

前几天在开发小程序的时候，需要进行表单校验，在uniapp的uni-forms组件是内置表单校验的，并且支持vue3，不过官方用法是选项式，而本人使用组合式，按照官方用法老是不生效，最后经过多次尝试，终于可以使用vue3组合式来进行表单校验。

官方网站及用法

zh.uniapp.dcloud.io/component/u…

详细用法见官网，这里主要记录一下组合式写法

vue3组合式用法

1.定义表单数据

// 表单信息
const baseFormData = ref({
  reservationPerson: "",
  reservationPhone: userIdStore.userTel,
  reservationDate: "",
  reservedNumber: "1",
  reservationPersonId: userIdStore.userId,
  serviceId: "",
});

2.定义校验规则这里以输入框不难为空为例

const rules = {
  reservationPerson: {
    rules: [{ required: true, errorMessage: "请输入姓名" }],
  },
  reservationPhone: {
    rules: [{ required: true, errorMessage: "请输入手机号" }],
  },
};

3.组件使用

<uni-forms
        ref="formRef"
        label-position="top"
        :modelValue="baseFormData"
        :rules="rules"
        validateTrigger="blur"
      >
        <uni-forms-item label="姓名" required name="reservationPerson">
          <uni-easyinput
            v-model="baseFormData.reservationPerson"
            placeholder="请输入姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="手机" required name="reservationPhone">
          <uni-easyinput
            v-model="baseFormData.reservationPhone"
            placeholder="请输入联系方式"
          />
        </uni-forms-item>
      </uni-forms>

其中uni-forms的ref="formRef"用于获取组件dom、 :modelValue="baseFormData"用于绑定表单数据、 :rules="rules"用于绑定校验规则，uni-forms-item的name属性用于绑定具体校验规则

4.触发校验

首先利用ref获取组件dom

const formRef = ref();

在事件中触发组件的validate事件即可：

const submit = async () => {
  formRef.value
    .validate()
    .then(() => {
    // 校验通过后事件
    })
};

5.自定义校验规则

const rules = {
  reservationPerson: {
    rules: [{ required: true, errorMessage: "请输入姓名" }],
  },
  reservationPhone: {
    rules: [
      { required: true, errorMessage: "请输入手机号" },
      {
        validateFunction: (rule, value, data, callback) => {
        // 写自己的规则就行，callback为错误提示信息
          if (!regTelTest(value)) {
            callback("手机号格式错误！");
          }
        },
      },
    ],
  },
};

uniapp表单校验