element-ui中的input失焦验证

迈不过友情╰ 2024-04-18 22:26 70阅读 0赞

一般情况下，input失焦验证只需要一句话就行

name: [{ required: true, message: "请输入真实姓名", trigger: "blur" }]

这是验证失焦时如果没有输入东西，那么下面就会出现一句 ‘请输入真实姓名’,

但是现在后台有一个需求，就是如果在失焦的情况下，如果输入的用户名与之前有重复，那么下面就会出现一句话 ‘已有用户名，请重新输入’，而且需要有接口跟他配合，所以这个时候就会用到比较复杂的带调接口的验证，代码如下：

//username在失焦的时候判断有没有重复的用户名
        var validatePass = (rule, value, callback) => {
          axios
          .get('/api/Users/SelectUserName',{
            params:{
              'UserName':value || ''
            }
          })
          .then(function(res){
            console.log(res)
            if(value == undefined && res.ResultType==0){
               callback(new Error('请输入用户名'));
            }else if(value !='' && res.ResultType==7){
               callback(new Error('该用户名已经存在，请重新输入'));
            }else{
              callback();
            }
          })
          .catch(function(error){
            console.log(error)
          })

也就是在验证里直接掉接口，通过接口返回的数值不同进行判断。

下面rules是这么写的：

UserName:[{ required: true,validator: validatePass, trigger: 'blur' }]

暂时就get这么多~

发表评论取消回复

表情：

评论列表（有 0 条评论，70人围观）

还没有评论，来说两句吧...

相关阅读

相关 element-ui中的input失焦验证

般情况下，input失焦验证只需要一句话就行 name: [{ required: true, message: "请输入真实姓名", trigger: "bl...

迈不过友情╰/ 2024年04月18日 22:26/ 0 赞/ 71 阅读

相关 PyQt5中如何利用定时器实现失焦监听？

PyQt5中如何利用定时器实现失焦监听？在PyQt5中，我们可以通过定时器机制来实现失焦监听。当用户在当前窗口无操作一段时间时，我们可以采取一些措施以提醒用户或执行一些自动

一时失言乱红尘/ 2024年03月25日 21:12/ 0 赞/ 89 阅读

相关 bootstrapValidator验证隐藏的input

bootstrapValidator验证隐藏的input 解决方法： 1.html标签如下 <input type="text" class="form-contr

偏执的太偏执、/ 2023年07月12日 05:14/ 0 赞/ 8 阅读

相关 elementui input去中间空格

1.方法名：@keyup.native="trimName('query', 'identName')" 2.代码 <el-form-item label="代码名

一时失言乱红尘/ 2022年10月20日 14:57/ 0 赞/ 257 阅读

相关让HTML标签、DIV、SPAN拥有onfocus和onblur，聚焦和失焦

DIV和其他普通标签是不具有onfocus和onblur事件的。 INPUT和A标签为什么拥有？而DIV和SPAN等普通标签却没有？有时候我们习惯性用键盘的TAB来移

柔情只为你懂/ 2022年07月12日 03:26/ 0 赞/ 187 阅读

相关 textraex 失焦

效果图： ![SouthEast][] ![SouthEast 1][] ![SouthEast 2][] 具体实现： 1、textarea标签内容 \[ht

淩亂°似流年/ 2022年06月04日 09:55/ 0 赞/ 213 阅读

相关失焦事件

// 添加事件 var addEvent = function() \{ $(doc

雨点打透心脏的1/2处/ 2022年05月16日 00:50/ 0 赞/ 182 阅读

相关 JS表单验证聚焦离焦 input（onfocus onblur）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

妖狐艹你老母/ 2022年05月15日 15:56/ 0 赞/ 256 阅读

相关小程序input框失焦事件在提交事件前的处理

无论是小程序还是平常的Html页面，input文本框我们用到的次数都很多，这一篇文章主要是讲关于小程序中文本框聚焦自动拉起输入键盘的一些使用心得。为什么我需要聚焦拉起键盘呢

Myth丶恋晨/ 2022年04月12日 10:48/ 0 赞/ 581 阅读

相关 ElementUI Select、Input。改变长度（宽度）

> 所有文章优先发布在个人博客，后续可能忘记同步到CSDN。给你带来麻烦抱歉。 > > 个人博客这篇文章的位置 : [https://www.xdx97.com/articl

亦凉/ 2022年04月08日 13:51/ 0 赞/ 1042 阅读