实验二 基于Jquery的表单验证插件

实验名称

编写基于Jquery的表单验证插件

实验目的 ：

1. 使用Jquery插件validate实现表单验证

实验环境：

1、硬件要求：计算机一台

2、软件要求：Chrome浏览器、IE11浏览器、Firefox浏览器

3、参考如图所示的表单，提交空内容有提示，不符合要求有提示（如以下要求：编码只能是数字和字母，品牌六个字以内。），表单要求有单选框，复选框，下拉列表，邮箱识别，密码，文件长传，完成结果参考第一个图片，其余图片为细节参考。

实验步骤和内容：

实验步骤：

实验步骤

1. 准备工作

创建一个新的 HTML 文件，命名为 index.html。如图1-1所示。

图1-1 HTML文件创建

在 HTML 文件中引入“jQuery” 库，并包含了一个表单验证插件 “jquery.validate.js”，用来完成表单验证功能。如图1-2所示。

图1-2  jQuery以及表单验证插件jquery.validate.js引入

编写所需的 CSS 样式，包括页面布局和元素样式。如图1-3所示。

图1-3 CSS样式设计

1. 页面结构搭建

使用 DIV 元素构建页面布局，内置一个form表单，表单内包括性别单选按钮，爱好多选按钮，教育程度下拉框，邮箱地址输入框，密码输入框，文件上传输入框和提交按钮。如图1-4所示。

图1-4 表单布局

1. 密码验证规则

使用jQuery Validation插件来对一个表单进行验证的。首先，代码在文档加载完成后会执行一个函数，这个函数会对id为"myForm"的表单应用验证规则。在规则部分，密码字段被设定为必填且最小长度为6个字符。在消息部分，设定了密码字段的错误提示信息，当密码字段为空或长度不足时会显示相应的提示信息。接着是errorClass部分，用来指定验证错误时所添加的CSS类名。最后，submitHandler部分定义了一个函数，当表单验证通过时会自动提交表单。。如图1-5所示。

图1-5 密码验证规则

1. 调试和优化

使用浏览器开发者工具检查页面布局和样式，确保各元素正常显示。

调试 JavaScript 函数，确保时间显示正常更新。

2、实验结果

1. form表单基本样式实现，包括性别单选按钮，爱好多选按钮，教育程度下拉框，邮箱地址输入框，密码输入框，文件上传输入框和提交按钮。如图2-1所示。

图2-1 form表单基本样式

1. 下拉框功能实现，当点击下拉框时，将出现可以选择的内容。如图2-2所示。

图2-2 下拉框功能实现

1. 邮箱地址验证功能实现，当输入的字符不符合邮箱验证规则时，将跳出提示框。如图2-3所示。

图2-3 邮箱地址验证功能

1. 密码验证功能实现，使用“jQuery”的表单验证插件 “jquery.validate.js”，当输入的密码位数少于六位时，将出现提示字符。如图2-4所示。

图2-4 密码验证功能

1. 文件提交功能实现，当点击提交文件时，将跳出文件提交页面。如图2-5所示。

图2-5 文件提交功能

1. 表单提交功能实现，当点击提交表单按钮时，如果邮箱地址和密码格式符合表单提交要求时，将会跳转到一个新的页面。