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 相关文章推荐
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 Javascript
jquery动态分页效果堪比时光网
Sep 25 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
详解Next.js页面渲染的优化方案
Jan 27 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 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 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
js 调用百度分享功能
2017/02/27 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
python万年历实现代码 含运行结果
2017/05/20 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
python之PyQt按钮右键菜单功能的实现代码
2019/08/17 Python
基于Django统计博客文章阅读量
2019/10/29 Python
Python字节单位转换实例
2019/12/05 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
keras实现theano和tensorflow训练的模型相互转换
2020/06/19 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
舞蹈教师自荐信
2014/01/27 职场文书
会走路的树教学反思
2014/02/20 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers