vux里面xinput表单内容检测问题

Question

vux里面的xinput表单检测有个 is-type ，官方给的说明是可以引用定义的函数，不明白怎么用。

官方给的例子是

<group title="is-type传入function">
<x-input title="必须输入2333" :is-type="be2333" placeholder="I'm placeholder"></x-input>
</group>

函数如下
be2333: function (value) {

    return {
      valid: value === '2333',
      msg: 'Must be 2333'
    }
  },

这个怎么用啊，表单里面输入错误的内容， msg的错误提示都没有显示的，表单就出现一个红色的icon。

有朋友可以给个实例么？比如 用正则检测 手机号码， 感谢

Answer 1

bePhone(value){
          return {
            valid: (/1[34578]\d{9}/).test(value)===true,
            msg: '请填写正确的手机号'
          }
        }

官网例子没问题吧...点一下那个红点然后提示就会出来.
上面是用正则检测 手机号码 的例子.

Answer 2

在x-input上写上ref="xxx",然后在函数里提交的时候使用this.$ref.xxx.valid是否为真判断，自定义的函数写在:

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

Answer 3

是不是少引入依赖了

Answer 4

我也是遇到同样的问题，这个验证函数是进去了，但是 点击红色错误图标不如demo那样，total提示不出来。。找到解决办法了吗楼主