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

夕水
  • 2.9k

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

demo链接地址

问题如图所示:

图片描述

回复
阅读 343
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 = '';为空

另附上另一种解法:

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;
                    }
                }
            }
        })
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏