Element-ui的表单中怎么添加正则校验
1. 以中国大陆手机号验证为例
// 这是组价的代码
<el-form-item prop="mobile">
<el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="请输入手机号"></el-input>
</el-form-item> // 这是rules的代码
mobile: [
{ validator: validateMobile, trigger: 'blur' },
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
], 2. 表单局部提交后端验证//注意validatePass是属于data的,但不在return中。
data () {
let validatePass = (rule, value, callback) => {
if (value.length >= 8) {
let params = {
'account': value
}
axios.post('localhost:8080/verifyUserAccount', params)
.then(function (response) {
if (response.data.err) {
callback(response.data.msg)
} else {
callback()
}
})
.catch(function () {
callback(new Error('服务异常'))
})
} else {
callback()
}
}
//这是验证规则,当然了你也可以同时使用基本的验证规则
account: [
{ validator: validatePass , trigger: 'blur' }
]
Element-ui的表单中怎么添加正则校验的更多相关文章
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- 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"> ...
- element的form表单中如何一行显示多el-form-item标签
效果图: HTML代码: <script src="//unpkg.com/vue/dist/vue.js"></script> <script sr ...
- uniapp-uView表单中如何添加日期控件?
环境:uniapp,uview-ui,Picker 选择器, 本次我们用uview中的Picker 选择器来写一个日期功能 此选择器有四种弹出模式 一是时间模式,可以配置年,日,月,时,分,秒参数二是 ...
- Element Ui使用技巧——Form表单的校验规则rules详细说明
Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
- 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片
InfoPath 的浏览器表单不支持加载并显示图片,当然在模板中可以插入图片,但是如果想显示数据库的一幅图片,或是动态加载一张图片就无能为力了. 基实这个问题可以通过在浏览器表单中使用: " ...
随机推荐
- 文本分类学习 (九)SVM入门之拉格朗日和KKT条件
上一篇说到SVM需要求出一个最小的||w|| 以得到最大的几何间隔. 求一个最小的||w|| 我们通常使用 来代替||w||,我们去求解 ||w||2 的最小值.然后在这里我们还忽略了一个条件,那就是 ...
- html学习_认识html
1.HTML骨架 <html>----根标签 <head>---头标签 </head> <body>---主体标签 </body> < ...
- class FrameHandlerMono : public FrameHandlerBase
单目视觉里程计流程图 class FrameHandlerMono : public FrameHandlerBase FrameHandlerMono::FrameHandlerMono(vk::A ...
- [No0000139]轻量级文本编辑器,Notepad最佳替代品:Notepad++
在详细介绍Notepad++之前,先来解释一下,为何要选择Notepad++,即把常见的一些文本编辑器和Notepad++比较,看看其有哪点好: 常见的文本编辑器有很多,此处,只提及Notepad,N ...
- CORS跨域-Nginx使用方法(Access-Control-Allow-Origin错误提示)
问题说明 当出现上图这个的时候,是访问请求外域URL无法访问,浏览器认为访问外域URL不安全,导致访问不了简称跨域问题.而这上面出现一句很重要的话“NO Access-Control-Allow-Or ...
- [troubleshoot][daily][redhat] 设备反复重启故障排查
一台服务器设备,反复重启,每天重启数次. 一: 原因分析及初步排异. 1. 硬件,内存主板,一一更换,甚至除了硬盘将整台机器都换掉了,依然重启. 2. 排除电源问题,换了电源线,换了插座,还是重启 ...
- es6学习笔记入门总结
1.let const block 作用域 let 代替var 来声明块级作用域,没有变量提升,只在块内有作用 const 可以声明一个常量,类似于指针,指向某一个引用,这个常量并非一成不变的,但是不 ...
- Java中String类两种实例化的区别(转)
原文:http://blog.csdn.net/wangdajiao/article/details/52087302 一.String类的第一种方式 1.直接赋值 例:String str = &q ...
- 机器Coding For WPF
declare @modelcode varchar(90)='AutoProjectType'declare @ns varchar(90)='WpfApplication'declare @dat ...
- java Date型时间比较大小
两个Date类型的变量可以通过compareTo方法来比较.此方法的描述是这样的:如果参数 Date 等于此 Date,则返回值 0:如果此 Date 在 Date 参数之前,则返回小于 0 的值:如 ...