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

发布于 2022-09-05 23:11:29 字数 484 浏览 18 评论 0

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。

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

水溶 2022-09-12 23:11:29

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

热情消退 2022-09-12 23:11:29

是不是少引入依赖了

﹎☆浅夏丿初晴 2022-09-12 23:11:29

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;
        }
      }
    }
  }
嘦怹 2022-09-12 23:11:29
bePhone(value){
          return {
            valid: (/1[34578]\d{9}/).test(value)===true,
            msg: '请填写正确的手机号'
          }
        }

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文