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 相关文章推荐
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
jQuery实现的Div窗口震动特效
Jun 09 Javascript
解决ueditor jquery javascript 取值问题
Dec 30 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
Mar 03 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
ES6通过babel转码使用webpack使用import关键字
Dec 13 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
解决Vue不能检测数组或对象变动的问题
Feb 24 Javascript
在vue中实现echarts随窗体变化
Jul 27 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 MSSQL 存储过程的方法
2008/12/24 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
php 中英文语言转换类代码
2011/08/11 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
拖拉表格的JS函数
2008/11/20 Javascript
javascript获取当前ip的代码
2009/05/10 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
7个JS基础知识总结
2014/03/05 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
微信小程序实现搜索功能
2020/03/10 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
Python匹配中文的正则表达式
2016/05/11 Python
基于python 字符编码的理解
2017/09/02 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
pytorch简介
2020/11/11 Python
python数据抓取3种方法总结
2021/02/07 Python
基于html5实现的图片墙效果
2014/10/16 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
甲方资料员岗位职责
2013/12/13 职场文书
餐饮业员工工作决心书
2014/03/11 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
死亡赔偿协议书
2015/01/28 职场文书
离职告别感言
2015/08/04 职场文书
python神经网络ResNet50模型
2022/05/06 Python
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS