vue 通过自定义规则实现表单手机号和邮箱的校验

1.在data的最前面通过var定义变量来定义一个箭头函数

data(){//校验邮箱的规则var checkEmail = (rule, value, callback) => {const reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;if(!reg.test(value)){callback(new Error('请输入有效的邮箱'));}callback();}// 验证手机号的规则var checkMobile = (rule, value, callback) => {const reg=/^1[3456789]\d{9}$/;if(!reg.test(value)){callback(new Error('请输入有效的手机号码'));}callback();}

其中：

通过reg.test(value)来判断输入的值是否符合校验规则。

callback()：函数代表通过校验。

new Error('请输入有效的手机号码')：通过新建一个Error对象表示校验失败。

2.在表单的验证规则对象的属性中加入新定义的变量

addFormRules: {

 email: [{required: true,message: '请输入邮箱',trigger: 'blur'}, {validator: checkEmail,trigger: 'blur'}],mobile: [{required: true,message: '请输入手机号',trigger: 'blur'}, {validator: checkMobile,trigger: 'blur'}]
}

vue 通过自定义规则实现表单手机号和邮箱的校验相关推荐

vue中的表单手机号和邮箱自定义验证规则
文章目录前言手机号和邮箱的自定义验证前言我们在开发过程中使用element UI 或者element-plus 中的表单的时候,会使用到表单验证,比如手机号和邮箱的验证: 手机号和邮箱的自定义 ...
vue element-ui 自定义规则限制图片尺寸
vue element-ui 自定义规则限制图片上传尺寸效果: data() {let checkImageSize = (rule, value, callback) => {const ...
vant表单手机号码校验
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
表单手机号邮箱 qq检验工具类
package com.atguigu.common.util;import java.util.regex.Matcher; import java.util.regex.Pattern;/*** ...
Ant Design 表单手机号验证
rules :[{pattern: /^1[3|4|5|7|8][0-9]\d{8}$/,message: '请输入正确的手机号'} ] 或者 rules :[{pattern: /^1(3[0-9] ...
mysql 分表规则获取表名_mysql分表和表分区详解
为什么要分表和分区? 日常开发中我们经常会遇到大表的情况,所谓的大表是指存储了百万级乃至千万级条记录的表.这样的表过于庞大,导致数据库在查询和插入的时候耗时太长,性能低下,如果涉及联合查询的情况,性能 ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
layui表单验证内置自定义规则 - 使用说明
关于 layui表单的验证规则.调用.自定义规则的使用经验总结: 除了 layui 本身配套的一个验证体系,还支持开发者自定义验证规则(如上表中的[自定义密码验证(代码参考下文)]),并直接嵌入到页面 ...
vue + element 自定义表单验证的时候需要通过请求后端接口验证
vue + element 自定义表单验证的时候需要通过请求后端接口验证做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
vue几条常见的表单验证规则
:rules="addFormRules" + prop="username" <el-form ref="addformRef" : ...

vue 通过自定义规则实现表单手机号和邮箱的校验

vue 通过自定义规则实现表单手机号和邮箱的校验相关推荐

最新文章

热门文章