element-ui-verify是对ElementUI原本的校验封装之后的插件,并不会影响使用ElementUI的原生校验。

使用环境为vue+element-ui+webpack模块环境,首先使用淘宝镜像安装cnpm install -s element-ui-verify,安装之后在main.js中引入并使用

 import elementUIVerify from 'element-ui-verify'

 // 注意使用之前必须要先use elementUI
Vue.use(elementUIVerify)

main.js使用之后就可以直接在el-form-item标签上使用校验规则了,例如下面代码表示内容大于0的校验:

 <el-form-item label="年龄" prop="age" verify int :gt="0">
<el-input v-model.number="model.age"></el-input>
</el-form-item>

默认支持的校验规则

length 校验文本长度
minLength 校验文本最短长度
gt 校验数字要大于某数
gte 校验数字要大于等于某数
lt 校验数字要小于某数
lte 校验数字要小于等于某数
maxDecimalLength 校验数字最大小数位
number 校验是否为数字
int 校验是否为整数
phone 校验是否为手机号(随着号段的增加,未来可能需要更新)
email 校验是否为电子邮件地址
verifyCode 校验是否为6位数字验证码

使用这个插件,verify是必须的,如果想使用原生的elementUI校验规则就不需要写verify。

其他关键字说名

canBeEmpty:可以为空,当不为空时又需要校验;

space:使用该关键字时空格也参加校验;

emptyMessage:空检测错误提示;

errorMessage:自定义校验不通过提示;

 <el-form-item prop="numberProp" verify number error-message="请输入正确的数字"></el-form-item>

alias:复用错误提示,插件默认值:"该输入项",使用这个关键字可以{alias}不能为空

例如空检测错误提示模板为:

 {empty: '{alias}不能为空'}

表单内容为:

 <el-form-item prop="unknown" verify></el-form-item>
<el-form-item alias="姓名" prop="name" verify></el-form-item>
<el-form-item label="地址" prop="address" verify></el-form-item>
  • unknown输入框为空时,会提示"该输入项不能为空"(alias值默认为"该输入项")
  • 姓名输入框为空时,会提示"姓名不能为空"(显式设置了alias值时,提示内容自然会以该值去替换模板)
  • 地址输入框为空时,会提示"地址不能为空"(大部分el-form-item都需要设置一个label项,而label项往往就代表该输入项的alias,因此插件会取该值直接作为alias)

watch:监听其他变量触发自身校验,例如修改密码

 <template>
<el-form :model="model">
<el-form-item label="密码" prop="pass1" verify>
<el-input v-model="model.pass1"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="pass2" :verify="verifyPassword" :watch="model.pass1">
<el-input v-model="model.pass2"></el-input>
</el-form-item>
</el-form>
</template>
<script>
export default{
data () {
return {
model: {
pass1: '',
pass2: ''
}
}
},
methods: {
verifyPassword (rule, val, callback) {
if (val !== this.model.pass1) callback(Error('两次输入密码不一致!'))
else callback()
}
}
}
</script>

自定义校验规则

开发中如果自带的校验规则满足不了需求,我们通常将在全局自定义校验规则,首先在src目录下新建文件夹,我的文件夹叫verifyRule,文件夹中新建index.js文件,通过模块化导出校验规则。

 export default [{
rule: {
name: 'blacklist',
},
ruleMethod: () => ({
validator(rule, val, callback) {
let windowvue = window.vue;
windowvue.$http.post('校验接口',{searchKey: val}).then(function(result){
if(result){
callback(new Error('错误提示信息));
}else{
callback();
}
});
}
})
}
];

然后在main.js里遍历添加校验规则

 import ElementUIVerify from 'element-ui-verify'
Vue.use(ElementUIVerify)
// node中如果包下无法通过package.json找到main会自动读取包下的index.js文件
import verifyrules from '@/verifyRule' verifyrules.forEach(item => {
ElementUIVerify.addRule(item.rule, item.ruleMethod);
})

添加之后就可以在项目中通过‘blacklist‘使用自定义的校验规则。

 <el-form-item label="身份证号" prop="customerCardNO" verify blacklist ></el-form-item>

element-ui-verify使用的更多相关文章

  1. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

  2. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  3. [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】

    element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...

  4. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  5. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

  6. Html | Vue | Element UI——引入使用

    前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...

  7. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  8. 上传图片组件封装 element ui

    // element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...

  9. vue项目使用element ui的Checkbox

    最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...

  10. vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用

    其实这3个讲的是一个问题,先说下问题,我在watch里设置一个监听,当弹窗打开时,自动添加树形的默认选中项, 但奇怪的是this.$refs为undefined,自然setCheckedKeys无法使 ...

随机推荐

  1. PHP为什么有人学不会

    互联网进入到人们生活中的方方面面了,世界首富比尔盖茨多次提到青少年编程,而编程是一种思维习惯的转化. 作为写了10几年程序的人,我听到过一些说编程不好学的抱怨. 从目前见到的数据统计,主要是因为在大学 ...

  2. JDBC 链接mysql 8 的问题

    转载:jdbc连接mysql 8 的一些坑 1.驱动包要升级为 mysql-connector-java-8.0.11.jar 2.JDBC driver 由“com.mysql.jdbc.Drive ...

  3. wxPython制作跑monkey工具(python3)

    一. wxPython制作跑monkey工具python文件源代码内容Run Monkey.py如下: #!/usr/bin/env python import wx import os import ...

  4. SQL server 的身份验证模式

    windows身份验证(本机的ip地址或者localhost 或者.或者127.0.0.1) SQL Server身份验证(用户名和密码登录) 常见的错误代码18456(登录失败)和18470(账户被 ...

  5. I/O 模型与 Java

    本文主要记录 Java 中 I/O 模型及相关知识点 .另,由于自身知识水平有限,如有不正之处,望各位能够谅解,欢迎批评指正! 一.I/O 基础 由于 Java 中 I/O 相关的 API ,无论是 ...

  6. 2018-2019-2 网络对抗技术 20165228 Exp2 后门原理与实践

    2018-2019-2 网络对抗技术 20165228 Exp2 后门原理与实践 (1)例举你能想到的一个后门进入到你系统中的可能方式? 在使用盗版软件,盗版系统,甚至游戏外挂时,往往会让我们关闭杀毒 ...

  7. stack.isEmpty()和empty()

    public class Stack<E> extends Vector<E> 可以看到Stack类继承了Vector类 这个是stack类里面的方法: /** * Tests ...

  8. Java实现inputstream流的复制

    获取到一个inputstream后,可能要多次利用它进行read的操作.由于流读过一次就不能再读了,而InputStream对象本身不能复制,而且它也没有实现Cloneable接口,所以得想点办法. ...

  9. VS2013 Winform程序打包部署 InstallShield2015LimitedEdition

    VS2013 Winform程序打包部署 VS2013默认是没有安装打包程序的,需要手动安装,我安装的是 InstallShield2015LimitedEdition. 1.点击解决方案,右键,选择 ...

  10. 校园管家(Android开发团队项目)NABCD

    N(Need)需求: 现如今数据越来越零碎化,繁杂化,身为在校大学生的我们也因此对于时间的利用率也相应减少,为了时间的充分利用,减少在冗杂的信息中耽误的时间,充分利用大学资源,因此我们打算做一个专门发 ...