function validate(input, msg){ if($(input).val().trim().length > 0){ msg = ''; } $(input).attr('oninvalid',"this.setCustomValidity('"+msg+"')").trigger('oninvalid'); }
<input id="username" name="username" oninput="validate(this,'用戶名不能為空')" type="text" placeholder="登錄用戶名/郵箱" />
<input id="password" name="password" oninput="validate(this,'密碼不能為空')" type="password" placeholder="密碼" />
$("input").trigger("oninput");
注意：
- 用到了jQuery
- 不需要屬性 required="required"
- 需要在頁面 input 加載完畢之后觸發一次oninput 事件
在點擊form submit 時，如果為空則觸發，如果輸入值則不會觸發，效果如下：
補充（2020-11-26）：
將下面代碼復制到html文件，瀏覽器打開可自行測試
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>登錄頁面</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function validate(input, msg) {
if ($(input).val().trim().length > 0) { msg = ''; } $(input).attr('oninvalid', "this.setCustomValidity('" + msg + "')").trigger('oninvalid'); } </script> </head> <body> <form> <p> <input id="username" name="username" oninput="validate(this,'用戶名不能為空')" type="text" placeholder="登錄用戶名/郵箱" /> </p> <p> <input id="password" name="password" oninput="validate(this,'密碼不能為空')" type="password" placeholder="密碼" /> </p> <p> <button type="submit">提交</button> </p> </form> <script type="text/javascript"> $("input").trigger("oninput"); </script> </body> </html>
