ASP.NET全棧開發之在Vue中使用前端校驗幸運飛艇平臺出租（二）
回到正題，上一篇結束時，我們已經能讓他成功跑起來了。但由於上一篇內容過多，所以還沒來得及介紹下如何使用。
首先我們來看一個例子。
復制代碼
<!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 src="vuefluentvalidator.js"></script>
</head>
<body>
<div id="box">
<form action="https://www.baidu.com">
<div>
<input type="text" v-model="model.name">
</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，我們就可以進行驗證規則的配置。
目前內置了六種驗證規則。他們分別是
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
{
/// <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 這樣是不是又簡單了一些？
ASP.NET全棧開發之在Vue中使用前端校驗幸運飛艇平臺出租（二）