在全栈开发系列第三篇的时候有讲到使用 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, 我们就可以进行验证规则的配置.
目前内置了六种验证规则. 他们分别是
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 这样是不是又简单了一些?
于是我完成了 vuefluentvalidator 内部的修改. 现我已将他放置在 https://github.com/gxqsd/vuefluentvalidator 你可以下载下来看看有何不同或有何问题, 方便我们一起改进.
来源: https://www.cnblogs.com/Gxqsd/p/9343421.html