HTML5学习之表单
2017-04-30 00:04
253 查看
楼主现在大三考研狗一枚,现在考研和学技术一起抓,写点东西记录自己的成长,各位看官多多海涵。
书上的内容贴出:
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。
经过测试后发现:也是有好多功能FireFox还没有实现兼容,使用360浏览器感觉大部分还是实现了支持的。
时间太晚了,后续详细内容以后再来补充。
书上的内容贴出:
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.onload=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="运行" onclick="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" onchange="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="提交" onclick="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浏览器感觉大部分还是实现了支持的。
时间太晚了,后续详细内容以后再来补充。
相关文章推荐
- html5学习(表单新属性)
- HTML5学习(6) 表单元素
- Html5学习之表单提交
- HTML5学习总结-05 HTML5表单
- 学习HTML5之表单
- HTML5学习第三节 HTML5关于表单的新元素
- HTML5 学习笔记 表单属性
- html5学习渐阶笔记---表单
- HTML5学习之九表单与PHP交互
- Html5 学习系列(三)增强型表单标签
- HTML5学习笔记(二)——表单1
- Html5 学习系列(三)增强型表单标签
- HTML学习笔记(五)_HTML5表单相关元素和属性
- HTML5 原质化设计表单简单实例学习
- 第十五节 html5学习——表单元素
- HTML5表单学习笔记
- HTML5 学习笔记5-表单新增元素和属性(续写)
- HTML5学习之智能表单(二)
- html5学习记录05:表单form,输入框
- Web前端学习笔记(3)-html5新增表单元素