Vue.js中表單輸入驗證的觀察者不起作用

我的頁面正在顯示用戶資料，他可以對其進行編輯。我正在處理一個小專案的視圖。我想用正則運算式進行表單驗證，但沒有任何反應。例如，當我寫一封不遵守正則運算式語法的電子郵件時，不會顯示任何訊息。當正則運算式有效時，驗證訊息也不會出現。

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>

uj5u.com熱心網友回復：

有兩個email 屬性email 和user.email。你只看email。但在 v-modal 中系結 user.email。所以觀察者不會打電話。你可以 console.log in watchers 來檢查

解決方案：

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

另一件事是不要直接在觀察者上使用“this.email”或“this.user.email”。相反，使用 newVal ，如此代碼所示。Vue js 以異步方式正確更新所有資料，因此不能保證更新值，因此請始終使用 newVal。

uj5u.com熱心網友回復：

您忘記了 2 向系結。

首先，您應該v-model像這樣傳遞給您的輸入。不要通過value，v-model會為你做的。

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

其次，不要在觀察者內部改變電子郵件 - 你會進入回圈。只需呼叫validateEmail方法。

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

那應該可以。

標籤：javascript Vue.js 验证 输入 手表

上一篇：使用具有過濾器視圖的相對路徑時的Google表格資料驗證警告

下一篇：Yup模式中的可選欄位驗證