JavaScript脚本表单验证的属性-北京邮电大学世纪学院.PPTVIP

willValidate属性：该属性获取一个布尔值，表示表单元素是否需要验证。如果表单元素设置了required属性或pattern属性，则willValidate属性的值为true，即表单的验证将会执行。仍然以一个id属性为username的表单元素为例，willValidate属性的使用方法如下： * var willValidate=document.getElementById(username).willValidate; validationMessage属性：该属性获取当前表单元素的错误提示信息。一般设置reuired属性的表单元素，其validationMessage属性值一般为请填写此字段。仍然以一个id属性为username的表单元素为例，validationMessage属性的使用方法如下： * var validationMessage=document.getElementById(username).validationMessage; 4.JavaScript脚本表单验证的事件 HTML5为我们提供了一个表单验证的事件。下面介绍invalid事件。 表单元素为通过验证时触发。无论是提交表单还是直接调用checkValidity方法，只要有表单元素没有通过验证，就会触发invalid事件。invalid事件本身不处理任何事情，我们可以监听该事件，自定义事件处理。 一般情况下，在invalid事件处理完成后，还是会触发浏览器默认的错误提示。必要的时候，可以屏蔽浏览器后续的错误提示，可以使用事件的preventDefault()方法，阻止浏览器的默认行为，并自行处理错误提示信息。 通过使用invalid事件使得表单开发更加灵活。如果需要取消验证，可以使用前面讲过的novalidate属性。 * 5.JavaScript脚本表单验证的方法 HTML5为我们提供了两个用于表单验证的方法： checkValidity()方法：显式验证方法。每个表单元素都可以调用checkValidity()方法（包括form），它返回一个布尔值，表示是否通过验证。默认情况下，表单的验证发生在表单提交时，如果使用checkValidity()方法，可以在需要的任何地方验证表单。一旦表单元素没有通过验证，则会触发invalid事件。 setCustomValidity()方法：自定义错误提示信息的方法。当默认的提示错误满足不了需求时，可以通过该方法自定义错误提示。当通过此方法自定义错误提示信息时，元素的validationMessage属性值会更改为定义的错误提示信息，同时ValidityState对象的customError属性值变成true。下面通过示例了解其使用方法。 * 课外作业6：简单用户注册页面 根据本章讲述的HTML5表单技术，设计一个简单的用户注册界面示例： * 网页设计技术 任课教师：孙丽娜 北京邮电大学-世纪学院-艺术与传媒学院 * 第三部分（40学时）HTML5+CSS3网页开发实战精解 第8节 HTML5表单（4学时） HTML5对表单的发展，是适应互联网发展的需要，也适应开发者的需要。 在实际的表单应用中，一些特殊的数据输入需要一个独立的规则，如邮件、网址等，会为其提供一个特定的格式限定和验证。HTML5将验证表单的功能作为表单本身具有的功能，原生的被支持。 由于HTML5规范还在渐进发展中，各个浏览器的支持程度也不一样，因此在使用HTML5表单时最好提供替代解决方案。 根据HTML5的设计原则，在旧浏览器中，新的表单空间会平滑的降级，不需要判断浏览器的支持情况。 * 8.1、新增表单输入类型 8.2、新增表单属性及元素 8.3、表单验证 8.4、简单用户注册页面 * 8.1新增表单输入类型 新增的表单类型方便进行表单的验证，下面针对input元素的类型进行介绍。 新增input元素的类型： * 类型值 描述 color 定义拾色器。 date 定义日期字段（带有 calendar 控件） datetime 定义日期字段（带有 calendar 和 time 控件） datetime-local 定义日期字段（带有 calendar 和 time 控件） month 定义日期字段的月（带有 calendar 控件） week 定义日期字段的周（带有 calendar 控件） time 定义日期字段的时、分、秒（带有 time 控件） email 定义用于 e-mail 地址的文本字段 number 定义带有 spinner 控件的数字字段 range 定义带有 slider 控件的数字字段。 search 定义用于搜索的文本字段。 tel 定义用于电话号码的文本字段。 url 定义用于 UR