JavaScript总结(八)

表单验证

表单验证是JavaScript最常用、最有用的功能之一。在表单内容提交之前进行验证,可以降低服务器处理器的压力,缩短用户等待的时间。表单校验中第一个要考虑的问题是:什么时候捕获表单的录入错误?在错误发生之前、在错误发生时、在错误发生之后;

? 使用submit事件在错误发生之后捕获错误

表单数据输入完毕后,通过点击提交按钮和submit()方法把数据发送到由表单的action属性指定的表单处理程序进行处理。为了防止无效数据进入服务器端,我们有在submit事件发送之后,表单数据提交到表单处理程序之前,验证表单中输入的数据的有效性,即把校验代码写在submit()事件的事件处理程序中。如果一个控件包含了无效数据,就显示一条信息,并且通过处理程序返回false值来取消提交,如果数据有效,处理程序返回true值,正常提交表单数据。

? 使用change事件在错误发生时捕获错误

可以在用户输完每项数据后,马上进行校验;当修改一个控件,并失去焦点时,会触发change事件,我们就可以在change事件处理程序中,写入校验码,如果数据无效,显示一条信息提醒用户,并且通过处理程序返回false值来阻止表单的提交。

? 使用keypress事件在错误发生之前捕获错误

如何在开始就阻止错误的发生?可以通过在键入数据的时候,即keypress事件发生时,限制数据的类型来实现,这样就可以在错误发生时捕获并阻止。

? 表单校验最佳实践

? 必须对用户有帮助——客户端校验必须用于帮助用户正确输入数据,因此,它必须以有帮助的方式与用户交互。例如用户输入一个无效数据,可以在错误信息中包含正确的数据格式。同样可以使用脚本来纠正一般的错误,例如:使用JavaScript自动格式化;

? 不要让人讨厌——我们使用alert()来提示用户输入无效是为了演示,但是在用户可以校验数据之前,alert()窗口必须关闭,因为用户也许会忘记到底是哪个控件出错。所以最好考虑在页面本身的某个地方显示错误信息;

? 只要有可能,就用HTML功能代替JavaScript——比如说使用控件的maxlength属性校验控件长度,比使用JavaScript校验好;提供一个可能的日期的下拉列表以避免无效输入,来替代日期检查等等;

? 早点捕获错误——一直等到提交不是捕获错误的最佳事件,可以选择在错误发生时或者发生之前对错误进行捕获。如果要使用blur和focus触发器,必须管理事件,包括消除事件冒泡;

? 如果拿不准,就不要太严格——JavaScript表单校验是用于帮助用户发现错误的,而不是一种强制政策;

时间: 2024-10-27 04:20:37

JavaScript总结(八)的相关文章

javascript继承(八)-封装

这个系列主要探讨的是javascript面向对象的编程,前面已经着重介绍了一下js的继承,下面想简单的说一下js如何实现封装的特性. 我们知道面向对象的语言实现封装是把成员变量和方法用一个类包围起来,对类中变量的访问只能通过已定义的接口.封装可以算是一种信息隐藏技术,java通过private修饰符将成员变量私有化,并提供对外修改的接口,以控制类中的成员变量的访问和修改.当然在这些方法中可以对数据进行一些加工. 在前面文章已经介绍了js的属性问题,那么在js中如何实现对类的属性隐藏呢?这里封装有

JavaScript(八)——复习一(重要内容基本包含在内)

一.常用对话框 1.alert(""):警告对话框,作用是弹出一个警告对话框 2.confirm(""):确定对话框,弹出一个带确定和取消按钮的对话框——确定返回true,取消返回false 3.primpt("要显示的文字"):可以允许用户输入内容的对话框 二.基本语法(跟c#差不多) 1.变量 都是通用类型var,可以随便存储其它类型的值,可以直接使用,不用定义.但习惯上定义. 定义变量: var a;    //所有变量定义都用var定义,

JavaScript学习 八、DOM扩展

对DOM的两个主要扩展是Selectors API(选择符API)和HTML5.这两个扩展都是源自开发社区.此外还有一个不那么因为瞩目的ELement Traversal(元素遍历)规范.为DOM添加了一些属性. 选择符API 众多JavaScript 库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素. 实际上 jQuery 的核心就是通过CSS选择符查询DOM 文档取得元素的引用,从而抛开了 getElementById() 和 getElementsByTagName

轻松学习JavaScript十八:JavaScript之DOM简介

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,运行开发人员添加,移除和修改页面的某一部分.HTML或XML页面的每个部分都 是一个节点的衍生物.通过DOM,可访问HTML文档的所有元素.当网页被加载时,浏览器会创建页面的文档对象模 型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了访问HTML和XML文档的标准."W3C 文档对象模型(DOM)是中立

原生JavaScript第八篇

原生js学习笔记8--Ajax基础   什么是Ajax 不刷新页面的情况下从服务器获取.提交数据的一种数据交互方式. Ajax使用步骤 1.创建Ajax对象 var httpRequest = new XMLHttpRequset可以创建一个Ajax请求对象. 注意:浏览器的兼容问题 IE6以及之前的IE不支持上边的创建爱你方法,这些版本的浏览器并没有集成Ajax,而是当做一个插件来处理,所以在创建时需要做兼容性处理: if (window.XMLHttpRequest) { xmlHttp =

轻松学习JavaScript十八:DOM编程学习之DOM简单介绍

一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分. HTML或XML页面的每一个部分都 是一个节点的衍生物. 通过DOM.可訪问HTML文档的全部元素. 当网页被载入时.浏览器会创建页面的文档对象模 型,DOM模型被构造为对象的树. DOM是W3C(万维网联盟)的标准.DOM定义了訪问HTML和XML文档的标准."W3C 文档对象模型(DOM)是

JavaScript示例八(富文本编辑框)

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>富文本编辑,采用iframe嵌入的方法</title> </head> <body> <iframe name="richedit" style="height:200px;width:300px;

javascript的八张图

JavaScript(八)日期对象

Date对象 1.创建方式 var now = new Date(); //现在返回的直接就是 当前的时间 不需要进行换算了   返回格式  (星期 月 日 年 时 分 秒 时区) 2.日期的格式化方法 dateObject.toDateString(); 返回   星期 月 日 年 dateObject.toTimeString(); 返回   时 分 秒 时区 3.日期时间组建方法 dateObject.function(); getTime() 返回从1970至今的毫秒数(valueOf(

精读JavaScript模式(八),JS类式继承

一.前言 这篇开始主要介绍代码复用模式(原书中的第六章),任何一位有理想的开发者都不愿意将同样的逻辑代码重写多次,复用也是提升自己开发能力中重要的一环,所以本篇也将从“继承”开始,聊聊开发中的各种代码复用模式. 其实在上一章,我感觉这本书后面很多东西是我不太理解的,但我还是想坚持读完,在以后知识逐渐积累,我会回头来完善这些概念,算是给以前的自己答疑解惑. 二.类式继承VS现代继承模式 1.什么是类式继承 谈到类式继承或者类classical,大家都有所耳闻,例如在java中,每个对象都是一个指定