Vue element 自定义表单验证(验证联系方式 邮箱 邮政编码)

<el-form:model="form":rules="rules"ref="formRef"style="max-width: 640px"label-width="115px"class="demo-ruleForm"label-position="right"><el-form-item label="手机号码：" prop="telphone" class="item"><el-inputplaceholder="请输入手机号码"autocomplete="off"v-model="form.telphone"style="max-width: 400px"></el-input></el-form-item><el-form-item label="邮箱地址：" prop="email" class="item"><el-inputplaceholder="请输入邮箱地址"autocomplete="off"v-model="form.email"style="max-width: 400px"></el-input></el-form-item></el-form>

import type { FormInstance} from "element-plus";let validateEmail = (rule, value, callback) => {if (!value) {return callback(new Error("邮箱不能为空！"));}else {const reg=/^[1-9][0-9]{4,}@$/if(reg.test(value)){callback();}else {return callback(new Error("邮箱格式不正确！"));} }};var checkPhone = (rule, value, callback) => {if (!value) {return callback(new Error('手机号不能为空'));} else {//验证手机号const reg = /^1[3|4|5|7|8][0-9]\d{8}$///验证区号const phoneReg = /^\d{3}-\d{8}|\d{4}-\d{7}$/ console.log(reg.test(value));if (reg.test(value)||phoneReg.test(value)) {callback();} else {return callback(new Error('请输入正确的联系电话'));}}};const rules = reactive({nickname: [{ required: true, message: "请输入昵称", trigger: "blur" },{ min: 3, message: "长度在3个字符以上", trigger: "blur" },],email: [{ required: true, validator: validateEmail, trigger: "blur" }],telphone: [{ required: true, validator: checkPhone, trigger: "blur" }],code: [{trigger: "blur",validator: function (rule, value, callback) {if (value&&/^[0-9]{6}$/.test(value) == false) {callback(new Error("请输入正确的邮政编码"));} else {callback();}},}],});

const saveForm = async (formEl: FormInstance | undefined) => {console.log("进入点击");if (!formEl) return;await formEl.validate((valid) => {console.log("开始校验")if (valid) {console.log(1)updateUserInfo(form).then((res) => {if (res.success) {console.log("提交了");} else {console.log("发送失败");}});formEl.resetFields();} else {console.log("校验不通过");}});};

注意：

require：true：代表是必须填的 不能为空 还显示前面的*号

require：false：代表是必须填的 不能为空 只是不显示前面的*号

但是如果不写require这个属性，那就代表可以不填

上面的code检验的是 /只能填6位数字/，/不显示*号/ /不是必须填的/。

trigger: "blur"去掉这句，就可以实时校验。