element-ui的表单验证this.$refs[formName].validate的代码不执行
经过排查,如果自定义验证中,每种情况都要写明确和有回调函数callback
var validatePhone = (rule, value, callback) => {
const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/;
if (value!== "") {
if (value === "") {
callback(new Error("请输入手机号"));
} else if(value.length==11&®.test(value)){
callback();
} else {
callback(new Error("请输入正确的手机号"));
}
} else {
callback(new Error("请输入手机号"));
}
};
上面是自定义验证,写在data里面。如果验证通过,但是没有加上callback(),则validate里面的代码会一直不执行。
小结:用于判断值的情况用value比较好,
value的值为相对于的表单元素的v-model的值
rule是验证规则,
callback是回调函数,每个判断结束,语句后面要callback(。。)结果给validate,不然validate会一直等待返回的回掉,不往下执行代码。
element-ui的表单验证this.$refs[formName].validate的代码不执行的更多相关文章
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- JS判断字符串长度,结合element el-input el-form 表单验证(英文占1个字符,中文汉字占2个字符)
首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符) 方法一: function strlen(str) { var len = 0; for (var i = 0; i < ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- element ui form表单清空规则
公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...
- vue+element ui 重置表单
<el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...
- element ui FORM表单
form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...
- vue+element之多表单验证
方法一:利用promise var p1=new Promise(function(resolve, reject) { this.$refs[form1].validate((valid) => ...
- vue+element 正则表达式进行表单验证
<template> <el-form :model="form" label-width="115px" ref="form&qu ...
随机推荐
- PHP配置篇(一)--php开启redis扩展
因为最近要用到Redis,下面记录下如何给PHP开启redis的扩展. 一.安装redis 1.安装redis:https://github.com/MSOpenTech/redis/releases ...
- Oracle有哪些诊断事件
作者:eygle | [转载请注出处]链接:https://www.eygle.com/archives/2004/12/oracle_diagnostics_events_list.html 经常有 ...
- 使用Socket下载图片
Socket下载一张图片 Socket下载一页图片 Socket下载一张图片 在百度搜索头像,挑一张 复制图片的路径打开,并保存这个url 把这个url的域名和路径分开 首先导入socket模块 第一 ...
- [Go] tcp服务下的数据传递
go中实现一个tcp服务,首先是要监听端口,接收请求,这个地方会被阻塞等待当客户端连接过来,会开一个grountine去处理这条客户端的tcp连接,因此可以同时处理多条连接 在连接中,要循环的去读取客 ...
- easyui三
陈旧的开发模式 美工(ui工程师:出一个项目模型) java工程师:将原有的html转成jsp,动态展示数据 缺点: 客户需要调节前端的展示效果 解决:由美工去重新排版,重新选色.Vs前后端分离 美工 ...
- 5.Java基础_Java算术/字符/字符串/赋值运算符
/* 算术/字符/字符串/赋值 运算符 */ public class OperatorDemo01 { public static void main(String[] args){ //算术运算符 ...
- 2019.6.13_SQL语句中----删除表数据drop、truncate和delete的用法
一.SQL中的语法 1.drop table 表名称 eg: drop table dbo.Sys_Test 2.truncate table 表 ...
- 探索 ASP.Net Core 3.0系列五:引入IHostLifetime并弄清Generic Host启动交互
前言:在本文中,我将介绍如何在通用主机之上重新构建ASP.NET Core 3.0,以及由此带来的一些好处. 同时也展示了3.0中引入新的抽象类IHostLifetime,并描述了它在管理应用程序(尤 ...
- 安装更新时出现一些问题,但我们稍后会重试。如果你继续看到此错误,并且想要搜索 Web 或联系支持人员以获取相关信息,以下信息可能会对你有帮助: (0x80070426)
安装更新时出现一些问题,但我们稍后会重试.如果你继续看到此错误,并且想要搜索 Web 或联系支持人员以获取相关信息,以下信息可能会对你有帮助: (0x80070426) https://answers ...
- 针对.NET Core, Xamarin以及.NET的自动类型安全Rest库: Refit
本文大部分内容是针对Refit官网的翻译. 官网地址: https://github.com/reactiveui/refit Refit是一个类似于Retrofit的Restful Api库,使用它 ...