element-plus+vue3的form表单自定义校验

原创已于 2022-06-14 14:25:07 修改 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

于 2022-06-14 14:22:00 首次发布

工作笔记同时被 2 个专栏收录

5 篇文章

订阅专栏

ElemntUI使用

1 篇文章

订阅专栏

本文介绍了如何在Vue中使用自定义校验规则验证手机号码格式，强调了验证通过后的回调处理。作者展示了如何设置ElForm的校验规则和使用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*自定义校验规则时，验证成功的地方也必须callback()

<script setup lang="ts">

import type { ElForm } from 'element-plus';
import { reactive, ref } from 'vue';
import { api } from '@/apis/api';

const form = ref<InstanceType<typeof ElForm>>();

const formData = reactive({
  phone: '',
  content: '',
});

const validatePhones = (rule: any, value: any, callback: any) => {
  if (value !== '') {
    const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}(,1[3|4|5|6|7|8|9][0-9]\d{8})*$/;
    if (!reg.test(value)) {
      return callback(new Error('手机号码输入格式不正确'));
    } else { 
      return callback(); // *验证成功的地方必须callback()
    }
  }else {
    return callback(new Error('必填字段'));
  }
}

const rules = reactive({
  phone: [
    {
      validator: validatePhones,
      trigger: 'blur',
    }
  ],
})


async function submitForm() {
  await form.value.validate((valid) => {
    if (valid) {
      const data = {
        phone: formData.phone,
        content: formData.content
      }
      api.sendMsg(data).then(({ data }) => {
        resetForm();
      });
    } else {
      return false;
    }
  });
}

</script>

<template>
  <div>
    <el-form ref="form" :model="formData" :rules="rules">
      <el-form-item prop="phone" label="手机号码" required>
        <el-input v-model="formData.phone" />
      </el-form-item>

      <el-form-item label="消息内容" prop="content" required>
        <el-input v-model="formData.content" type="textarea"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">发送</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>