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 相关文章推荐
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
angular.element方法汇总
Jan 07 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
H5实现仿flash效果的实现代码
Sep 29 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
优雅的使用javascript递归画一棵结构树示例代码
Sep 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
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
JS鼠标滑过图片时切换图片实现思路
2013/09/12 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
Vue项目从webpack3.x升级webpack4不完全指南
2019/04/28 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
Django中间件实现拦截器的方法
2018/06/01 Python
对python函数签名的方法详解
2019/01/22 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
个人教师自我评价范文
2013/12/02 职场文书
质量提升方案
2014/06/16 职场文书
十八大宣传标语
2014/10/09 职场文书
2014最新党员违纪检讨书
2014/10/12 职场文书
自我检讨报告
2015/01/28 职场文书
办公室主任岗位职责
2015/01/31 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL