爲什麼輸入checkValidity的空間是真的？

Question

<input type="text" required> 

$('input').blur(function() { 
    console.log($('input')[0].checkValidity()); 
}); 

當我輸入一個空格時，控制檯給出一個true。這是很迷惑......

Answer 1

Attibute required只檢查如果輸入中有任何字符（也是空格）。

如果你想檢查空白，你可以使用pattern。

<input type="text" pattern="\S+" required> 

Answer 2

可以使用HTML5模式

我給你舉個例子，但你可以把你想要什麼

$('input').blur(function() { 
 
    console.log($('input')[0].checkValidity()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- this pattern don't allow to put a space in th input--> 
 
<input type="text" pattern="^((?!\s).)*$" required>