*自定义校验规则时,验证成功的地方也必须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>