问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

想请教一下，有人碰到过这个问题吗？

头像
夕水
    5.3k21953

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

    demo链接地址

    问题如图所示:

    图片描述

    javascript
    阅读 1.9k
    3 个回答
    得票最新
    头像
    SmithXiong
      1262
      ✓ 已被采纳

      你在写校验的时候清空了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>
      头像
      易函123
        1.2k2622
        if (!regx.test(value)) {
                        console.log('验证电话号码')
                        e.target.value = '';
                        return;
                    }

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

        头像
        夕水
          5.3k21953

          另附上另一种解法:

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