在全栈开发系列第三篇的时候有讲到使用Vue进行前端验证。在那一篇博文里，详细讲了如何搭建 vuefluentvalidator.js 的过程，并最终把它从需要（实体和实体验证器）到 直接使用，很显然，它很小巧的胜任了工作。（首先声明，这个vuefluentvalidator.js是我上周末也就是7月15号才开始构思和编写的，而我最开始的目的是希望它能轻松完成表单的校验工作，但没想过许多复杂多变的情况。所以这期间出现了多次更改和修正）。目前我已将它上传至github，网址为：https://github.com/gxqsd/vuefluentvalidator。如果你有什么更好的建议，我们可以一起修正。

回到正题，上一篇结束时，我们已经能让他成功跑起来了。但由于上一篇内容过多，所以还没来得及介绍下如何使用。

首先我们来看一个例子。

    
         
         
                     
     
        
      
            
       
                
                        
        {
   {model.error.name}}            
       
            
       
                
                        
        {
   {model.error.age}}            
       
            
               
      
    
     
    

在这个html页面里，我们引入了vue.js 和 vuefluentvalidator.js。

使用vuefluentvalidator 只需要在data 里 new 一个Validator 。Validator 有两个参数

第一个是要验证的数据，他可以是一个JSON对象，或者是一个实体对象 ClassName ，实际上我们可以将整个data的数据放入进去。我们传入进去的数据会被创建在其内部的model中，也就是说我们只需要通过validator.model 就能访问我们传进去的数据。

第二个参数则是一个回调函数，他是用来配置验证规则的函数。

回调函数默认有一个参数，在validator内部调用时会将this传进来，所以这个参数也就是validator本身。

通过这个回调函数的参数than，我们就可以进行验证规则的配置。

目前内置了六种验证规则。他们分别是

NotEmpty　　　　　　　　非空验证，该方法无参数。

MinimumLength　　　　　 最小长度验证，有一个参数，设置最小长度

MaximumLength　　　　　最大长度验证，有一个参数，设置最大长度

Length　　　　　　　　　 长度范围验证，有2个参数，分别是最小长度和最大长度

Must　　　　　　　　　　 自定义验证，有一个参数，回调函数，回调函数会默认传入一个参数validator.model 就是我们在new validator的时候传进去的数据

Number　　　　　　　　　整数验证，有2个参数，分别是整数的最小值和最大值。默认值是Number.MinValue和Number.MaxValue

 

为什么没有邮箱验证之类的呢？实际上这些东西1是可以自定义，2是表单自带的type="email"是一个可靠验证。如果你有什么好的意见可以与我联系。

在配置了每一个验证规则后，我们可以通过WithMessage("errorMessaeg")设置错误消息。

而WithMessage后又可以继续为同一字段配置其他验证规则。

 

以上内容是介绍上篇博文结束后的使用方法。

 

今天，我想到在讲这一篇前端验证之前，我曾经写过两篇关于服务端验证的内容，其中有讲到

在实体

Person中存在一个复杂类型Address

public class Person    {        /// 
        /// 姓名        /// 
        public string Name { get; set; }        /// 
        /// 年龄        /// 
        public int Age { get; set; }        /// 
        /// 性别        /// 
        public bool Sex { get; set; }        /// 
        /// 地址        /// 
        public Address Address { get; set; }    }

public class Address    {        public string Home { get; set; }        public string Phone { get; set; }    }

我们在为Person设置Address的验证规则时，使用了SetValidator方式。

public class PersonValidator : AbstractValidator
           
                {        public PersonValidator()        {            this.RuleFor(p => p.Name)                .NotEmpty()                .WithMessage("姓名不能为空");            this.RuleFor(p => p.Age)                .NotEmpty()                .WithMessage("年龄不能为空");            this.RuleFor(p => p.Address)                .SetValidator(new AddressValidator());        }    }
           

那么如果我们的对象。

model: {                        name: undefined,                        age: undefined,                        address: {                            home: undefined,                            phone: undefined                        }                    }

我们该是否也希望这样设置？

在我分析了后认为在前端js中这种方式不适合，原因是，我们为了简单而省略了验证器，而如果这样的使用方式会让我们需要定义一个AddressValidator。即使你说我们用一个Validator来代替，那也会让代码结构变成

than.ruleFor("name")                            .NotEmpty()                            .WithMessage("名称必填")                            .MinimumLength(5)                            .WithMessage("最短长度为5");                        than.ruleFor("age")                            .NotEmpty()                            .WithMessage("年龄必须")                            .Number(0, 100)                            .WithMessage("必须在0-100岁之间");                        than.ruleFor("address")                            .setValidator(new Validator({                                model: {                                    home: undefined,                                    phone: undefined                                }, rule: function (than) {                                    than.ruleFor("home")                                        .NotEmpty()                                        .WithMessage("家庭住址不能为空");                                    than.ruleFor("iphone")                                        .NotEmpty()                                        .WithMessage("家庭电话不能为空");                                }                            }));

我认为这样的写法，简直糟糕透了，意味着重复又重复。看起来一点都不简洁了，甚至有点麻烦。

于是我想到了另一种写法

rule: function (than) {                        than.ruleFor("name")                            .NotEmpty()                            .WithMessage("名称必填")                            .MinimumLength(5)                            .WithMessage("最短长度为5");                        than.ruleFor("age")                            .NotEmpty()                            .WithMessage("年龄必须")                            .Number(0, 100)                            .WithMessage("必须在0-100岁之间");                        than.ruleFor("address.home")                            .NotEmpty()                            .WithMessage("家庭住址不能为空");                        than.ruleFor("address.phone")                            .NotEmpty()                            .WithMessage("家庭电话不能为空");                    }

咱们key不是叫address吗？那我们要设置address对象的属性的时候直接address.propertyName 这样是不是又简单了一些？

于是我完成了vuefluentvalidator内部的修改。现我已将他放置在 https://github.com/gxqsd/vuefluentvalidator 你可以下载下来看看有何不同或有何问题，方便我们一起改进。