element-ui中的input失焦验证

迈不过友情╰ 2024-04-18 22:26 84阅读 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 条评论，84人围观）

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

相关阅读

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

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

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

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

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

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

相关解决：el-select可输入时失焦会失去输入框中值

思路 1. filterable属性，是否可搜索，为true后select组件可以输入值了 2. el-select组件输入值是不会更改v-model的值的，而是选择

偏执的太偏执、/ 2024年03月22日 09:31/ 0 赞/ 42 阅读

相关 bootstrapValidator验证隐藏的input

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

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

相关 React-Native0.55版本 TextInput组件手动失焦

对应使用方式 onPress() { this.myTextInput.blur(); } 组件 <TouchableOpacit

冷不防/ 2023年02月24日 15:23/ 0 赞/ 11 阅读

相关 elementui input去中间空格

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

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

相关 textraex 失焦

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

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

相关失焦事件

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

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

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

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

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

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

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

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