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. mongodb三种存储引擎高并发更新性能专题测试

    背景说明 近期北京理财频道反馈用来存放股市实时数据的MongoDB数据库写响应请求很慢,难以跟上业务写入速度水平.我们分析了线上现场的情况,发现去年升级到SSD磁盘后,数据持久化的磁盘IO开销已经不是 ...

  2. API(一)之Serialization

    virtualenv is a tool to create isolated Python environments. 建立一个新的环境 Before we do anything else we' ...

  3. C#网页采集数据的几种方式(WebClient、WebBrowser和HttpWebRequest/HttpWebResponse)

    一.通过WebClient获取网页内容 这是一种很简单的获取方式,当然,其它的获取方法也很简单.在这里首先要说明的是,如果为了实际项目的效率考虑,需要考虑在函数中分配一个内存区域.大概写法如下 //M ...

  4. 记一次 windows server 2012R2 上安装 MSSQL2005 及网站发布

    背景: 原因是因为没有购买新的数据库授权.由于之前服务器是windows 2003 由于后绪网站的版本可能会升到.net4.5 据说 2003上安装不起 所有由另一同事到客户安装一个window se ...

  5. 矩阵游戏|ZJOI2007|BZOJ1059|codevs1433|luoguP1129|二分图匹配|匈牙利算法|Elena

    1059: [ZJOI2007]矩阵游戏 Time Limit: 10 Sec  Memory Limit: 162 MB Description 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩 ...

  6. .NET Core开发日志——Linux版本的SQL Server

    SQL Server 2017版本已经可以在Linux系统上安装,但我在尝试.NET Core跨平台开发的时候使用的是Mac系统,所以这里记录了在Mac上安装SQL Server的过程. 最新的SQL ...

  7. 泡泡一分钟:Exploiting Points and Lines in Regression Forests for RGB-D Camera Relocalization

    Exploiting Points and Lines in Regression Forests for RGB-D Camera Relocalization 利用回归森林中的点和线进行RGB-D ...

  8. win10 Java环境变量,hadoop 环境变量

    妈呀,今天又重装了系统.需要装上java环境. 安装环境老百度,然后老掉坑.(path 路经) 1,新建环境变量 JAVA_HOME 2, 新建 CLASSPATH 环境变量 .;%JAVA_HOME ...

  9. [No0000192]Vim打开和保存文件-Vim使用技巧(7)

    使用Vim打开和保存文件是最常用的操作,介绍使用edit命令通过文件路径来打开文件,使用write命令保存文件,当文件路径不存在或用户权限不匹配时,使用write命令调用外部shell程序完成操作. ...

  10. svn 修改文件的可执行权限

    设置svn可执行权限,svn:executable 1)svn propset svn:executable on 文件名/文件夹名 2)svn propset svn:executable on t ...