除了“email”和“URL”，HTML5还定义了另外几个输入元素。这几个元素都要求填写基于数字的值：“number”，“range”，“datetime”，“datetime-local”，“date”，“mouth”，“week”，“time”。目前浏览器对这些类型支持并不好，如果真想使用的话要小心。
对这事数值类型的输入元素可以指定min属性，max属性，step属性。同时这些数值类型元素还有两个方法：stepUp(),stepDown()。都接受一个参数，要在当前基础上加上或减去的数值。
DOM:
<form action=""> <input type="range" required min="10" max="20" step="1"> <input type="button" value="up"> <input type="text"> <input type="submit" value="submit"> </form>
js:
var input = document.getElementById("txtTel4"); var up = document.getElementById("up"); input.addEventListener("mousemove", function () { var output = document.getElementById("output"); output.value = input.value; }); up.addEventListener("click", function () { //点击value值以2为单位增加 input.stepUp(2); var output = document.getElementById("output"); output.value = input.value; });
3、输入模式
HTML5新增了pattern属性，这个属性的值是一个正则表达式，用于匹配文本框中的值。
<input type="text" pattern="\d{3}"> var num = document.getElementById("number"); console.log(num.pattern); //\d{3}
可以使用以下代码来检测浏览器是否支持pattern属性：
var isPatternSupported="pattern" in document.createElement("input");
4、检测有效性
使用checkValidity()方法可以检测表单中的字段是否有效。所有表单的字段都有这个方法，如果检查有效返回true。
<form action=""> <input type="text" pattern="w" required> <input type="number" max="10" required> <input type="button" value="check"> <input type="submit" value="submit" disabled> </form> var form = document.forms[0]; var name = document.getElementById("name"); var number = document.getElementById("num"); var check = document.getElementById("check"); var submit = document.getElementById("submit"); check.addEventListener("click", function () { console.log(form.checkValidity()); //检测整个表单是否正确 if (form.checkValidity()) { submit.removeAttribute("disabled"); check.disabled = true; }else{ alert("请检查表单"); } });
input的validity属性会给出什么字段有效和无效的具体信息。
var inputName = document.getElementById("inputName"); inputName.onblur = function() { if (inputName.checkValidity()) { inputName.style.color = "white"; inputName.style.backgroundColor = "green"; } else { inputName.style.color = "white"; inputName.style.backgroundColor = "red"; if (inputName.validity.patternMismatch) { inputName.value = "请填写正确的格式"; } } }; inputName.addEventListener("mouseenter", function () { inputName.focus(); inputName.select(); });
validity主要包括下列属性：
customError：是否设置了setCustomValidity()；
patternMismatch：是否与pattern属性匹配；
rangeOverflow：是否比max值大；
rangeUnderflow：是否比min值小；
stepMisMatch：步长是否合理；
tooLong：是否超过了maxlength；
typeMismatch：是否不是mail类型和url类型；
valid：如果这里的其他属性都是false，返回true；
valueMissing：如果为required中没有值，返回true。
5、禁用验证
通过设置表单的novalidate属性，可以是表单不进行验证。用js获取form之后，设置它的novalidate属性为true，会禁用表单验证。
在提交按钮上添加formnovalidate属性，会不验证提交表单。用js获取submit按钮之后，设置它的formnovalidata属性为true，会禁用表单验证并提交。
以上就是本文的全部内容，希望对大家的学习有所帮助。
您可能感兴趣的文章: