表单自定义验证setCustomValidity

最新推荐文章于 2024-07-09 17:01:34 发布

输出是最好的学习

最新推荐文章于 2024-07-09 17:01:34 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： setCustomValidity html5 表单

本文为博主原创文章，转载请注明出处。

本文链接：https://blog.youkuaiyun.com/m0_37568521/article/details/75043187

前端专栏收录该内容

72 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的自定义表单验证方法，该方法允许开发者为表单输入字段设置特定的验证规则。当输入不符合规则时，会在提交时显示错误提示。

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

对于默认的表单验证，有时候不是很友好，所以我们可以使用自定义表单验证，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form action="#">
		<input type="text" class="name" placeholder="username"  oninput="validateUername(this)">
		<input type="submit">
	</form>
	<script type="text/javascript">
		function validateUername(input){
			if(input.value.length < 3){
				input.setCustomValidity("用户名长度不得小于3位");
			}else{
				input.setCustomValidity("");
			}
		}
	</script>
</body>
</html>

在我们点击提交的时候，如果不符合要求，会出现下图所示：