jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提

类似的文章已有，请看这里，个人感觉稍显复杂，日前也打算写一个简单的给项目用，一些关键点记录于此。最终效果如下：

后端使用Asp.net mvc5，前端框架有：jquery.validate、jquery.validate.unobtrusive、requirejs、Bootstrap，都是当前最/较新版本。jquery.validate就不用说了，目前比较流行的前端校验组件；jquery.validate.unobtrusive基于jquery.validate，是为了配合Asp.net mvc，微软自己写的，NuGet下可查找Microsoft.jQuery.Unobtrusive.Validation安装，具体怎么用请继续往下看。

首先在后台我们定义实体类：

/// <summary> /// 厂家信息 /// </summary> public class Manufacturer : OperatedModel { [Key] [DatabaseGenerated(DatabaseGeneratedOption.Identity)] public int ID { get; set; } /// <summary> /// 信用代码/注册号 /// </summary> [Required(ErrorMessage = "信用代码/注册号不能为空")] [MaxLength(30)] public string EnterpriseNo { get; set; } /// <summary> /// 企业名称 /// </summary> [Required(ErrorMessage = "企业名称不能为空")] public string EnterpriseName { get; set; } /// <summary> /// 注册地址 /// </summary> [Required(ErrorMessage = "注册地址不能为空")] public string RegisteredAddress { get; set; } /// <summary> /// 法人 /// </summary> [Required(ErrorMessage = "法人不能为空")] public string ArtificialPerson { get; set; } /// <summary> /// person in charge 负责人 /// </summary> [Required(ErrorMessage = "负责人不能为空")] public string PIC { get; set; } [Required(ErrorMessage = "手机号不能为空")] [RegularExpression(RegexLib.Mobile, ErrorMessage = "手机号码格式不正确")] public string Mobile { get; set; } [EmailAddress] public string Email { get; set; } /// <summary> /// 商铺号 /// </summary> public string ShopNumber { get; set; } /// <summary> /// 店铺管理员姓名 /// </summary> public string StoreManagerName { get; set; } /// <summary> /// 店铺管理员联系方式 /// </summary> [RegularExpression(RegexLib.Mobile, ErrorMessage="手机号码格式不正确")] public string StoreManagerNumber { get; set; } /// <summary> /// 主要执照, 三证合一营业执照 /// </summary> public string MainLicence { get; set; } /// <summary> /// json, 其他执照，如生产许可证 /// </summary> public string OtherLicence { get; set; } /// <summary> /// 入驻日期 /// </summary> [Required(ErrorMessage = "入驻日期不能为空")] public DateTime EnterDate { get; set; } /// <summary> /// 离场日期 /// </summary> [Required(ErrorMessage = "截止日期不能为空")] public DateTime QuitDate { get; set; } /// <summary> /// 厂家可提现余额 /// </summary> public decimal Balance { get; set; } }

实体各属性上面有Attribute形式的校验规则，当用户提交一个Model到后端Action时，MVC框架会据此自动帮我们完成校验工作，于是后端开发就很开心。然而在数据提交之前，前端也有必要进行第一轮的校验，如果使用jquery.validate，那么需要在js或标签里再写一遍类似的规则，能不能复用后端已有的代码呢？我们以属性EnterpriseNo为例，在cshtml中写：

@Html.TextBoxFor(m => m.BasicInfo.EnterpriseNo, new { placeholder = "必填项", @class = "form-control" })

最终生成的html如下：

<input data-val="true" data-val-maxlength="字段 EnterpriseNo 必须是最大长度为“30”的字符串或数组类型。" data-val-maxlength-max="30" data-val-required="信用代码/注册号不能为空" placeholder="必填项" value="" data-original-title="" title="" type="text">

标签里面自动加上了很多data-开头的属性，data-val表示该控件需要校验，其它data-开头的就是一系列校验规则和失败时的错误信息，错误信息可以自定义，否则框架会给你生成类如“字段 EnterpriseNo 必须是最大长度为30的字符串或数组类型。”这种机器翻译语言。当然这些属性jquery.validate是不认的，要让jquery.validate认识，就需要jquery.validate.unobtrusive出马了。

现在我们来说这些js如何配合使用。

新版本的jquery.validate已经支持AMD模式，所以可以直接使用requirejs加载，jquery.validate.unobtrusive则不行，需要shim配置，代码：

require.config({ baseUrl: '/scripts', paths: { "jquery": 'jquery-2.2.3.min', "knockout":'knockout-3.4.0', "bootstrap":'../components/bootstrap/3.3.6/js/bootstrap.min','validate':'jquery.validate', 'validateunobtrusive':'jquery.validate.unobtrusive.min' }, shim : { 'bootstrap' : { deps : [ 'jquery' ], exports : 'bootstrap' }, 'validateunobtrusive':{ deps:['validate'], exports: 'validateunobtrusive' } } });