第65节 表单数据校验(验证)-Web前端开发之JavaScript-王唯

第65节 表单数据校验(验证)-Web前端开发之JavaScript-王唯本站　　本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习

　　本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

　　当输入数据时，Web应用会验证输入的数据是否是正确；如果验证通过，应用允许提交这些数据到服务器端并储存到数据库中，如果验证未通过，则应用会提示有错误的数据，并且一般都会明确的提示错误发生在哪里；

　　希望以正确的格式获取到正确的数据：如果用户的数据以不正确的格式存储，或者没有输入正确的信息或都没有输入信息，Web应用程序将无法正常运行；

　　发生在浏览器端，表单数据被提交到服务器之前，这种方式相较于服务器端校验来说，用户体验更好，它能实时的反馈用户的输入校验结果，这种类型的校验可以进一步细分以下方式：

　　HTML5约束校验：也就是HTML5内置的校验，其不需要JavaScript，而且性能更好，但是不如JavaScript校验那样可以自定义，灵活性不够；

　　发生在浏览器提交数据并被服务器端接收之后；通常服务器端校验都是发生在将数据写入数据库之前，如果数据没通过校验，则会直接从服务器端返回错误消息，并且告诉浏览器端发生错误的具体位置和原因；

　　服务器端校验的缺点是，不像客户端校验那样有比较好的用户体验，因为它直到整个表单都提交后才能返回错误信息；

　　服务器端校验是Web应用对抗错误或恶意数据的最后防线，在这之后，数据将被持久化至数据库；如今所有的服务端框架都提供了数据校验与安全功能；

　　在真实的项目开发过程中，几乎同时使用客户端校验与服务器端校验的组合校验方式，以确保数据的正确性与安全性，即两端校验

　　也称为内置表单验证；为了在表单提交到服务器之前验证数据，HTML5为控件新增了一些约束验证的功能，有了这些功能，即使Javascript被禁用或由于种种原因未能加载，也可以确保基本的验证，但低版本的浏览器不支持或部分支持；

　　在表单提交时，如果表单元素未通过约束验证，浏览器将在第一个无效表单元素上显示错误消息，并且可以根据错误类型显示默认消息或自定义设置的消息；

　　如果输入一个空格，可以通过约束，像这种情况我们是不希望看到的，也是必须要避免的，所以此时还是需要Javascript来进行验证，如：

　　type属性：增加了几种类型，这些新类型不仅能反映数据类型的信息，而且还能提供一些默认的验证功能；其中，”email”和”url”是得到支持最多的类型，如：

　　要检测浏览器是否支持这些新类型，可以在Javascript创建一个input元素，然后将type属性设置为”email”或”url”，最后再检测这个属性值，对于不支持它们的浏览器会自动将未知的值设置为“text”，而支持的浏览器则会返回正确的值，如：

　　如果不为新类型的input设置required属性，那么空文本框也会验证通过；另外，设置特定的输入类型并不能阻止用户输入无效的值，只是应用某些默认的验证而已；

　　tel 类型的元素用于让用户输入和编辑电话号码，但浏览器不会自动验证它的格式，因为世界各地的电话号码格式差别很大，所以其在功能、表现上与“text”一致；

　　即使如此，但其在移动端，可能会提供为输入电话号码而优化的自定义键盘；另外，使用电话号码的特定输入类型也使添加自定义验证和处理电话号码更方便；例如，要求电话必填，用到了required属性，并且格式是中国的手机号码格式，如：

　　type为“search”的元素，与“text”功能和表现基本一致，只不过其右则有个删除号（X），所以在实际应用中，可以把它当作“text”一样使用；

　　type为”color”的元素，除了IE，其他浏览器都支持，其调用的是系统的调色板，并且并没有提供类型的约束验证；

　　需要注意的是，其value值必须加“#”号的16进制，且完整，如“#ff0000”，也不能使用关键字，如“red”，并且不能调节Alpha通道；

　　HTML5还定义了其他几个输入元素，这些元素都要求填写某种基于数字的值，如：”number”、”range”、”datetime”、”datetime-local”、”date”、”month”、”week”和”time”；浏览器对这些类型的支持并不友好；

　　在Javascript中，以上属性都有相对应的同名属性，另外，还存在两个方法：stepUp()和stepDown()，都接收一个可选的参数：在当前值的基础上加上或减去的step倍数的数值（默认加减1），如：

　　type为”date”、”datetime”、”datetime-local”、”month”、”week”和”time”，IE不支持，所有浏览器不支持”datetime”，Firefox只支持”date”和”time”；各浏览器呈现的也不一致；所以目前在所有应用中，并不会使用这些表单元素；对于不支持的表单元素，浏览器直接解析为type为“text”元素；

　　有一些input元素类型不需要pattern属性进行校验，例如”email”和”url”类型，因为它们本身就具有类型格式的校验；即使如此，也可以同时使用pattern属性，可以更加详细和灵活的定制约束规则；

　　使用表单元素的checkValidity()方法可以检测该元素的值是否有效，如果其值有效，该方法返回true，否则返回false；

　　要检测整个表单是否有效，可以在表单自身上调用checkValidity()方法；如果所有表单控件都有效，该方法返回true，即使其中一个表单无效，该方法都会返回false，如：

　　checkValidity()方法只会返回是否有效的结果，但表单元素的validity属性则会返回有效或无效的原因，该属性是一个ValidityState类型的对象：

　　对于这些布尔属性中的每一个，值为true就表示验证失败；如果出现失败，浏览器将提醒用户并阻止提交表单；如果验证成功，即其他属性均返回false，则valid将为true，就可以提交表单；

　　只有将自定义消息设置为空才能提交表单，而将自定义消息设置为空，也就是将消息恢复为浏览器默认的消息，如：

　　在Javascript中使用noValidate属性可以获取或设置这个值，如果这个属性存在，值为true，否则为false；

　　如果一个表单中有多个提交按钮，为了指定点击某个提交按钮不必验证表单，可以在相应的按钮上添加formnovalidate属性，如：

　　一般情况下，表单使用novalidate属性关闭浏览器的自动校验的目的，就是使用脚本控制表单的校验；但是，这并不会禁止对约束校验的支持或对约束CSS伪类的支持；如：

　　当表单提交时，若任一个表单元素在检查有效性时，不符合对它的约束条件，则会触发invalid事件；对元素有效性的检查是在提交表单之前或调用表单或表单元素自己的checkValidity()方法之后；

　　对于老旧浏览器并不支持HTML的约束校验，因此只能使用JavaScript来校验表单数据，如：

　　当用户输入的数据与存储在应用程序服务器端的附加数据绑定时，这种校验是必要的，一般采用Ajax异步请求进行校验；