Vue使用vux-ui自定义表单验证遇到的问题及解决方法


Posted in Javascript onMay 10, 2018

初学框架vue搭配vux使用发现这个UI库使用有些力不从心。下面说说自己在表单验证过程遇到的两个需求问题及解决的方法。

1.使用x-input组件可知,官方只给了三种类型的is-type验证器,分别是:email,china-name,china-mobile,其他需要自己自定义验证器,怎么写验证器?

解决方法:自定义is-type验证器(试验过可以在valid使用正则验证)

<x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" />
export default {
  data() {
    return{
      code: '',
      codeValue: function(value){
        return {
          valid: value.length === 4,
          msg: "验证码有误!"
        }
      }
    }
  }
}

2.表单内容都填写无误之后,提交表单的按钮才能被触发(如图)

Vue使用vux-ui自定义表单验证遇到的问题及解决方法

解决方法:使用x-input组件的@on-change事件,及ref属性

<x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" ref="refcode" @on-change="keyDown" />
<x-button action-type="submit" :disabled="disabled">完成</x-button>
 export default {
    data() {
      return{
        code: '',
        disabled: true,
        codeValue: function(value){
          return {
            valid: value.length === 4,
            msg: "验证码有误!"
          }
        }
      }
    },
    methods: {
      keyDown(){
        if(this.$refs.refcode.valid == true && this.code != ''){
          this.disabled = false;
        }else{
          this.disabled = true;
        }
      }
    }
  }

总结

以上所述是小编给大家介绍的Vue使用vux-ui自定义表单验证遇到的问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js单例模式详解实例
Nov 21 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
Jun 23 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
vue axios整合使用全攻略
May 24 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 Javascript
vuex与组件联合使用的方法
May 10 #Javascript
vue项目中公用footer组件底部位置的适配问题
May 10 #Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 #Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 #Javascript
vue计算属性和监听器实例解析
May 10 #Javascript
js正则相关知识点专题
May 10 #Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 #Javascript
You might like
如何在PHP中使用Oracle数据库(4)
2006/10/09 PHP
一个连接两个不同MYSQL数据库的PHP程序
2006/10/09 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
jquery 笔记 事件
2011/11/02 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
基于javascript 闭包基础分享
2013/07/10 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
用Python写一个无界面的2048小游戏
2016/05/24 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python用摘要算法生成token及检验token的示例代码
2020/12/01 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
党在我心中演讲稿
2014/09/02 职场文书
学校查摆问题整改措施
2014/09/28 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
论文答辩开场白大全
2015/05/27 职场文书
小学教育见习总结
2015/06/23 职场文书
高中生综合素质评价范文
2015/08/18 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python