Vue使用vux-ui自定义表单验证遇到的问题及解决方法
更新时间：2018年05月10日 10:55:29 作者：Lucia_Huang
这篇文章主要介绍了Vue使用vux-ui自定义表单验证遇到的问题及解决方法,需要的朋友可以参考下
初学框架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使用canvas实现签名组件，兼容PC移动端，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
Pinia是一个Vue.js状态管理库，如果你在组件中修改了store中的数据并刷新了界面，Pinia会将store中的数据重置为初始值，从而导致数据丢失的问题，本文就来介绍一下问题解决，感兴趣的可以了解一下2023-12-12
这篇文章主要介绍了vue中的keep-alive实例代码，vue实现组件信息缓存的方法，在文中也给大家提到,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了Vuex 使用及简单实例(计数器)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了利用Electron简单撸一个Markdown编辑器的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-06-06
这篇文章主要介绍了vue 双向数据绑定的实现学习之监听器的实现方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-11-11
这篇文章主要为大家介绍了极度舒适的Vue弹窗Dialog最佳使用方案实战,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
在vue框架下使用指令vue add element安装element报错问题
这篇文章主要介绍了在vue框架下使用指令vue add element安装element报错问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
webpack提供的反向代理服务器在开发阶段非常方便，几行简单的代码配置就可以使用反向代理功能，包括路径重写、cookie处理等。这篇文章主要介绍了vue webpack重写cookie路径,需要的朋友可以参考下2019-07-07
这篇文章主要介绍了在Vue3中如何为路由Query参数标注类型,我们就针对这个话题如何为路由Query参数标注类型为例,看看Composable和IOC容器的代码风格究竟有什么不同,需要的朋友可以参考下2024-08-08
最新评论