3.3 第三方插件及使用方法

3.3.1 校验控件formValidator

在开发基于B/S架构体系风格的应用系统时，必须对用户输入的内容的进行合法性验证，常见的验证方法有非空验证、长度验证、内容合法性验证（如数字、E-mail格式等），以及业务逻辑验证（如系统中的注册用户不能相同）。

页面开发者（JavaScript开发者）往往需要编写大量的JavaScript代码来进行元素校验，而这些验证在平时开发中不停地重复书写。一般要判断的表单元素比较多，开发过程就显得枯燥无味且浏览器之间兼容性差。jQueryformValidator插件只需要进行简单的配置，无须编写代码就能实现表单的检验，使开发者重点关注业务逻辑的实现，无须关心验证的实现过程。它包括常规检验功能和可扩展校验功能。针对每个表单元素只需要写一行配置信息就能完成校验。而这些配置信息无须写入表单元素，实现了JavaScript代码和HTML代码的分离且具备跨浏览器应用的能力。

1．获取formValidator

（1）官方网站的下载地址：http://www.formvalidator.net/。

（2）使用百度搜索formValidator并获取JavaScript文件。

2.JQueryformValidator插件的API

目前formValidator支持5种校验方式：inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、compareValidator（提供2个对象的比较，目前可以比较字符串和数值型）、ajaxValidator（通过AJAX到服务器上做数据校验）、regexValidator（提供可扩展的正则表达式库）、functionValidator（提供可扩展函数库来做校验），每种校验方式支持的控件类型如表3-1所示。

表3-1 formValidator各种校验方式支持的控件类型

插件提示错误有两种模式：showword和showalert，即文字提示和窗口提示。表3-2分别列出全局初始化和5种校验方式公开的属性。

表3-2 校验公开的属性

（1）inputValidator校验控件的属性如表3-3所示。

表3-3 inputValidator校验控件的属性

（2）regexValidator校验控件的属性如表3-4所示。

表3-4 regexValidator校验控件的属性

（3）ajaxValidator校验控件的属性如表3-5所示。

表3-5 ajaxValidator校验控件的属性

注意：

（1）在提交信息的时候，自动追加clientID参数，表示触发校验的控件ID。

（2）在提交信息的时候，自动追加rand参数，这是个随机数。

（3）几乎所有的属性跟$.ajax（）的属性一样，请参考$.ajax（）函数的帮助。

（4）functionValidator校验控件的属性如表3-6所示。

表3-6 functionValidator校验控件的属性

（5）在使用formValidator前，需对其进行初始化，初始化formValidator的函数如表3-7所示。

表3-7 formValidator公共函数

续表

【实例】 完成员工信息（姓名，工号，手机号码，E-mail）的添加功能，要求使用formValidator校验用户输入数据的合法性。

实现步骤：

（1）创建一个名为“JQuery练习”的解决方案和项目。

（2）添加一个名为EmployerController的空的MVC控件器。

（3）在EmployerController.cs文件中添加一个名为Create的动作，代码如下：

        ///＜summary＞
        ///添加员工动作
        ///＜/summary＞
        ///＜returns＞＜/returns＞
        public ActionResult Create()
        {
            return View();
        }

（4）右击Create方法并选择“添加视图…”选项，利用VisualStudio2013自动生成Create视图。

（5）在“JQuery练习”项目的Scripts文件夹下添加一个名为formValidator的文件夹，用于放置所有formValidator相关的文件。

（6）将下载的formValidator压缩包（本例采用formValidator-4.0.1版）解压，将images和style文件夹及下级所有文件复制到新建的formValidator文件夹下。

（7）将formValidator-4.0.1.min.js和formValidatorRegex.js文件复制到formValidator文件夹下。

（8）切换到Create.cshtml文件，添加对formValidator文件的引用，代码如下：

        ＜link href=＂～/Scripts/formValidator/style/validator.css＂rel=＂stylesheet＂/＞
        ＜script src=＂～/Scripts/jquery-1.10.2.min.js＂＞＜/script＞
        ＜script src=＂～/Scripts/formValidator/formValidator-4.0.1.min.js＂＞＜/script＞
        ＜script src=＂～/Scripts/formValidator/formValidatorRegex.js＂＞＜/script＞

（9）添加校验控件的注册代码。在＜head＞＜/head＞标签中添加控件校验的注册代码如下：

        ＜script type=＂text/javascript＂＞
            $().ready(function () {
                $.formValidator.initConfig({
                    formID: ＂form1＂, debug: false, submitOnce: true,
                    onError: function (msg, obj, errorlist) {
                        $(＂#errorlist＂).empty();
                        $.map(errorlist, function (msg) {
                            $(＂#errorlist＂).append(＂＜li＞＂ +msg +＂＜/li＞＂)
                        });
                        alert(msg);
                    },
                    submitAfterAjaxPrompt: ＇有数据正在异步验证，请稍等……＇
                });
            });
        ＜/script＞

（10）添加信息录入框，代码如下：

        @using (Html.BeginForm(＂Create＂, ＂Employer＂, FormMethod.Post, new { @id=
        ＂form1＂ }))
        {
            ＜table＞
                ＜tr＞＜td＞＜span＞姓名：＜/span＞＜/td＞＜td＞＜div＞＜input name=＂name＂ id=
                ＂name＂ /＞＜/div＞＜div id=＂nameTip＂ style=＂width:250px＂＞＜/div＞＜/td＞
                ＜/tr＞
                ＜tr＞＜td＞＜span＞工号：＜/span＞＜/td＞＜td＞＜div＞＜input name=＂number＂
                id=＂number＂ /＞＜/div＞＜div id=＂numberTip＂style=＂width:250px＂＞＜/div＞
                ＜/td＞＜/tr＞
                ＜tr＞＜td＞＜span＞手机号码：＜/span＞＜/td＞＜td＞＜div＞＜input name=
                ＂cellphone＂ id=＂cellphone＂ /＞＜/div＞＜div id=＂cellphoneTip＂
                style=＂width:250px＂＞＜/div＞＜/td＞＜/tr＞
                ＜tr＞＜td＞＜span＞Email: ＜/span＞＜/td＞＜td＞＜div＞＜input name=＂email＂
                id=＂email＂ /＞＜/div＞＜div id=＂emailTip＂ style=＂width:250px＂＞＜/div＞
                ＜/td＞＜/tr＞
                ＜tr＞＜td colspan=＂2＂＞＜input type=＂submit＂value=＂提交＂/＞＜/td＞＜/tr＞
            ＜/table＞
        }

小贴士

上述代码中，文本输入控件后紧跟的＜div＞控件用于显示提示信息，如输入提示、正确提醒和错误消息。

（11）为了使信息录入控件与消息提示框在同一行，需设置它们的float属性为left，使其左向对齐。在＜head＞＜/header＞标签中添加样式，代码如下：

        ＜style type=＂text/css＂＞
            div {
                float:left;
            }
        ＜/style＞

（12）在$.formValidator.initConfig代码后添加控件的校验代码如下：

        //配置校验姓名控件：不能为空，长度为5～10位
         $(＂#name＂).formValidator({onShow: ＂请输入用户名＂, onFocus: ＂用户名至少为5个字
        符，最多10个字符＂, onCorrect: ＂用户名正确＂ }).inputValidator({ min: 5, max: 10,
       onError: ＂你输入的用户名非法，请确认＂ });
        //配置校验工号控件：不能为空，长度为5位
        $(＂#number＂).formValidator({ onShow: ＂请输入工号，只有输入\＂00186\＂才是对的＂,
        onFocus: ＂工号只能是5个字符＂, onCorrect: ＂工号正确＂ }).inputValidator({ min:
        5, max: 5, onError: ＂你输入的工号非法，请确认＂ });
        //配置校验手机号码控件：使用formValidatorRegex.js文件中枚举的mobile正则表达式
        进行校验，长度必须为11位
        $(＂#cellphone＂).formValidator({ empty: true, onShow: ＂请输入你的手机号码，可以
        为空值＂, onFocus: ＂你要是输入了，就必须输入正确＂, onCorrect: ＂谢谢你的合作＂,
        onEmpty: ＂你真的不想留手机号码吗？＂ }).inputValidator({ min: 11, max: 11,
        onError: ＂手机号码必须是11位，请确认＂ }).regexValidator({ regExp: ＂mobile＂,
        dataType: ＂enum＂, onError: ＂你输入的手机号码格式不正确＂ }); ;
        //配置E-mail控件，长度为6～100位
        $(＂#email＂).formValidator({ onShow: ＂请输入邮箱＂, onFocus: ＂邮箱长度为6～100
        个字符＂, onCorrect: ＂恭喜你，输入正确＂, defaultValue: ＂@@＂ }).inputValidator({
        min: 6, max: 100, onError: ＂邮箱有误，长度为6～100位，请确认！＂ }).regexValidator
        ({ regExp: ＂^([\\w-.]+)@@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)
        +))([a-zA-Z]{2,4}|[0-9]{1,3})(]? )$＂, onError: ＂邮箱参考格式：michael@163.com＂
        });

（13）输入界面如图3-3所示。不在控件中输入任何内容，直接单击“提交”按钮，运行界面如图3-4所示。

图3-3 输入界面

图3-4 不输入任何内容时的显示结果

3.3.2 日期控件My97DatePicker

My97DatePicker是一款基于JQuery开发的日期选择控件，它具有轻量级、兼容性好、支持多语言、使用简单等优点。

下载及帮助文档地址：http://www.my97.net/。

【实例】 当单击文本框时弹出日期控件，使用户可以从日期控件中选择日期。

实现步骤：

（1）打开“JQuery练习”解决方案。

（2）将解压后的My97DatePicker文本夹复制到“JQuery练习”项目的Scripts文件夹下。

（3）在“JQuery练习”项目中新建一个名为testDate.html的HTML文本，在＜head＞＜/head＞标签中引用JQuery文件及日期控件，代码如下：

        ＜script src=＂Scripts/jquery-1.10.2.min.js＂＞＜/script＞
        ＜script src=＂Scripts/My97DatePicker/WdatePicker.js＂＞＜/script＞

（4）在testDate.html文件的＜body＞＜/body＞标签中添加一个文本框，代码如下：

        ＜span＞出生日期：＜/span＞＜input id=＂txtBirthDay＂ onclick=＂WdatePicker()＂ /＞

（5）运行testDate.html文件，界面如图3-5所示。

图3-5 运行testDate.html文件的界面

上一章目录下一章