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 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
用JQuery实现全选与取消的两种简单方法
Feb 22 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
Apr 12 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
vue中使用elementUI组件手动上传图片功能
Dec 13 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通用检测函数集合
2006/11/25 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
php实现学生管理系统
2020/03/21 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
基于jquery的无限级联下拉框js插件
2011/10/29 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
Python实现堆排序的方法详解
2016/05/03 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
python/golang 删除链表中的元素
2020/09/14 Python
python SOCKET编程基础入门
2021/02/27 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
英语简历自我评价
2014/01/26 职场文书
内勤主管岗位职责
2014/04/03 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
小时代观后感
2015/06/10 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python