Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018-05-10 10:55
1616 查看
初学框架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.表单内容都填写无误之后,提交表单的按钮才能被触发(如图)
解决方法:使用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自定义表单验证遇到的问题及解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- vue中使用iview自定义验证关键词输入框问题及解决方法
- 表单包含file上传文件提交,使用ajaxSubmint或者ajaxForm 遇到的问题以及解决方法
- ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
- element-ui+vuex共享自定义方法进行表单验证 validator
- 使用vue-router与v-if实现tab切换遇到的问题及解决方法
- 使用debmirror为Debian建立本地源的方法,以及遇到的GPG key验证错误问题的解决方法
- yii 使用cactiveform 创建表单时候遇到的一些验证问题和使用ajax_form时重置验证规则的解决办法
- vue 2.0中使用axios遇到问题的解决方法
- Vue ElementUI之Form表单验证遇到的问题
- 在tp3.2.3中使用 FormData 对象实现表单的文件上传功能遇到的一个问题及解决方法
- 虚拟IP实验,遇到场景启用使用虚拟IP就报错,不启用可以正常运行的问题,解决方法
- ACE与C++/CLI集成使用时遇到的问题及解决方法
- Java使用Oracle遇到的最大游标超出问题及其解决方法
- jQuery UI Autocomplete 使用 ajax 方法传输Json数据出现乱码问题的解决
- FckEditor使用时遇到的两个问题,未能加载xxxx和上传图片无响应的解决方法
- 使用printf修改变量的值 —— VS2008中使用%n输出遇到的问题及解决方法
- J2ME使用WTK模拟器开发时候遇到“OK to use Airtime” 问题的解决方法
- 使用GridView时遇到的一些小问题及解决方法
- Python2.5使用新浪微博Python SDK遇到的问题与解决方法
- Eclipse使用遇到的问题解决方法收集