vux表单验证

本文介绍了如何在vux中获取表单验证的返回值,特别是使用isType内置验证器进行手机号校验的方法。强调了x-input组件添加ref、required属性以及设置:should-toast-error的必要性。此外,还探讨了vux-ui自定义表单验证,建议利用@on-change事件和ref进行操作,并提到在提交时检查v-model值来实现非空验证。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vux 获取表单验证校验的返回值

  • isType
  • 自定义的方式

isType

vux使用x-input情形如下:

表单中需要填写手机号,填完手机号之后,进行提交。点击“提交”按钮的时候,需要判断手机号是否通过校验,vux提供了is-type内置验证器,我们省去了自己校验手机号的过程。

      <x-input required title="手机号码" v-model="phone" placeholder="请输入您的手机号码" is-type="china-mobile" ref="refPhone">
        <img slot="label" style="padding-right:10px;display:block;" src="/static/phoneGray.png" width="24" height="24">
      </x-input>
methods: {
    confirm() {
        console.log('result:' + this.$refs.refPhone.valid) // valid为true/false
    }
}

有3点需要注意,

1. x-input控件上加了 ref ,加了ref才能使用this.$refs.mobile.valid

2. x-input控件上加required将其变成必填项

3.required === required="true" ,没有则默认为false;; 类似的,:should-toast-error="false" 一定不要忘记前面的:号,这个属性需要手动改为false,因为官方文档给出的默认为true

vux-ui自定义表单验证

<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;
        }
      }
    }
  }

注意:使用x-input组件的@on-change事件,及使用 ref

 

补充:

Q:Vux内置的一些验证信息是及时的动态匹配错误提示。它只是有提示性信息,如果需求是点击下一步按钮进行提交的时候判断非空验证

A:那你点击提交时判断v-model绑定的值是否为空就好使了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值