vux表单验证

最新推荐文章于 2025-06-23 21:23:30 发布

原创最新推荐文章于 2025-06-23 21:23:30 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

web 同时被 3 个专栏收录

24 篇文章

订阅专栏

VUE

21 篇文章

订阅专栏

vux

1 篇文章

订阅专栏

本文介绍了如何在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绑定的值是否为空就好使了