自己做网站卖东西犯法吗,网站开发过滤器作用,网站游戏网站怎么自己做,WordPress模板移植emlogHTML5对于表单有着极大程度的优化#xff0c;无论是语义#xff0c;小部件#xff0c;还是数据格式的验证。我猜你肯定会以浏览器兼容作为借口不愿意使用这些“新功能”#xff0c;但这绝不应该成为使你停滞不前的原因#xff0c;况且还有像Modernizr和ployfill这样的工具…HTML5对于表单有着极大程度的优化无论是语义小部件还是数据格式的验证。我猜你肯定会以浏览器兼容作为借口不愿意使用这些“新功能”但这绝不应该成为使你停滞不前的原因况且还有像Modernizr和ployfill这样的工具库帮助你在不支持Html5的浏览器上进行回退处理。当你真正试着使用这些表单的新功能时我保证你会爱上它。如果说唯一的缺陷就是提示框的样式是浏览器默认的你无法改变好吧如果你相信浏览器厂商的设计师的审美水平的话(我相信他们的设计水平比绝大部分普通人要好如果不考虑风格兼容的话)抓紧学就对了原生验证input typeHTML5中为数据格式验证提供了很多原生的支持例如当点击提交按钮时如果你输入的格式不符合email则会导致无法提交浏览器会提示你错误信息。比如在chrome下注意1、仅当你提交的时候会触发浏览器的验证2、不同浏览器提示信息的行为样式不一样3、当有多个input不符合要求时只会提示一个错误一般会提示表单中相对较前的Input的不要理所应当的认为当input的type等于tel的时候如果你输入的不是电话号码格式在提交时也会被浏览器的阻挡并提示错误信息type’tel’在PC端只起到语义的作用在移动端可以使产生的键盘为纯数字键盘并不能起到数据验证的作用。pattern你可以使用pattern属性来对浏览器不提供原生验证的数据格式设置自定义格式验证。pattern属性的值是一个正则表达式(字符串)点击提交时如果你输入的数据不符合pattern里面正则的格式那么浏览器会阻止表单提交并提示‘请与所请求的格式保持一致’ title里的内容(小字)。但注意当你的文本框中内容为空的时候浏览器不会对其进行检查会直接提交表单(因为浏览器认为这个框框不是必填项)。如果你想要这个框框必须有内容请加上required属性。通过HTML原生的验证系统基本就能满足我们对表单提交的限定。但HTML5提供了更高级的功能来方便我们开发和提升用户体验。约束验证API默认提示信息像‘请与所请求的格式保持一致’这样的浏览器提示信息字串藏在input DOM对象的validationMessage属性里这个属性在大多数现代的浏览器中是只读的即不可修改比如下面的代码当提交时如果Input内容为空那么浏览器会提示‘请填写此字段’我们可以在控制台把这句话打印出来var input document.getElementById(input)input.validationMessage // 请填写此字段如果想修改其中的内容可以调用setCustomValidity接口改变validationMessage的值input.setCustomValidity(这个字段必须填上哦);// 下面这种做法适用于不支持setCustomValidity的浏览器基本现代浏览器都不支持这样做input.validationMessage 这个字段必须填上哦注意像required这样的HTML原生验证虽然能改变其中信息但无法把信息置为空字串原因下面会讲到。原理HTML表单验证系统通过validationMessage属性检测该文本框的数据是否通过验证如果其值为空字串则表示通过了验证否则表示未通过浏览器会把其值作为错误信息提示给用户。所以在原生验证时用户无法把validationMessage的值设置为空字符串。约束验证API的简单实例约束验证API是在原生方法之上更灵活的表达方式你可以自己设置数据是否通过而不借助于正则表达式。原理很简单通过if判断如果数据格式使你满意那么你就调用setCustomValidity使validationMessage的值为空否则你就调用setCustomValidity传入错误信息input.addEventListener(input, function () {if(this.value.length 3){ // 判断条件完全自定义input.setCustomValidity(格式不正确);}else {input.setCustomValidity()}});每次键盘输入代码都会判断格式是否正确然后调用setCustomValidity设置validationMessage的值。不要妄想每按下键浏览器都会提示你结果是否正确浏览器只有在点击提交按钮的时候才会提示validationMessage里的值(如果有的话)。如果你还没有走思的话一定会问既然这样为什么要为input绑定键盘事件每输入一下都要进行判断呢直接为表单绑定提交事件在提交时再判断多好别急这么做是有好处的。随着输入判断格式与样式作为用户我们当然想在得知我输入了错误的格式之后文本框变红(或者有别的提示)。而在我每次输入一个字符如果对了文本框就恢复正常。我们可以使用CSS伪类来实现这个功能input:required {background-color: #FFE14D;}/*这个伪类通过validationMessage属性进行判断*/input:invalid {border: 2px solid red;}上面的required伪类会给所以必填但值空的input提供一个黄色的背景色而下面的invalid伪类则会为所有未通过验证的input添加一个2px的红边边。我们现在给我们的Input框加上input类即可。这些伪类的判断条件正与浏览器判断你能否提交表单的条件一样看validationMessage里的值所以我们上面设置每次键盘输入事件都会触发一次判断从而改变CSS伪类样式的渲染用意正在于此。更好的用户体验还有一个缺点就是当一个input设置为required的时候在初始化时因为其本身是空的所以invalid伪类会对它起作用这不是我们想看到的因为我们什么还都没有干。我们可以并在这些伪类前加上父选择器.invalid这样只有在父元素具有invalid类时这些伪类才会起作用。可以设置一个submit事件在表单提交因验证失败后会触发input的invalid事件给form添加invalid类form.addEventListener(invalid function() {this.className invalid} true)因为invaild是Input的事件而不是form的事件所以这里我们设置第三个参数为true采用事件捕获的方式处理之。这样就大功告成了。最终实例好了现在是时候总结一下我们所学的知识并创造最佳实践了forminput:required{background-color: #DCD4CE;}.invalid input:invalid{border: 2px solid red;}email:IDCard:var email document.getElementById(email);var IDCard document.getElementById(IDCard);var form document.getElementById(form);IDCard.addEventListener(input, function () {if(this.value.length ! 6) {this.setCustomValidity(IDCard的长度必须为6)}else{this.setCustomValidity()}});form.addEventListener(invalid, function () {this.className invalid;}, true)运行后截图如下以上就是HTML5利用约束验证API来检查表单的输入数据的代码实例 的内容更多相关内容请关注PHP中文网(www.php.cn)声明本文原创发布php中文网转载请注明出处感谢您的尊重如有疑问请联系adminphp.cn处理
