FORM表单 validity setCustomValidity和checkValidity使用

最新推荐文章于 2025-03-09 11:24:40 发布

原创最新推荐文章于 2025-03-09 11:24:40 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个包含生日输入、邮箱地址输入以及表单提交按钮的HTML表单实现，详细阐述了如何通过JavaScript进行邮箱地址的有效性验证，并利用oninvalid属性与表单输入错误反馈相结合的方法。

<!DOCTYPE HTML>
<html>
<body>

<form action="add">
生日：<input id="birth" name="birth" type="date"/><br/>
邮件地址：<input id="email" name="email" type="email"/><br/>
<input type="submit" value="提交" onclick="return check();"/>
</form>

<script>
function check(e){

var targetEle = document.getElementById("email");
targetEle.oninvalid = function(e){
alert("sd" + JSON.stringify(e.target.validity.valid));
};
//alert(targetEle.checkValidity());
if(!targetEle.checkValidity()){
targetEle.setCustomValidity("mail is not correct");
}
//alert(JSON.stringify(targetEle.validity));

}

</script>

</body>
</html>