当前位置：首页 > news >正文

vue3 搭配ElementPlus做基础表单校验自定义表单校验

news 2025/9/7 18:25:54

<script setup>
import { ref, reactive } from 'vue'// 表单元素
const dom = ref(null)
// 校验规则
const rules = {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],//校验手机号格式phone: [{ required: true, message: "请输入电话", trigger: "blur" },{ pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: "请输入合法手机号/电话号", trigger: "blur" }],
}
// 绑定数据
const form = reactive({name: '',phone:''
})
// 测试方法
const onSubmit = () => {console.log('提交数据', form)// 开始校验dom.value.validate(valid => {console.log('校验结果', valid)})
}
</script><template><el-form ref="dom" :model="form" :rules="rules" label-width="80px"><el-form-item label="名称" prop="name"><el-input v-model="form.name" /></el-form-item><el-form-item label="手机号" prop="phone"><el-input v-model="form.phone" /></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">测试</el-button></el-form-item></el-form>
</template>

上面是第一种普通校验跟vue2类似通过ref获取元素定义规则表提交时进行校验validate看是否通过了校验

二,自定义校验一般校验手机号邮箱等的规范合法性

.........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',}],
})...........

校验规则的函数接受3个参数：`rule`、`value`和`callback`

- `rule`参数: 这个参数是用来传递验证规则的，包含了一些验证的配置选项，比如最大长度、最小长度等。在这个函数中，我们没有使用到该参数。

- `value`参数: 这个参数是要被验证的手机号码的值。

- `callback`参数: 这个参数是用来通知验证结果的回调函数，它接受一个可选的 `Error` 对象作为参数。如果验证通过，可以通过调用 `callback()` 方法来通知验证成功，而不传递任何参数。如果验证失败，可以通过调用 `callback(new Error('错误信息'))` 方法来通知验证失败，并将错误信息传递给它。

在函数内部，我们首先检查 `value` 的值是否为空字符串 `''`，如果是空字符串，则调用 `callback` 方法，传入一个新的 `Error` 对象，对象的错误信息为 `'必填字段'`。

如果 `value` 不是空字符串，我们使用正则表达式 `/^1[3|4|5|6|7|8|9][0-9]\d{8}(,1[3|4|5|6|7|8|9][0-9]\d{8})*$/` 来验证手机号码的格式。如果格式不正确，我们也会调用 `callback` 方法，传入一个新的 `Error` 对象，对象的错误信息为 `'手机号码输入格式不正确'`。

如果手机号码格式正确，我们调用 `callback()` 方法，通知验证成功，不传递任何参数。

需要拿到引用对象 (通过ref获取任意表单引用对象)，然后通过引用对象来调用该方法。