Vue.js 中表单输入验证的观察者不工作

Question

我的页面正在显示他可以编辑的用户数据。我正在处理一个小项目的视图。我想用正则表达式进行表单验证，但没有任何反应。例如，当我写一封不遵守正则表达式语法的电子邮件时，不会显示任何消息。当正则表达式有效时，验证消息也不会出现。

export default {
  name: "profile",
  data() {
    return {
      user: {},
      firstname: "",
      lastname: "",
      email: "",
      msg: [],
    };
  },
  watch: {
    email() {
      this.validateEmail(this.email);
    },
  },

  methods: {
    getProfilUser() {
      UsersDataService.getUser()
        .then((response) => {
          let token = localStorage.getItem("token");
          let decoded = VueJwtDecode.decode(token);
          this.user = decoded;
          console.log(response);
        })
        .catch((error) => {
          console.log(error, "error from decoding token");
        });
    },
    validateEmail(email) {
      if (/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
        this.msg["email"] = "Email valid";
      } else {
        this.msg["email"] = "Adress no valid";
      }
    },
   
   
  },

  mounted() {
    this.getProfilUser();
    this.email;
  },
};
</script>

   <form class="background-style">
                      <div class="form-group">
                        <label class="form-label">Prénom</label>
                        <input
                          id="firstname"
                          type="text"
                          class="form-control"
                          v-model="user.firstname"
                        />
                      </div>
                      <div class="form-group">
                        <label class="form-label">Nom</label>
                        <input
                          id="lastname"
                          type="text"
                          class="form-control"
                          v-model="user.lastname"
                        />
                      </div>

                      <div class="form-group">
                        <label for="email" class="form-label">Email</label>

                        <input
                          id="email"
                          type="email"
                          class="form-control"
                          v-model="user.email"
                        />
                        <span v-if="msg.email">{{ msg.email }}</span>
                      </div>

                      <div class="btn rounded p-1">
                      

                        <button
                          type="button"
                          class="rounded p-2"
                          @click.prevent="updateProfil"
                        >
                         register
                        </button>
                      </div>
                    </form>

Answer 1

您忘记了双向绑定。

首先，您应该像这样将 v-model 传递给您的输入。不传value，v-model会帮你搞定

<input
  v-model="email"
  type="email"
  class="form-control"
/>

其次，不要在 watcher 中改变电子邮件 - 你会进入循环。只需调用 validateEmail 方法。

watch: {
  email() {
    this.validateEmail(this.email);
  },
},

那应该可以了。

Answer 2

有两个邮箱属性邮箱和 user.email.You 只看邮箱。但在 v-modal 中绑定 user.email。所以观察者不会打电话。你可以 console.log 在观察者中检查

解决方案：

    watch: {
      'user.email'(newVal){
          this.validateEmail(newVal);
       }
   }

另一件事是不要直接在观察者上使用 'this.email' 或 'this.user.email'。相反，请使用此代码中所示的 newVal。 Vue js 正确地异步更新所有数据，因此不能保证更新值，因此始终使用 newVal。

Vue.js 中表单输入验证的观察者不工作

watchers for form input validation in Vue.js don't work

javascript

vue.js

validation

input

watch