想请教一下,有人碰到过这个问题吗?

当我注册了两个自定义指令,v-model绑定两个不同的字段,绑定还会相互影响数据的变动吗?反复看了文档,也搜索了很久,没有找到有人碰到过类似问题的。还是我自己的用法有问题?

demo链接地址

问题如图所示:

图片描述

阅读 254
评论
    3 个回答

    你在写校验的时候清空了dom里的值,但是vue实例data里的值没有变,也就是v-model绑定的值是没变的,如果需要修改data里的值可以参考如下代码,通过指令传参的方法去修改data值

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    
    <body>
        <div id="app">
            <div>
                <label>姓名:</label>
                <input type="text" v-model="user.name">
            </div>
            <div>
                <label>邮箱:</label>
                <input type="text" v-email="{setEmail:setEmail}" v-model="user.email">
            </div>
            <div>
                <label>电话:</label>
                <input type="text" v-phone="{setPhone:setPhone}" v-model="user.phone">
            </div>
        </div>
        <script>
            Vue.directive('phone', {
                bind(el,binding) {
                    el.onblur = function (e) {
                        let value = e.target.value;
                        // 包含移动和座机号码
                        let regx = /(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}/;
                        if (!regx.test(value)) {
                            console.log('验证电话号码')
                            e.target.value = '';
                            binding.value.setPhone('');
                            return;
                        }
                    }
                }
            })
            Vue.directive('email', {
                bind(el,binding) {
                    el.onblur = function (e) {
                        let value = e.target.value;
                        // 邮箱验证正则
                        let regx = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
                        if (!regx.test(value)) {
                            console.log('验证邮箱')
                            e.target.value = '';
                            binding.value.setEmail('');
                            return;
                        }
                    }
                }
            })
            var vm = new Vue({
                el: "#app",
                data: {
                    user: {
                        
                    }
                },
                methods:{
                  setEmail(value){
                    this.user.email = value;
                  },
                  setPhone(value){
                    this.user.phone = value;
                  }
                },
            });
    
        </script>
    </body>
    
    </html>
      if (!regx.test(value)) {
                              console.log('验证电话号码')
                              e.target.value = '';
                              return;
                          }

      这里正则判断不正确让e.target.value = '';为空

        • 2.8k

        另附上另一种解法:

        Vue.directive('phone', {
                    bind(el,binding,vnode) {
                        let _this = vnode.context;
                        el.onblur = function (e) {
                            let value = e.target.value;
                            // 包含移动和座机号码
                            let regx = /(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}/;
                            if (!regx.test(value)) {
                                _this.user.phone = e.target.value = '';
                                return;
                            }
                        }
                    }
                })
                Vue.directive('email', {
                    bind(el,binding,vnode) {
                        let _this = vnode.context;
                        el.onblur = function (e) {
                            let value = e.target.value;
                            // 邮箱验证正则
                            let regx = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
                            if (!regx.test(value)) {
                                _this.user.email = e.target.value = '';
                                return;
                            }
                        }
                    }
                })
          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章