HTML5学习之表单

最新推荐文章于 2024-06-21 10:30:00 发布

D灿

最新推荐文章于 2024-06-21 10:30:00 发布

阅读量1.3k

点赞数

分类专栏： HTML网页编程 Web前端技术文章标签： html5 网页前台

本文链接：https://blog.csdn.net/zuosixiaonengshou/article/details/70991612

版权

Web前端技术同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

HTML网页编程

11 篇文章 0 订阅

订阅专栏

楼主现在大三考研狗一枚，现在考研和学技术一起抓，写点东西记录自己的成长，各位看官多多海涵。

书上的内容贴出：

ValidityState对象

ValidityState对象是通过validity 属性获取的，该对象有8个属性，分别针对8个方面的错误验证，属性值均为布尔值。

1．valueMissing属性

必填的表单元素的值为空。

如果表单元素设置了required特性，则为必填项。如果必填项的值为空，就无法通过表单验证，valueMissing属性会返回true，否则返回false。

2．typeMismatch属性

输入值与type类型不匹配。

HTML 5新增的表单类型如email、number、url等，都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false。

3．patternMismatch属性

输入值与pattern特性的正则不匹配。

表单元素可通过pattern特性设置正则表达式的验证模式。如果输入的内容不符合验证模式的规则，则patternMismatch属性将返回true，否则返回false。

4．tooLong属性

输入的内容超过了表单元素的maxLength 特性限定的字符长度。

表单元素可使用maxLength特性设置输入内容的最大长度。虽然在输入的时候会限制表单内容的长度，但在某种情况下，如通过程序设置，还是会超出最大长度限制。如果输入的内容超过了最大长度限制，则tooLong属性返回true，否则返回false。

5．rangeUnderflow属性

输入的值小于min特性的值。

一般用于填写数值的表单元素，都可能会使用min特性设置数值范围的最小值。如果输入的数值小于最小值，则rangeUnderflow属性返回true，否则返回false。

6．rangeOverflow属性

输入的值大于max特性的值。

一般用于填写数值的表单元素，也可能会使用max特性设置数值范围的最大值。如果输入的数值大于最大值，则rangeOverflow属性返回true，否则返回false。

7．stepMismatch属性

输入的值不符合step特性所推算出的规则。

用于填写数值的表单元素，可能需要同时设置min、max和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和。如范围从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false。

8．customError属性

使用自定义的验证错误提示信息。

有时候，不太适合使用浏览器内置的验证错误提示信息，需要自己定义。当输入值不符合语义规则时，会提示自定义的错误提示信息。

通常使用setCustomValidity()方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Html5表单</title>
		<script type="text/javascript">
			function calculate(){
				var length=document.loandata.length.value;
				var width=document.loandata.width.value;
				var height=document.loandata.height.value;
				//var area=document.getElementById("area");
				//var volume=document.getElementById("volume");
				
				area.innerHTML=length*width;
				volume.innerHTML=length*width*height;
			}
			function checkForm(frm){
				if(frm.myEmail.checkValidity()){/* 显式验证邮件*/
					//alert("邮件格式正确!");
					//return true;
				}else{
					//alert("邮件格式错误! ");
					//return false;
				}
				var name=frm.name3;
				if(name.value==""){
					//name.setCustomValidity("请填写您的姓名! ");//自定义错误提示
				}else{
					//name.setCustomValidity("");//取消自定义错误提示
				}
			}
			function invalidHandler(evt){
				//获取当前被验证的对象   FireFox暂不兼容
				var validity=evt.srcElement.validity ;
				//检测ValidityState对象的valueMissing属性
				if(validity.valueMissing){
					alert("姓名是必填项，不能为空");
				}
				//如果不希望浏览器默认的错误提示方式，可以使用下面的方式取消
				evt.preventDefault();
				//阻止事件冒泡
				evt.stopPropagation();
			}
			window.οnlοad=function(){
				var name=document.getElementById("name3");
				//注册监听invalid事件
				name.addEventListener("invalid",invalidHandler,false);
			}
		</script>
	</head>
	<body>
		<form action="helloWord.html" name="loandata" id="form1" method="post">
			<table>
				<tr><th>输入长宽高的数值：</th></tr>
				<tr>
					<td>1) 矩形的长度是：</td>
					<td><input type="text" name="length" placeholder="请输入长度"></td>
				</tr>
				<tr>
					<td>2) 矩形的宽度是：</td>
					<td><input type="text" name="width" autofocus="autofocus"></td>
				</tr>
				<tr>
					<td>3) 矩形的高度是：</td>
					<td><input type="text" name="height" autocomplete="on"></td>
				</tr>
				<tr>
					<td colspan="2"><input type="button" value="运行" οnclick="calculate()"></td>
				</tr>
				<tr>
					<td><b>矩形的面积和体积分别是：</b></td>
				</tr>
				<tr>
					<td>矩形的面积是：</td>
					<td><span class="result" id="area"></span></td>
				</tr>
				<tr>
					<td>矩形的体积是：</td>
					<td><span class="result" id="volume"></span></td>
				</tr>
			</table>
			<input type="radio" value="男" name="sex" checked="checked">男
			<input type="radio" value="女" name="sex">女<br/>
			<input type="url" name="webUrl" id="webUrl" value="http://www.baidu.com"><br/>
			<input type="email" name="myEmail"  value="862482770@qq.com" list="emaillist"><br/>
			<datalist id="emaillist">
				<option>test1@test.com</option>
				<option>test2@test.com</option>
			</datalist>
			<input type="range" name="volume" id="volume" min="0" max="150" step="10" value="20" οnchange="x.value=this.value">
			<output name="x">20</output>   <br/>
			<input type="number" name="score" id="score" min="0" max="150" step="10"><br/>
			<input type="tel" ><br/>
			<input type="search" ><br/>
			<input type="color" ><br/>
			<input type="date" ><br/>
			<input type="month" ><input type="week"><input type="time"><input type="datetime"><input type="datetime-local"><br/>
			<input type="submit" value="提交到Page1" formaction="htmls/1.html">
			<input type="submit" value="提交到Page2" formaction="?page=2">
			<input type="submit" value="提交到Page3" formaction="?page=3">
			<input type="submit" value="提交" οnclick="return checkForm(this.form)"><br/>
			<input type="text" name="name2"><br/>
			Encryption:
			<keygen name="security" ><!-- 加入秘钥安全 -->
			<input name="code" type="text" value="" pattern="[0-9]{6}" placeholder="6位邮政编码">
			<input type="text" id="name3" name="name3" placeholder="First and Last Name" required><br/>
		</form>
		<input name="name1" type="text" form="form1" required>
	</body>
</html>

经过测试后发现：也是有好多功能FireFox还没有实现兼容，使用360浏览器感觉大部分还是实现了支持的。

时间太晚了，后续详细内容以后再来补充。

D灿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5学习之表单

楼主现在大三考研狗一枚，现在考研和学技术一起抓，写点东西记录自己的成长，各位看官多多海涵。书上的内容贴出：ValidityState对象ValidityState对象是通过validity 属性获取的，该对象有8个属性，分别针对8个方面的错误验证，属性值均为布尔值。1．valueMissing属性必填的表单元素的值为空。如果表单元素设置了required特性，则
复制链接

扫一扫

专栏目录