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的表单中怎么添加正则校验的更多相关文章

  1. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  2. element ui form表单清空规则

    公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...

  3. vue+element ui 重置表单

    <el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...

  4. element ui FORM表单

    form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...

  5. element的form表单中如何一行显示多el-form-item标签

    效果图: HTML代码: <script src="//unpkg.com/vue/dist/vue.js"></script> <script sr ...

  6. uniapp-uView表单中如何添加日期控件?

    环境:uniapp,uview-ui,Picker 选择器, 本次我们用uview中的Picker 选择器来写一个日期功能 此选择器有四种弹出模式 一是时间模式,可以配置年,日,月,时,分,秒参数二是 ...

  7. Element Ui使用技巧——Form表单的校验规则rules详细说明

    Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...

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

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

  9. 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片

    InfoPath 的浏览器表单不支持加载并显示图片,当然在模板中可以插入图片,但是如果想显示数据库的一幅图片,或是动态加载一张图片就无能为力了. 基实这个问题可以通过在浏览器表单中使用: " ...

随机推荐

  1. js 基础知识总结

    1.switch结构 switch语句部分和case语句部分,都可以使用表达式. switch(1 + 3) { case 2 + 2: f(); break; default: neverhappe ...

  2. Java面向对象进阶篇(抽象类和接口)

    一.抽象类 在某些情况下,父类知道其子类应该包含哪些方法,但是无法确定这些子类如何实现这些方法.这种有方法签名但是没有具体实现细节的方法就是抽象方法.有抽象方法的类只能被定义成抽象类,抽象方法和抽象类 ...

  3. SQL Server 2016 共享功能目录 不可修改

    x 个人电脑上没有安装MSSQL,以前需要链接数据库写SQL,都是在{VS ->>视图->>SQL Server对象资源管理器}直接链接数据库进行访问操作的... 但是确实有些 ...

  4. 品尝阿里云容器服务:初步尝试ASP.NET Core Web API站点的Docker自动化部署

    部署场景是这样的,我们基于 ASP.NET Core 2.0 Preview 1 开发了一个用于管理缓存的 Web API ,想通过阿里云容器服务基于 Docker 部署为内网服务. 在这篇博文中分享 ...

  5. POJ 1451 - T9 - [字典树]

    题目链接:http://bailian.openjudge.cn/practice/1451/ 总时间限制: 1000ms 内存限制: 65536kB 描述 Background A while ag ...

  6. shell之使用paste命令按列拼接多个文件

    试验文件: [root@db03 shell-script]# cat text1.txt 1 2 3 4 5 [root@db03 shell-script]# cat text2.txt orac ...

  7. PCI 设备调试手段

    Author: Younix Platform: RK3399 OS: Android 6.0 Kernel: 4.4 Version: v2017.04 一PCI 设备调试手段 busybox ls ...

  8. 2016年蓝桥杯省赛A组c++第9题(逆序串问题)

    /* X星球的考古学家发现了一批古代留下来的密码. 这些密码是由A.B.C.D 四种植物的种子串成的序列. 仔细分析发现,这些密码串当初应该是前后对称的(也就是我们说的镜像串). 由于年代久远,其中许 ...

  9. get post header获取数据方方法

    /** * get方式获取数据 * @param $url * @param $data * @return bool|string */public function methodGet($url, ...

  10. LCA&最小生成树

    LCA 经常被用来使用.比如询问树两点之间的距离. 比如树上差分 都是经常被使用的类型.有的时候倍增求LCA的同时还可以优化算法. 这道题呢 求一个严格的最小生成树,当然如果不严格的话如果有重边那么就 ...