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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
js 开发之autocomplete=&quot;off&quot;在chrom中失效的解决办法
Sep 28 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
es5 类与es6中class的区别小结
Nov 09 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
php查找任何页面上的所有链接的方法
2013/12/03 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
jquery 回车事件实现代码
2011/08/23 Javascript
dojo学习第一天 Tab选项卡 实现
2011/08/28 Javascript
node.js中的require使用详解
2014/12/15 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
python3实现读取chrome浏览器cookie
2016/06/19 Python
Python实现多进程共享数据的方法分析
2017/12/04 Python
python 剪切移动文件的实现代码
2018/08/02 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
Ado与Ado.net的相同与不同
2014/12/08 面试题
西安当代医院管理研究院笔试题
2015/12/11 面试题
工商治理实习生的自我评价分享
2014/02/20 职场文书
经营理念标语
2014/06/21 职场文书
2015年招生工作总结
2015/05/04 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js