<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px">
<el-form-item label="手机号" prop="phone">
<el-input v-model.number="ruleForm.phone"/>
</el-form-item>
</el-form>
export default {
data() {
var checkPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('手机号不能为空'));
} else {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
console.log(reg.test(value));
if (reg.test(value)) {
callback();
} else {
return callback(new Error('请输入正确的手机号'));
}
}
};
return {
ruleForm: {
phone: ''
},
rules: {
phone: [
{validator: checkPhone, trigger: 'blur'}
]
}
};
}
}

Vue element 自定义表单验证(验证手机号)的更多相关文章

  1. Vue Element Form表单时间验证控件使用

    如果直接使用Element做时间选择器,其规则(rules)不添加type:'date',会提示类型错误,处理这个需要规范值的类型为date. 时间格式化过滤器 import Vue from 'vu ...

  2. vue+element 动态表单验证

    公司最近的项目有个添加动态表单的需求,总结一下我在表单验证上遇到的一些坑. 如图是功能的需求,这个功能挺好实现的,但是表单验证真是耗费了我一些功夫. vue+element在表单验证上有一些限制,必须 ...

  3. 深入了解Element Form表单动态验证问题 转载

    随风丶逆风 2020-04-03 15:36:41  2208  收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...

  4. laravel-admin(自定义表单与验证)

    场景: 很多时候,由于我们业务场景比较特殊,需要自定义表单,然后框架给我提供了对应表单组建! 案列:以创建一个字段为列 1.在控制器对应的方法中调用表单组建创建表单 public function c ...

  5. element自定义表单验证

    element-ui框架下修改密码弹窗进行表单验证. 除了基础校验,密码不为空,长度不小于6字符,需求中还需校验密码由数字和字母组合. 处理代码如下: <el-dialog :visible.s ...

  6. vue踩坑:vue+ element ui 表单验证有值但验证失败。

    一.如图:有值但是验证失败 二. <el-form :model="form" :rules="rules"> <el-form-item l ...

  7. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  8. Angular5+ 自定义表单验证器

    Angular5+ 自定义表单验证器 Custom Validators 标签(空格分隔): Angular 首先阐述一下遇到的问题: 怎样实现"再次输入密码"的验证(两个cont ...

  9. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

随机推荐

  1. 我操作MySQL的惊险一幕

    背景 前几天因工作需要,组长给我安排了一个数据清洗的任务. 任务:把 A 表的数据洗到 B 表. 我的第一反应,什么是「洗」?洗数据是什么?洗钱我倒是知道. 不过我不能慌啊,于是问了问组长. 我:组长 ...

  2. TomCat之负载均衡

    TomCat之负载均衡 本文讲述了tomcat当nginx负载均衡服务器配置步骤 以下是Tomcat负载均衡配置信息 1.修改nginx的nginx.conf文件 添加如下属性:localhost是名 ...

  3. C++ 函数重载解析策略

    参考<C++ Primer Plus>(第6版)中文版,Stephen Prata 著,张海龙 袁国忠译,人民邮电出版社.C++ 使用重载解析策略来决定为函数调用使用哪一个函数定义.重载解 ...

  4. html点击a标签弹窗QQ聊天界面

    以为很难.以为要第三方.谁知道不用.一句话的事情. 1 <a hfer="tencent://message/?uin=12345&Site=&Menu-=yes&qu ...

  5. 使用LEFT JOIN 统计左右存在的数据

    最近做了一个数据模块的统计,统计企业收款.发票相关的数据,开始统计是比较简单,后面再拆分账套统计就有点小复杂,本文做一个简单的记录. 需求 企业表 企业表t_company有如下字段:标识id.企业名 ...

  6. python django超链接

    之前用django框架打了一个简易的博客网站,现在说说怎么用django做超链接. 本文基于之前讲解的博客应用,如果只想学超链接请自行删减代码或评论提问. 首先,在templates文件夹下添加det ...

  7. 笔记:Debian下为sublime text建立软链接[像vi一样到处使用]

    先查询sublime-text安装路径 :~$ dpkg -L sublime-text /. /opt /opt/sublime_text ... /opt/sublime_text/sublime ...

  8. 分布式事务框架 Seata 入门案例

    1.  Seata Server 部署 Seata分TC.TM和RM三个角色,TC(Server端)为单独服务端部署,TM和RM(Client端)由业务系统集成. 首先,下载最新的安装包 也可以下载源 ...

  9. AR空间音频能力,打造沉浸式声音体验

    随着元宇宙的兴起,3D虚拟现实广泛引用,让数字化信息和现实世界融合,目前大家的目光主要聚焦于视觉交互层面,为了在虚拟环境中更好的再现真实世界的三维空间体验,引入听觉层面必不可少,空间音频孕育而生. 空 ...

  10. 造个Python轮子,实现根据Excel生成Model和数据导入脚本

    前言 最近遇到一个需求,有几十个Excel,每个的字段都不一样,然后都差不多是第一行是表头,后面几千上万的数据,需要把这些Excel中的数据全都加入某个已经上线的Django项目 这就需要每个Exce ...