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 相关文章推荐
javascript 循环读取JSON数据的代码
Jul 17 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
JavaScript 学习笔记之基础中的基础
Jan 13 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
element UI upload组件上传附件格式限制方法
Sep 04 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
postman自定义函数实现 时间函数的思路详解
Apr 17 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 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模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
Python集合操作方法详解
2020/02/09 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
您的网上新华书店:文轩网
2016/08/24 全球购物
学生请假条
2014/04/11 职场文书
教师个人学习总结
2015/02/11 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏
不负正版帝国之名 《重返帝国》引领SLG手游制作新的标杆
2022/04/07 其他游戏