vue + element 自定义表单验证的时候 需要通过请求后端接口验证

做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('已经存在,不能重复'))} else {callback()}})}}return {addrules: { // 新增表单校验userid: [{ required: true, validator: validateUserid, trigger: 'blur' }],        },}},

vue + element 自定义表单验证的时候 需要通过请求后端接口验证相关推荐

  1. Vue element 自定义表单验证(手机号校验 )

    element官网中没有手机号的验证? 别慌,绝绝子来教你呀! 手机号验证效果如下: 代码如下: <el-form-item label="手机号" prop="t ...

  2. Vue element 自定义表单验证(验证联系方式、邮箱、邮政编码)

    <el-form:model="form":rules="rules"ref="formRef"style="max-wid ...

  3. vue+element ui表单校验(邮箱、电话、工商信息)

    vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...

  4. element自定义表单验证上传身份证正反面的实现

    效果图 <template>     <div>         <el-form :model="personalForm" :rules=&quo ...

  5. vue element form 表单

    <template><!--model绑定整个form对象的的数据--><el-form :model="form" label-width=&quo ...

  6. element自定义表单label

    在label前面加上复选框,通过slot进行定义 <el-form-item><span slot="label"><el-checkbox v-mo ...

  7. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

      方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...

  8. antd vue表单验证_ant design vue框架中自定义表单或单个表单框验证

    一.项目要求 1.要求:点击新增按钮弹出新增页面,在输入名称时进行验证,当输入名称和列表下的名称相同,即后台数据库中存在,此时将会提醒用户,该名称已存在, 2.要求:该名称不存在,则新增成功 二.思路 ...

  9. element UI 表单自定义验证,css水平且垂直居中方法

    element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证 首先是element UI 提供的基础 ...

最新文章

  1. windows dos/cmd常用命令
  2. 选择排序的思想及其实现
  3. 【调参实战】那些优化方法的性能究竟如何,各自的参数应该如何选择?
  4. js 正则表达式 取反
  5. Grub2主题修改和美化--------LinuxWindows
  6. 浅谈c++静态绑定、动态绑定
  7. oracle排序字符,Oracle数据字符集和排序的用法
  8. 如何查看mongo集合的数据类型
  9. WordPress目录解析
  10. 码上致富(APP+H5+小程序)淘宝客APP源码导购APP源码代理淘客APP源码
  11. [置顶] iOs LightBlue与cc2540 BLE开发板之间的通信实验 [原创, 多图]
  12. 23个无本空手套白狼的赚钱方法!颠…
  13. jdk版本升级或降级
  14. 『杭电1897』SnowWolf‘s Wine Shop
  15. YYC优雅草松鼠聚合直播系统·前端视频模块显示空白-解决办法-视频上传处理方法
  16. html制作钟表盘,CSS3简易表盘时钟
  17. php yi ju hua,汉音对照 这句话应该如何翻译? zhe ju hua ying gai ru he fan yi ? - 王朝网络 - wangchao.net.cn...
  18. 二维C语言,二维FFT,IFFT,c语言实现
  19. LinuxZIP压缩和解压缩
  20. 财务管理与计算机论文,计算机小论文--浅论计算机与财务管理

热门文章

  1. Linux基础(一) Linux命令
  2. 面向对象方法的具体实施步骤
  3. Toolbar的介绍和使用
  4. 自动驾驶数据采集和分析平台--ADAS Logger
  5. 绩效焦虑–关于绩效不可预测性,度量和基准
  6. excel表格中对某一列相同的值进行合并居中
  7. SQLSERVER2008 233 18456
  8. [HADOOP]我所遇到的Hadoop报错(更新中)
  9. 你对【瑞文代码推土机】的第一次
  10. java第十四章上机四客户类_java语言程序设计教学大纲.doc