vue element自定义表单验证请求后端接口验证

 更新时间:2019年12月11日 09:35:05   作者:sunshine1213  
这篇文章主要介绍了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('已经存在,不能重复'))
        }
     })
    }
  }
  return {
    addrules: { // 新增表单校验
     userid: [
      { required: true, validator: validateUserid, trigger: 'blur' }
     ],    
    },
   }
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Element el-table 表格使用详解

    Element el-table 表格使用详解

    我们的数据存储到数据库,不就是以表格的形式存在吗,所以在界面上显示、操作,使用表格来处理也是非常合理的,这篇文章给大家介绍Element el-table 表格使用方法,感兴趣的朋友一起看看吧
    2024-03-03
  • Vue.js中动态更改svg的相关属性详解

    Vue.js中动态更改svg的相关属性详解

    这篇文章主要为大家介绍了Vue.js中动态更改svg的相关属性详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • vue 使用el-table循环生成表格的过程

    vue 使用el-table循环生成表格的过程

    这篇文章主要介绍了vue 使用el-table循环生成表格的过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue项目通过node连接MySQL数据库并实现增删改查操作的过程详解

    Vue项目通过node连接MySQL数据库并实现增删改查操作的过程详解

    最近在研究vue项目中使用node.js搭建server服务器,链接本地mysql数据库,进行数据操作,下面这篇文章主要给大家介绍了关于Vue项目通过node连接MySQL数据库并实现增删改查操作的相关资料,需要的朋友可以参考下
    2022-05-05
  • 在vue中写jsx的几种方式

    在vue中写jsx的几种方式

    本文主要介绍了在vue中写jsx的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue 项目优雅的对url参数加密详解

    vue 项目优雅的对url参数加密详解

    这篇文章主要为大家介绍了vue 项目优雅的对url参数加密详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • vue实现图形验证码

    vue实现图形验证码

    这篇文章主要为大家详细介绍了vue实现图形验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • Vue显示图片的几种方式小结

    Vue显示图片的几种方式小结

    本文主要介绍了Vue显示图片的几种方式小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue3项目配置按需自动引入自定义组件unplugin-vue-components方式

    vue3项目配置按需自动引入自定义组件unplugin-vue-components方式

    这篇文章主要介绍了vue3项目配置按需自动引入自定义组件unplugin-vue-components方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue实现滚动鼠标滚轮切换页面

    vue实现滚动鼠标滚轮切换页面

    这篇文章主要为大家详细介绍了vue实现滚动鼠标滚轮切换页面,类似于纵向走马灯,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12

最新评论