iview表单验证之正则

正则验证:

代码:

loginRules: {
stringLength: [
{ required: true, message: '该字段不能为空', trigger: 'blur' },
{ pattern: /^[1-9]\d*$/, message: '该字段为整数', trigger: 'blur' }
]
}

函数验证:

1.首先在data中定义验证方法

data () {
const validateMax = (rule, value, callback) => {
if (this.formItem.min !== undefined && this.formItem.max !== undefined && this.formItem.min !== '' && this.formItem.max !== '') {
if (this.formItem.min * 1 > this.formItem.max * 1) {
callback(new Error('最大值必须大于最小值'))
this.$refs.FormRef.validateField('min') // iviewForm方法,验证min
} else {
callback()
this.$refs.FormRef.validateField('min')
}
} else {
callback()
}
}
const validateMin = (rule, value, callback) => {
if (this.formItem.min !== undefined && this.formItem.max !== undefined && this.formItem.min !== '' && this.formItem.max !== '') {
if (this.formItem.min * 1 > this.formItem.max * 1) {
callback(new Error('最小值必须小于最大值'))
} else {
callback()
}
} else {
callback()
}
}
return {
}

2.在表单验证中插入验证

/* 表单验证 */
loginRules: {
max: [
{ pattern: /^-?[1-9]\d*$/, message: '该字段只能是整数', trigger: 'blur' },
{ validator: validateMax, trigger: 'blur' }
],
min: [
{ pattern: /^-?[1-9]\d*$/, message: '该字段只能是整数', trigger: 'blur' },
{ validator: validateMin, trigger: 'blur' }
]
}

钻研不易,转载请注明出处......

iview表单验证之正则验证、函数验证的更多相关文章

  1. 有关使用 iview 表单验证的问题

    Vue的UI解决框架,element-UI, iview-UI 有关表单验证使用的是同一个插件,async-validator,有关这个插件的用法就不做赘述,但是在iview表单的使用中可能会用到验证 ...

  2. iview表单验证下拉框不通过问题

    iview表单验证的步骤: 第一步:给 Form 设置属性 rules :rules 第二步:同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步:注意 ...

  3. iview表单验证不生效问题注意点

    按照iview官网介绍写的form表单验证,但是无论填写与否都不进行校验,找了很久的原因,突然才发现一个关键的地方,一定要加props!!! https://blog.csdn.net/xuaner8 ...

  4. 利用JS提交表单的几种方法和验证(必看篇)

    第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <scr ...

  5. iview 表单验证不通过问题?

    项目需要,需要怂iview..使用一段时间感觉跟elementUI用起来差不多很方便.使用过程中遇到表单验证问题,如何避免在验证过程中偶尔出现验证不通过的异常情况? <1>:给 <F ...

  6. Vue iview 表单封装验证

    以下内容转自iview社区,仅供自己查看使用 Form表单部分 <div> <Form ref="FormOne" :model="FormOne&qu ...

  7. iview表单密码自定义验证

    From中定义   ref="passwordForm" 获取dom节点  :model="passwordForm" 关联表单数据对象 :rules=&quo ...

  8. iview 表单非空验证

    rules: { title: [ {required: true, message: '请填写栏目名称', trigger: 'blur'} ], desc: [ {required: true, ...

  9. ant-design表单处理和常用方法及自定义验证

    首先要说一下antdesign这个框架API和demo丰富,而且开发环境提供对应的warning来纠正用户的错误.是一个很好的组件库. 关于表单验证方面是依赖于 async-validator  库. ...

随机推荐

  1. react 脚手架 及路由和 redux

    前提是我们需要下载 nodejs 使用 npm 下载 react 的脚手架,react-router-dom,redux 全局下载 react 的脚手架:npm i create-react-app ...

  2. koa 基础(四)get 传值 以及获取 get 传值

    1.get 传值 以及获取 get 传值 app.js /** * get 传值 以及获取 get 传值 */ // 引入模块 const Koa = require('koa'); const ro ...

  3. 运维之思科篇——NAT基础配置

    一. NAT(网络地址转换) 1. 作用:通过将内部网络的私有IP地址翻译成全球唯一的公网IP地址,使内部网络可以连接到互联网等外部网络上. 2. 优点: 节省公有合法IP地址 处理地址重叠 增强灵活 ...

  4. Xman冬令营writeup

    做题一时爽,期末火葬场,一晚上水了三题,跪求期末不挂,老老实实去复习.祝各位表哥冬令营玩的开心. 中二的成长之路 很容易发现图片本身就是个压缩包,里面还有个图片,但是加密了所以需要我们求出压缩包的密码 ...

  5. linux命令行下常用快捷键

    快捷键的使用: ctrl+d或者使用logout.exit退出终端ctrl+a跳到开始ctrl+e跳到最后ctrl+u向前删除ctrl+k向后删除ctrl+c中断命令ctrl+z暂停命令 fg:将暂停 ...

  6. LoadRunner中的Web 函数列表

    LoadRunner中的Web 函数列表 web test LoadRunner fuction_list D:\Program Files (x86)\Mercury Interactive\Mer ...

  7. php下关于字符串与数组的相互转换的函数

    public static function string2array($tags)    {        return preg_split('/\s*,\s*/',trim($tags),-1, ...

  8. SqlServer:SqlServer(xpath,字段约束,时间查询,数据文件查询及还原,压缩备份)

    1.xpath --1.文档 select @data --2.任意级别是否存在price节点 select @data.exist('//price') --3.获取所有book节点 select ...

  9. 在web项目中获取ApplicationContext上下文的3种主要方式及适用情况

    最近在做web项目,需要写一些工具方法,涉及到通过Java代码来获取spring中配置的bean,并对该bean进行操作的情形.而最关键的一步就是获取ApplicationContext,过程中纠结和 ...

  10. 基于nodeJS的小说爬虫实战

    背景与需求分析 最近迷恋于王者荣耀.斗鱼直播与B站吃播视频,中毒太深,下班之后无心看书. 为了摆脱现状,能习惯看书,我开始看小说了,然而小说网站广告多而烦,屌丝心态不愿充钱,于是想到了爬虫. 功能分析 ...