HTML5 has also made some improvements to the form, adding some new data verification functions and adding some new tag attributes. With these validation functions, you can perform validation without JavaScript. Even if JavaScript is disabled, you can validate the form without any pressure. Developers don't use JavaScript; the browser performs validation based on the rules in the markup and displays the appropriate error message. These user-friendly features are only effective in browsers that support HTML5. Supported browsers include Opera 10+, Safari 5+, Chrome and Firefox 4+.
The newly added form functions of HTML5 include: other input types, input modes, value ranges, required fields, disabling validation and detecting validity. Below we will introduce these functions in detail.
Speaking of input types, everyone will quickly think of the input tag. Only input tags can specify different types. HTML5 just adds some new attribute values to the type attribute in the input. These new attribute values can not only reflect data type information, but also provide some default validation functions. Among them, "email" and "url" are the two most supported types, and each browser has also added customized verification mechanisms for them. The newly added types are as follows
email: The email text box is no different from the ordinary one. When the input is not an email, the verification fails. The mobile keyboard will change
tel : Phone number
url: URL of the webpage
search : search engine. After entering text under chrome, there will be an additional closed X
range: Value selector within a specific range, min, max, step (number of steps)
number: Input box that can only contain numbers
color : Color selector
datetime: Display the complete date
datetime-local : Display the complete date without time zone
time : Display time without time zone
date : Display date
week : Display week
month : Display month
Small example HTML code
<form action="http://www.baidu.com"> <input type="email" /> <input type="tel" /> <input type="url" /> <input type="search"/> <input type="range" min="0" max="10" step="2" /> <input type="number"/> <input type="color"/> <input type="date"/> <input type="datetime"/> <input type="datetime-local"/> <input type="time"/> <input type="month"/> <input type="week"/> <!-- placeholder是让密码输入框拥有默认提示 --> <input type="password" placeholder="请输入密码"/> <input type="submit"/> </form>
HTML5 not only adds some new input types, but also adds new Attribute - pattern attribute. The value of the Patten attribute is a regular expression that is used to match the value in the text box. When writing regular expressions, be careful not to add ^ and $ symbols at the beginning and end (assuming they already exist). These two symbols indicate that the entered value must match the pattern from beginning to end. A small example is as follows
HTML code
<form action="#"> <input type="text" name="user" pattern="\d{1,9}"/> <!-- 点击之后 会本页面提交--> <input type="submit"/> </form>
Chrome preview effect
HTML code
<input type="range" min="0" max="10" step="2" id="range" />
JavaScript code
var oInput=document.getElementById("range"); oInput.stepUp() //每次加1 oInput.stepUp(5) //每次加5 oInput.stepDown() //每次减1 oInput.stepDown(10) //每次减10
HTML code
<input type="text" id="text" required/>
JavaScript code
//检验是否支持必填属性 //支持的为true ,不支持的为false var is = "required" in document.createElement("input");
HTML code
在JavaScript中使用checkValidity()方法可以检测表单中的某个字段是否有效。所有表单字段都有这个方法,如果字段的值是有效的,这份方法会返回true,否则则是false。与checkValidity()方法相比,validity属性可以告诉你很多东西。
valueMissing : 输入值为空时
typeMismatch : 控件值与预期类型不匹配
patternMismatch : 输入值不满足pattern正则
tooLong : 超过maxLength最大限制
rangeUnderflow : 验证的range最小值
rangeOverflow:验证的range最大值
stepMismatch: 验证range 的当前值 是否符合min、max及step的规则
customError: 不符合自定义验证,是否设置setCustomValidity(); 自定义验证
placeholder : 输入框提示信息
autocomplete : 是否保存用户输入值。默认为on,关闭提示选择off
autofocus : 指定表单获取输入焦点
list和datalist : 为输入框构造一个选择列表。list值为datalist标签的id
Formaction : 在submit里定义提交地址
小例子JavaScript代码
if(input.validity && !input.validity.valid){ if(input.validity.valueMissing){ alert("不能为空") }else if(input.validity.typeMismatch){ alert("控件值与预期类型不匹配"); } }
HTML5 practice and analysis of forms就为大家介绍到这里,有了表单自行验证,JavaScript的工序又会变得少之又少,对开发人员来说真是件没事儿。更多相关内容请关注PHP中文网(www.php.cn)!