JavaScript之jQuery-7 jQuery 使用插件(使用插件日历插件表单验证插件)

Posted 2020-07-03

一、jQuery 使用插件

 

插件的查找与帮助

  - jQuery 官方网站的插件库(http://plugins.jquery.com)

提供了大量的插件。并给出去了每个插件的用户评级、版本及bug等

  - 库中列出了每个插件的ZIP文件下载、演示、示例代码及教程

使用插件

  - step 1:将插件包导入到页面中，并确保它在jQuery源文件之后

    <script src="jqeury-1.11.1.js"></script>

    <script></script>

  - step 2:在页面中编写或导入自定义的script文件，并在其中使用插件创建或扩展的方法

    $("#myID").plugins();

二、日历插件

日历插件

  - 日历控件是web页面中比较常用的控件之一，html5中也添加了日历控件的支持

  - 除了 HTML5 之外好多jQuery插件也有与日历空间相关的，比如jQuery UI中的DatePicker、My97等。

  - 这些年，日历控件层出穷，用户可以根据需求，样式在互联网上下载到需要的日历控件

My97日历插件

  - My97日历是目前互联网比较常用的日历插件之一。

  - My97具备更人性化、更全面的功能，并且具备非常强大的日期范围限制功能

  - My97日历插件使用步骤

      - step 1: 下载My97相关的压缩文件(css、js、图像文件)，下载地址 http://www.my97.net/

      - step 2: 引入WdatePicker.js文件(只需要这一个文件即可，css文件户自动引入)

      - step 3: 根据需求完成功能

默认日历

  - 下面代码能够在页面中显示默认的My97日历

属性

  - 以下是My97的常用属性

内置函数

  - $dp.$D(id,object):将id对应的日期框中的日期字符串，加上定义的日期差量，返回使用real格式化后的字符串。

      - Id:    对象的ID

      - object:日期差量，可设置成{y:值,M:值,d:值,H:值,m:值,s:值}

      - {M:3,d:7}表示3个月零7天

事件

  - $onpicking : 选择日期时，激发的事件

  - $onpicked  : 选择日期后，激发的事件

  - $onclearing: 清楚已选日期时激发的事件

  - $oncleared : 清除已选日期后激发的事件

  - 事件对象   :dp

      - dp.cal.getDateStr()   : 返回选择前的日期对象格式化值

      - dp.cal.getNewDateStr(): 返回选择后的日期对象格式化值

三、表单验证插件

表单验证插件

  - 表单验证插件主要是针对表单元素的值进行验证,并给出相应的图形以及文字提示。

  - 常用验证插件

      - formValidator

      - jQuery.validator

      - earyForm

formValidator

  - 下载formValidator所需要的文件

      - images: 验证过程中要用到的图像文件夹

      - style:f ormValidator验证过程中要用到的样式文件夹validator.css

      - jqeury_last.js: jquery文件，可被替换成自己的

      - formValidator.js: 验证的核心文件，大部分验证规则都存在与此

      - formValidatorRegex.js: 有关自定义正则表达式的验证文件

      - index.html: 说明、案例等起始页

验证方式

  - formValidator 支持5种验证方式

公共函数

  - $.formValidator.initConfig

formValidator函数

Invalidator

CompareValidator

RegexValidator

总结：本章内容主要介绍了 jQuery 使用插件(使用插件、日历插件、表单验证插件)

本文出自 “会飞的蚂蚁” 博客，谢绝转载！