在全栈开发系列第三篇的时候有讲到使用Vue进行前端验证。在那一篇博文里，详细讲了如何搭建 vuefluentvalidator.js 的过程，并最终把它从需要（实体和实体验证器）到 直接使用，很显然，它很小巧的胜任了工作。（首先声明，这个vuefluentvalidator.js是我上周末也就是7月15号才开始构思和编写的，而我最开始的目的是希望它能轻松完成表单的校验工作，但没想过许多复杂多变的情况。所以这期间出现了多次更改和修正）。目前我已将它上传至github，网址为：https://github.com/gxqsd/vuefluentvalidator。如果你有什么更好的建议，我们可以一起修正。
回到正题，上一篇结束时，我们已经能让他成功跑起来了。但由于上一篇内容过多，所以还没来得及介绍下如何使用。
首先我们来看一个例子。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="vue.js"></script> <script src="vuefluentvalidator.js"></script> </head> <body> <div id="box"> <form action="https://www.baidu.com"> <div> <input type="text" v-model="model.name"> <span>{{model.error.name}}</span> </div> <div> <input type="text" v-model="model.age"> <span>{{model.error.age}}</span> </div> <input type="submit" value="提交" @click="submit({ev:$event})"> </form> </div> <script> let vm = new Vue({ el: '#box', data: { validator: new Validator({ model: { name: undefined, age: undefined, address: { home: undefined, phone: undefined } }, rule: function (than) { than.ruleFor("name") .NotEmpty() .WithMessage("名称必填") .MinimumLength(5) .WithMessage("最短长度为5"); than.ruleFor("age") .NotEmpty() .WithMessage("年龄必须") .Number(0, 100) .WithMessage("必须在0-100岁之间"); } }), }, methods: { submit: function ({ ev }) { if (this.validator.passValidation()) { return; } ev.preventDefault(); this.validator.validation(ev.target); } }, computed: { model: { get: function () { return this.validator.model; } } } }); </script> </body> </html>
在这个html页面里，我们引入了vue.js 和 vuefluentvalidator.js。
使用vuefluentvalidator 只需要在data 里 new 一个Validator 。Validator 有两个参数
第一个是要验证的数据，他可以是一个JSON对象，或者是一个实体对象 ClassName ，实际上我们可以将整个data的数据放入进去。我们传入进去的数据会被创建在其内部的model中，也就是说我们只需要通过validator.model 就能访问我们传进去的数据。
第二个参数则是一个回调函数，他是用来配置验证规则的函数。
回调函数默认有一个参数，在validator内部调用时会将this传进来，所以这个参数也就是validator本身。
通过这个回调函数的参数than，我们就可以进行验证规则的配置。
目前内置了六种验证规则。他们分别是
public class Person
{
/// <summary>
/// 姓名
/// </summary>
public string Name { get; set; }
/// <summary>
/// 年龄
/// </summary>
public int Age { get; set; }
/// <summary>
/// 性别
/// </summary>
public bool Sex { get; set; }
/// <summary>
/// 地址
/// </summary>
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<Person> { 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 你可以下载下来看看有何不同或有何问题，方便我们一起改进。