ElementUI Form 调用后端接口校验

使用ElementUI Form 校验时,如果需要调用后端接口进行校验的话,那么使用自定义验证规则

    var validateCode = (rule, value, callback) => {
      if (value === ‘‘) {
        callback(new Error(‘请输入岗位编码‘));
      } else if (value.length > 50) {
        callback(new Error(‘岗位编码不超过50个字符‘));
      } else if (!/^[a-zA-Z][a-zA-Z0-9_\-]*$/.test(value)) {
        callback(new Error(‘以字母开头,英文、数字、下划线、中划线(此四项非必须)‘));
      } else {
        let data = {code: value};
        if (this.type === 1) {
          data.id = this.jobForm.id;
        }
        this.validateCodeRepeat(data).then(res => {
          if (res) {
            callback(new Error(‘岗位编码重复‘));
          } else {
            callback();
          }
        });
      }

  

原文地址:https://www.cnblogs.com/hanhaihu/p/12532559.html

时间: 2024-11-02 13:00:37

ElementUI Form 调用后端接口校验的相关文章

SpringCloud微服务之跨服务调用后端接口

SpringCloud微服务系列博客: SpringCloud微服务之快速搭建EurekaServer:https://blog.csdn.net/egg1996911/article/details/78787540 SpringCloud微服务之注册服务至EurekaServer:https://blog.csdn.net/egg1996911/article/details/78859200 SpringCloud微服务之集成thymeleaf访问html页面/静态页面&热部署:https

小程序调用后端接口服务 配置文件详解

前言:为了开发阶段的效率更高,方便项目接口管理,在做web项目时,我们需要把后端提供的接口地址进行配置,这样我们自己在调用时,要方便得多,利己利人.在配置小程序接口地址时,和web的配置大同小异,下面总结几点配置小程序接口地址的思路: 1.所有接口地址,要丢在一个对象里[为了方便下面解释,这里设置一个对象名:config],为什么了,因为要对外暴露,方便外部访问,这样[key:value]方式是最合理的,那就是对象了. 2.真实接口地址,也就是对象键值对的value,要用英文模式下Tab键的上一

axios解决调用后端接口跨域问题

vue-cli通过是本地代理的方式解决接口跨域问题的.但是在vue-cli的默认项目配置中这个代理是没有配置的,如果现在项目中使用,必须手动配置config/index.js文件 ... proxyTable: { '/api': { //将www.exaple.com印射为/apis target: 'https://www.example.com, // 接口域名 secure: true, // 如果是https接口,需要配置这个参数 changeOrigin: true, //是否跨域

form表单调接口校验 比如后台验证用户名是否存在

<FormItem {...formItemLayout} label={'显示名'}> {getFieldDecorator('displayName', { initialValue: displayName, validateTrigger: 'onBlur', rules: [ { transform: val => val && val.trim() }, { required: true, message: '请输入显示名' }, { max: 20, mes

前端提供一个接口或者调用后台接口,这个接口具体指什么

ajax 我给你一个例子 (function () { var timing = null; console.log($(".name").length) timing=setInterval(function () { $.ajax( { type: "post", url: "http://t1.loocha.cn:9880/link/anchor/finalcompetitor?activityId=40987", data: {}, da

前端吐槽的后端接口那些事

今天与另一位前端开发人员扯起了后端接口的皮(我也是前端人员),那个兄弟对后端人员提供的接口很大的意见(我是司空见惯),不过他说的也确实有道理,所以结合我的见解,希望提供接口的人员能多加注意. 1.没有文档... 例如新的前端人员到了一个新的公司,使用接口时,问这个这个不知道,问那个那个不知道,要文档没文档,这绝对是前端人员最抓狂的事,心里肯定是一千只草泥马奔腾而过. 为什么要文档? 1. 文档是当前开发者甚至后面的接盘侠(后面开发者)能够清晰往下做的指引. 2. 即便是简单的东西,但如果不写文档

分享一个PHP调用RestFul接口的函数

php越来越前端化,大型系统中的php经常是调用后端服务的接口,这里分享一个函数.希望对大家有用. /** * [http 调用接口函数] * @Date 2016-07-11 * @Author GeorgeHao * @param string $url [接口地址] * @param array $params [数组] * @param string $method [GET\POST\DELETE\PUT] * @param array $header [HTTP头信息] * @par

h5调用底层接口知识总结

本文标签: h5调用底层接口 h5 h5调用本地摄像头 前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简单介绍下,并讲解下使用的注意事项.放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,QQ浏览器,Chrome,Safari浏览器都可以.在不同的手机和浏览器上面展现的方式不一样.这是html5官方文档地址,里面有关于h5或js

thinkjs学习-this.assign传递数据和ajax调用后台接口

在页面加载时,就需要显示在页面上的数据,可以在后台使用this.assign赋值,在前台通过ejs等模板获取:用户点击按钮,或者触发某些事件和后台进行交互时,就需要用到ajax调用后台接口.本文通过一个例子讲述这两种方法的前后台实现.(方便起见,使用jQuery封装的ajax)' (ps:ajax调用后台接口的情形通常是用户触发事件,给后台传递一些前台的数据,然后后台根据这些数据进行相关操作,再返回前台一些数据.举个表单提交的例子,用户点击提交按钮之后,将填写的表单信息传递个后台,后台对传过来的