vue element自定义表单验证请求后端接口验证


Posted in Javascript onDecember 11, 2019

做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值。

template

<el-form-item label="账户" prop="userid">
  <el-input v-model="addForm.userid"></el-input>
</el-form-item>

引入接口

import { checkUseridRepeat } from '@/api/user'

校验

data: () => {
  var validateUserid = (rule, value, callback) => {
   if (value === '') {
    callback(new Error('必填'))
   } else {
     checkUseridRepeat().then(response => {
      if ( response.code === '1') {
         callback(new Error('已经存在,不能重复'))
        }
     })
    }
  }
  return {
    addrules: { // 新增表单校验
     userid: [
      { required: true, validator: validateUserid, trigger: 'blur' }
     ],    
    },
   }
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
Jan 24 Javascript
javascript中的this详解
Dec 08 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
vue如何集成raphael.js中国地图的方法示例
Aug 15 Javascript
解决vue多个路由共用一个页面的问题
Mar 12 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
详解如何在JS代码中消灭for循环
Dec 11 #Javascript
Angular封装表单控件及思想总结
Dec 11 #Javascript
小程序接口的promise化的实现方法
Dec 11 #Javascript
js中Function引用类型常见有用的方法和属性详解
Dec 11 #Javascript
jQuery实现验证用户登录
Dec 10 #jQuery
这样回答继承可能面试官更满意
Dec 10 #Javascript
jquery实现弹窗(系统提示框)效果
Dec 10 #jQuery
You might like
php 变量未定义等错误的解决方法
2011/01/12 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
自定义jQuery选项卡插件实例
2013/03/27 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
JavaScript中双叹号(!!)作用示例介绍
2014/04/10 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
2014/05/14 Javascript
jQuery插件slider实现拖动滑块选取价格范围
2015/04/30 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jQuery支持添加事件的日历特效代码分享(3种样式)
2015/08/24 Javascript
深入解析JavaScript中的arguments对象
2016/06/12 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
python存储16bit和32bit图像的实例
2018/12/05 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
利用Python计算KS的实例详解
2020/03/03 Python
基于Django OneToOneField和ForeignKey的区别详解
2020/03/30 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
幼儿园开学寄语
2014/04/03 职场文书
公司节能减排方案
2014/05/16 职场文书
社区维稳工作方案
2014/06/06 职场文书
信用卡工资证明范本
2015/06/19 职场文书
围城读书笔记
2015/06/26 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android