FORM表单 validity setCustomValidity和checkValidity使用

最新推荐文章于 2025-06-24 22:08:43 发布

水芹

最新推荐文章于 2025-06-24 22:08:43 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/abc1d/article/details/51104685

javascript 专栏收录该内容

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>