如何使用 vanilla javascript 自動更新？

Question

例如，考慮單個輸入標簽。 如果我不集中注意力，我想得到這個錯誤

email: abcd         - ERROR: Please enter a valid email address

我是如何嘗試做到這一點的

html 文件：

<body>


   <form id="form1">



      <label for="email">Email</label>
      <input type="email" name="email" id="email" /> <br />


   </form>

   <script>
       validator().validateForm1("#form1")
      
   </script>

</body>

.js 文件：

function validator() {

    const self = {}

    

    self.validateForm1 = function (form) {
        elem = document.querySelector(form)
        
    }

如您所見，我正在嘗試以這種方式運行 function，然后所有錯誤都將開始顯示。 目前，我不知道如何在我失焦后實時顯示錯誤

Answer 1

這是你想要的：

 document.querySelector('input').addEventListener('blur', e => { console.log(e.target.value); });

 <body> <form id="form1"> <label for="email">Email</label> <input type="email" name="email" id="email" /> <br /> </form> </body>

Answer 2

您可以使用keyup 事件或blur 事件。

 <body> <form id="form1"> <label for="email">Email</label> <input type="email" name="email" id="email" /> <br /> <label for="password">Password</label> <input type="password" name="password" id="password" /> <br /> </form> <script> function validator() { const self = {}; self.validateForm1 = function () { const email = document.getElementById("email"); email.addEventListener("keyup", function(event){ console.log(`this function trigger after add one char. (${this.value})`); }); email.addEventListener("blur", function(event){ console.log(`this function trigger after leave the input. (${this.value})`); }); }; return self; } validator().validateForm1(); </script> </body>

如何使用 vanilla javascript 自動更新？

問題描述

2 個解決方案

解決方案1
0 已采納 2020-07-23 08:17:09

解決方案2
0 2020-07-23 08:37:56

如何使用 vanilla javascript 自動更新？

問題描述

2 個解決方案

解決方案1 0 已采納 2020-07-23 08:17:09

解決方案2 0 2020-07-23 08:37:56

解決方案1
0 已采納 2020-07-23 08:17:09

解決方案2
0 2020-07-23 08:37:56