在开启长篇大论之前,首先将表单验证的效果展示给大家。
<强>
对于初学者而言,html表单验证是一项极其琐碎的事情。要做好表单验证,需要准备以下基本要素:
1. html表单结构:包含需要校验的表单元素;
2. js逻辑控制:在需要校验的表单元素上绑定事件,如点击,获取焦点,失去焦点等事件,并设置这些事件对应的执行函数;
3. css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式。
这3类基本要素中,html表单结构的创建相对简单。表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息。这里我参考了百度、163邮箱,京东等知名互联网企业的注册页面,归纳出表单验证需要的主要提示信息分类如下:
1。表单元素获取焦点后的<>强帮助信息(插件中对应的类名“小费”);
2。表单元素验证通过时的<>强成功信息(插件中对应的类名“有效的”);
3。表单元素验证失败时的<>强错误信息(插件中对应的类名“错误”)。
如果不借助任何插件,我们需要花费大量的时间去编写不同类型的信息提示,考虑各种样式间的来回切换,以及编写一些基本的验证规则。名言曰:“我之所以看得更远,是因为我站在巨人的肩膀上”。何不直接利用一些已有的成熟插件,来帮助我们快速的编写一个表单验证功能,这样既能提高效率,又能让我们抽出时间专注于我们自己的逻辑。
在众多表单验证插件中,jQuery验证插件是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证。它的特点如下:
1 <强>。内置验证规则:拥有必填,数字、电子邮件、网址和信用卡号码等内置验证规则。
2。<>强自定义验证规则强:可以很方便地自定义验证规则(通过.validator.addMethod美元(名称、方法消息)实现);
3。<强>简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认信息提示的功能(通过设置插件中消息的参数来实现);
4。<>强实时验证强:可以通过按键弹起或模糊事件触发验证,而不仅仅在表单提交的时候验证。
下面我们选择该插件,来实现一个简单而漂亮的表单验证例子。
在引入jquery验证插件前,需要先引入它所依赖的文件jquery.js(例子中jquery的版本为1.9);在实现的过程中,为了更好地效果,我在jquery.validate.extend。js文件中对jquery验证原有的功能进行了扩展,并修改了相关默认选项,因此在文档头部需要引入的文件有三个:
3要
表单验证素中,首先需要完成html表单结构代码的编写。为了让表单结构简单而清晰,我们将表单的每个元素都包裹在一个div结构中:用标签标签用来标记元素的名称,接着便是表单元素本身。【注明:1。使用标签标签的好处是为鼠标用户改进了可用性。当在标签元素内点击文本时,浏览器就会自动将焦点转到和标签相关的表单控件上。2。每个需要校验的表单元素都应该设置id和名称属性,方便在使用插件时将元素绑定校验规则和校验信息。】
表单实现代码如下:
