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文件的界面