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,}@qq.com$/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"去掉这句，就可以实时校验。

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

vue + element 自定义表单验证的时候需要通过请求后端接口验证
vue + element 自定义表单验证的时候需要通过请求后端接口验证做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
Vue element 自定义表单验证（手机号校验）
element官网中没有手机号的验证? 别慌,绝绝子来教你呀! 手机号验证效果如下: 代码如下: <el-form-item label="手机号" prop="t ...
vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
laravel 自定义表单请求验证增加 emoji 过滤
表单请求验证增加一个自定义类过滤 emoji // 在 app/Providers/AppServiceProvider.php 中use use Illuminate\Support\Facades ...
iis+php发送邮箱,DedeCMS用PHPMailer自定义表单发送到QQ邮箱
DedeCMS自定义表单提交后发送到指定邮箱的功能需要二次开发,但目前的许多方法都是写死字段,而且站长邮箱不能批量给多个邮箱发布,用起来不太人性化.下面提供能同时给多个QQ邮箱和163邮箱的方法. 相 ...
element自定义表单验证上传身份证正反面的实现
效果图 <template> <div> <el-form :model="personalForm" :rules=&quo ...
关于element form表单的验证错误提示信息位置没有出现在文本框下的问题
今天带我的大佬碰到一个有意思的坑,现象如图,错误提示没有在文本框下,而是出现在最左边的文字下. 原因:el-form 没有加上 label-width,默认宽度为0,导致验证错误的提示信息直接出现在了 ...
vue element form 表单
<template><el-form :model="form" label-width=&quo ...
element自定义表单label
在label前面加上复选框,通过slot进行定义 <el-form-item><span slot="label"><el-checkbox v-mo ...

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

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

最新文章

热门文章