antd vue表单验证_ant design vue框架中自定义表单或单个表单框验证
一.项目要求
1.要求:点击新增按钮弹出新增页面,在输入名称时进行验证,当输入名称和列表下的名称相同,即后台数据库中存在,此时将会提醒用户,该名称已存在,
2.要求:该名称不存在,则新增成功
二.思路
1.错误的思路
我刚开始的思路是,准备在点击新增页面中的确定按钮时进行验证,但此时会存在一个问题:
——点击确定时,已经调用了后台新增接口,此时新增的需要输入的表单数据已经传给后台,此时并不能做到验证名称是否存在——和重复,所以此时我通过后台给我的验证接口,验证后台数据库中是否存在该名称将毫无意义
2.正确效果
——应该的效果应该为名称输入和验证应该同时进行,一旦输入数据和下方列表重复,将会出现message提醒,当不输入任何内容时,此时将会提醒此输入框并不能为空
3.正确的思路
——应该使用ant design vue 中的表单验证,自定义验证表单元素,定义表单验证规则
三.步骤
1.定义表单输入框中的值的规则
在ant design vue中, "v-decorator"可以看成是v-model,和vue中的双向绑定作用类似
——v-decorator="[id, options]"
其中的id:必填输入控件唯一标志。支持嵌套式的写法。——算是一个普通的id名
options:一般是书写对于表单框中的值的验证 ——即 validatorRules.(自定义的变量值)
2.书写表单规则
rules:支持多个api(官网中有说)
len:字段长度 number
max:最大长度 number
message:校验文案(即提醒信息) string
min:最小长度 number
pattern:正则表达式校验 RegExp
required:表单框是否必填 boolean
validator: 自定义校验规则(校验函数) function(rule,value,callback)
whitespace: 必填时空格是否会被视为错误
validatorRules:{
//修改
name:{
rules:[ //rules是验证规则,
{
required:true, //是否为必填,否则将会出现提示信息
message:'请输入团名称' //当输入框为空时,呈现出的提示信息
},
{
validator:this.checkName //自定义的校验函数
}
]
}
//修改
},
3.定义校验函数
此函数每次必须返回一个callback()回调函数,否则将无法生效
//验证name是否重复和存在
checkName(rule,value,callback){
if(value==''|| value==undefined ){
// console.log('空和undefined')
callback("")
return
}else if(value!=''){
// console.log('不为空')
if(this.title=='新增'){
this.param.countyName=value //param是自己定义的一个空对象,且后台接口是处于不同的页面,所传递的参数不一样
// console.log(this.param)
}else if(this.title=='编辑'){
this.param.countyName=value
this.param.countyId=this.model.id
// console.log(this.param)
}
//调用接口,且传值,此处的getaAction()是自定义封装的get请求方法,其实就是axios
getAction('/west/county/checkExist',this.param).then((res)=>{
if(res.success){
callback() //如果成功,此时返回一个回调,进行下一步,(虽说我也不知道为什么返回一个空的回调,可以进行下一步)
}else{
callback('团名已存在')
}
})
}
},
antd vue表单验证_ant design vue框架中自定义表单或单个表单框验证相关推荐
- ant vue 树形菜单横向显示_ant design vue menu 导航菜单
ant design vue menu 导航菜单 ant design vue menu 导航菜单是一个网站或者系统的重要功能,通过导航可以对网站或者系统的功能进行分门别类. 水平导航菜单 例子 首页 ...
- vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用 场景复现 实际操作 解决a-table表格padding过宽 知识调用 文章中可能会 ...
- ant vue 设置中文_Ant Design Vue 添加区分中英文的长度校验功能
原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适.所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性. 百度搜了一圈都没找到合适的现成的解决 ...
- ant vue 语言_Ant Design Vue是什么
Ant Design Vue 是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致. Ant Desi ...
- vue 统计中英文字符串长度_Ant Design Vue 添加区分中英文的长度校验功能
原本的maxLength属性是不区分全角/半角字符的,对于一些可中英文混合输入地方而言不太合适.所以想找一个可区分全角/半角字符的校验,而且要保证一定的可重用性. 百度搜了一圈都没找到合适的现成的解决 ...
- ant vue 设置中文_vue+Ant design vue做项目-Go语言中文社区
哈喽哈喽,这期带来蚂蚁金服的一个 Ant Design 的 Vue 实现. 样式还是很现代化的,嗯...现在是2019年9月17,对现在来说还很fashion过几年就不知道了. 话不多说直接上手,喜欢 ...
- 在SQL SERVER 中如何备份和恢复单个表?
2019独角兽企业重金招聘Python工程师标准>>> 如果只想备份或恢复单个表而不想备份或恢复整个数据库的话,往往有以下方法: 使用命令bcp: 导出到filename文件中: M ...
- excel链接隐藏工作表_在Excel 2007和2010中隐藏和取消隐藏工作表和工作簿
excel链接隐藏工作表 Hiding worksheets can be a simple way to protect data in Excel, or just a way reduce th ...
- 【深入设计模式】单例模式—从源码分析内部类单例、枚举单例以及单例模式在框架中的应用
文章目录 1. 使用静态内部类实现单例模式 1.1 静态内部类单例写法 1.2 如何实现懒加载 1.3 为什么线程安全 2. 枚举类型单例单例模式 2.1 枚举类型单例写法 2.2 枚举类型单例原理 ...
最新文章
- 开源大咖齐聚2020启智开发者大会,共探深度学习技术未来趋势
- 分区文件http://wenku.baidu.com/view/d839d1868762caaedd33d4b7.html
- 大热荒野敲开资本大门后,精致露营就留得住年轻人吗?
- Android studio 使用Cmake完成C/C++ 的使用以及生成so文件
- Python设置画布大小_Python第25课:海龟绘图_自定义函数的应用
- linux网络编程应用于生活,[Linux网络编程]应用实例--获取网络时间
- Java故障定位方法总结
- android 讲程序设为默认主屏幕_轻松搞定 PC 副屏,双屏幕更方便!
- Visio 不能使用方向键移动图形的解决办法
- SpringCloud学习笔记:熔断器Hystrix(5)
- cocos2d-基本概念(5)-Effects 效果
- 使用matplotlib绘制K线图以及和成交量的组合图
- linux耳机的检测原理,耳机检测原理介绍
- 视频播放器测试用例分析(移动端)
- web前端开发前景如何
- 切比雪夫多项式(Chebyshev Polynomials)
- 英文字体识别在线识别_如何查找和识别字体
- 强烈推荐纪录片——《互联网之子》
- 重写equals方法一定要重写hashcode方法吗
- Eclipse java工程中添加文件+导入工程文件
热门文章
- 模具计算机辅助设计笔试题,CAD/CAM复习题
- Java版mc闪退_本文传授win10运行mc闪退的具体操作对策
- 实习日志(总结一些前端知识)
- (筆記) 如何使用Debussy與ModelSim做Co-Simulation? (SOC) (Verilog) (VHDL) (Debussy) (ModelSim)
- Variable详解
- c店banner的一个宽高度范围,详情页的宽高度是。淘宝天猫的详情页,看尺寸的快捷键,banner的设计规则和技巧
- 企业网络和家庭网络区别
- 面向可解释AI的黑盒和白盒模型
- Prometheus监控Kubernetes-1 架构调研
- HTML5+CSS期末大作业:环保网站设计——环境保护(10页) 含设计报告 HTML+CSS+JavaScript 静态HTML环境保护网页制作下载 DIV+CSS环保网页设计代码