vue3 element-plus的表单校验，自定义检验规则，输入框输入时和失去焦点调后端接口，输入完未失去焦点点击提交，无法提交

Question

vue3 element-plus的表单校验，自定义检验规则，手机号唯一性输入检验，输入框输入时和失去焦点掉接口，输入完完成，输入框未失去，焦点点击提交，无法提交，先失去焦点，二次点击才提交，如何点击一次就提交

Answer 1

引自免费微信小程序：皆我百晓生

在Vue3结合Element Plus进行表单校验时，针对自定义检验规则如手机号唯一性检查，可以通过以下方式实现输入时实时验证以及确保点击提交时一次性完成验证并提交：

首先，在<el-form>组件中设置rules属性用于校验，并且监听input事件来触发后端接口调用以验证手机号是否已存在。这里为了保证输入完未失去焦点也能立即提交，可以在submit方法中先执行异步校验逻辑，待校验通过后再进行提交操作。

<template>
  <el-form :model="form" :rules="rules" ref="myForm">
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="form.phone" @input="checkPhoneUnique" placeholder="请输入手机号"></el-input>
    </el-form-item>
    <el-button type="primary" @click="handleSubmit">提交</el-button>
  </el-form>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useRequest } from '@vueuse/core'; // 假设你已经引入了vueuse或其他用于请求库的工具

interface FormModel {
  phone: string;
}

export default defineComponent({
  setup() {
    const form = ref<FormModel>({
      phone: '',
    });

    const rules = {
      phone: [
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        {
          validator: (rule, value) => checkPhoneUnique(value),
          trigger: ['blur', 'input'],
        },
      ],
    };

    // 异步校验手机号是否唯一
    async function checkPhoneUnique(phone: string) {
      const isUnique = await useRequest(async () => {
        // 这里替换成你的后端接口调用，返回true表示唯一，false表示不唯一
        const response = await fetch(`[your-api-url]?phone=${phone}`);
        return response.ok; // 根据实际情况解析响应内容判断手机号是否唯一
      });

      if (!isUnique.data) {
        return new Error('该手机号已被注册');
      }
    }

    async function handleSubmit() {
      // 先校验手机号是否唯一
      try {
        await checkPhoneUnique(form.value.phone);
      } catch (error) {
        // 如果校验失败，则提示错误信息，不提交表单
        return;
      }

      // 手机号唯一性校验通过，提交表单
      try {
        await (refs.myForm as any).validate();
        console.log('表单校验成功，准备提交...');
        // 在此处添加提交表单逻辑，例如调用后端API
      } catch (error) {
        console.error('表单校验失败：', error);
      }
    }

    return {
      form,
      rules,
      handleSubmit,
      checkPhoneUnique,
    };
  },
});
</script>

这段代码示例中，我们创建了一个手机号输入框，并为其制定了自定义校验规则，当输入框值发生变化时，会触发checkPhoneUnique函数，这个函数负责发起异步请求校验手机号是否唯一。而在handleSubmit方法中，我们首先执行此异步校验，待其通过后再执行表单的同步校验及提交操作。这样就能实现在输入完手机号之后无需等待失去焦点，直接点击提交按钮即可一次性完成所有校验并提交表单。