关于html5的表单验证(1)

最新推荐文章于 2024-09-19 14:52:06 发布

IT-小崔

最新推荐文章于 2024-09-19 14:52:06 发布

阅读量679

点赞数

分类专栏： HTML 文章标签：表单 html5 正则表达式标签表单验证提示信息修改

本文链接：https://blog.csdn.net/sfcuiyi/article/details/17587243

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近正在研究html5的有关内容，对于html5的强大之处略有窥探，写这篇博客只为记录下一些自己遇到的问题的解决方案，翻遍今后查阅：

1、关于required='required'

在input 标签中加入required='required'，当表单提交后，如果内容为空，页面会拒绝提交表单，并且给出空的提示：

当我们在编写html代码的时候就不用手动的写js验证空的问题了

2、关于pattern=""

在input 标签中加入pattern="" 可以通过正则表达式控制输入值的格式，同样也减轻了我们js代码含量，当不符合要求的时候，页面会拒绝提交表单，并且给出提示：

3、提示内容的修改：

不论是做： required='required' 还是 pattern="" ，网页内置的提示信息并不能满足我们的需求，如果提示的信息能够修改，那该有多好呢？

代码如下：

<script type="text/javascript">
	$(function(){
		var nameInput = document.getElementById("name")
		nameInput.setCustomValidity("用户名不能为空");
	});
</script>
</head>
<body>

	<form id="sign-in" method="post" >
		<input id="name" type="text" name="username" required="required" pattern="" /> 
		<br/><br/><br/><br/>
		<input type="submit" value="登录" />
	</form>

</body>