如何在輸入更改後才能驗證輸入？

也許這是一個相當虛擬的問題，但我找不到一個簡單的解決方案（如特殊的HTML5屬性）。如何在輸入更改後才能驗證輸入？

比如我有一個簡單的形式啓用驗證爲email領域：

<form> 
    <input required type="email" placeholder="[email protected]"></input> 
</form>

而且有些款式供:valid, :invalid僞類：

input:valid { 
    border: 1px solid green; 
} 
input:invalid { 
    border: 1px solid red; 
}

所以，當我打開一個頁面，此形式，輸入已經是紅色的邊界，因爲它是空的。問題是 - 只有在用戶更改了smth後，我如何才能啓用驗證？

來源

2017-02-16 Sergey Potekhin

我不知道爲什麼每個人都錯過了這一點，但它是*佔位符 – zfrisch

您可以使用onchange event，請參閱：

<!-- added a ID to get it easier later --> 
<input required id="myInput" type="email" placehodler="[email protected]"></input>

在你的CSS，使用類來設置你的風格：

input.valid { 
    border: 1px solid green; 
} 
input.invalid { 
    border: 1px solid red; 
}

在你的JavaScript：

document.getElementById('myInput').onchange = function(){ 
    // validation code here 

    this.classList.add('valid') // if validation is true 
    this.classList.add('invalid') // if validation is false 
}

來源

2017-02-16 23:11:15

輸入值會用用戶按下的每個按鍵動態檢查。你可以自己調整需求。

var input = document.getElementById('input'); 
 

 
function validate(){ 
 
    if (input.value.length > 2) { 
 
    input.className = 'valid'; 
 
    } else { 
 
    input.className = 'invalid'; 
 
    } 
 
}

.valid { 
 
    border: 1px solid green; 
 
} 
 
.invalid { 
 
    border: 1px solid red; 
 
}

<form> 
 
    <input required type="email" placehodler="[email protected]" id='input' onkeyup='validate()'> 
 
</form>

來源

2017-02-16 23:14:54

你有一個敞開的一套方法來實現這一目標。我會去找最簡單的：blur || input。

您可以附加input或blur事件並在事件發生時進行驗證。不同之處在於blur在用戶關注另一個元素（點擊提交按鈕，轉到另一個輸入，在頁面中的其他地方點擊，無論如何）時將被調用，並且input在用戶改變輸入內容後調用，通常通過按鍵，但也會在用戶粘貼或剪切時發生。 input是監聽輸入元素的「官方」html5方式。

document.getElementById('emailInput').oninput = function(){ 
    // validateinput 
}

此外，您還可以去change事件，這是完全一樣blur但它觸發只有當用戶更改內容。「不好」的事情與blur相同：寫作時無現場驗證。

來源

2017-02-16 23:15:52

您可以使用querySelector來區分有效和無效，而不是css。您應該使用keyup或而不是change事件，因爲更改要求您重新進行驗證。

myform.querySelector('input').addEventListener('keyup', function() { 
    if (myform.querySelector('input:invalid')) myform.querySelector('input:invalid').style.border = "1px red solid"; 
    else myform.querySelector('input:valid').style.border = "1px solid green"; 
});

HTML

<form id="myform"> 
    <input required type="email" placeholder="[email protected]"></input> 
</form>

來源

2017-02-16 23:19:26 zfrisch

如何在輸入更改後才能驗證輸入？

回答

相關問題