3.ASP.NET全栈开发之前端校验(基于Vue的自定义校验)自实现小型验证框架 – Gxqsd

前面分享了两篇关于.NET的服务端校验的文章,在系统里光有服务端校验虽然能够勉强使用,但会出现许多不愉快的体验,如上一章我在最后提交的时候填写了3个表单,在仅有最后一个表单出现了错误的时候,虽然达到了校验功能,表明了错误,但我前面三个表单的数据都被干掉了啊。再则比如注册的时候我填了那么多东西,我提交后你却告诉我已经被注册了,如果不是真爱,大概会毫不留情的Alt+F4 再也不见啦。

为了解决这个问题,我们必须在系统中采用双校验,前端校验那么多,咱们ASP.NET MVC创建时默认会引入jquery-validate,但在这里我就不过多介绍jquery-validate了,原因是…其实我也没怎么用过都是默认生成的顶多测试时用用,哈哈,这并不是说jquery-validate不好,只是我们现在所要搭建的这个系统是基于Vue的前后端分离项目,而Vue则是以数据为驱动的,所以咱们这暂时就不用讨论jquery-validate了。

如果不熟悉Vue的同学呢,可以先去Vue的官网看看,文档很详细,作者中国人,所以文档的易读性也很高,现在Vue已经是非常火的前端MVVM框架了,各种资料、教程也多,我就不过多重复了(其实我也才接触Vue不到一月,实在不敢瞎扯)。

在Vue的官网上看到表单验证的介绍,大致是通过给form绑定@submit事件,在事件里通过对字段的验证决定要不要阻止提交。

<form id="app" @submit="checkForm" action="https://vuejs.org/" method="post">

  <p v-if="errors.length">
    <b>Please correct the following error(s):</b>
    <ul>
      <li v-for="error in errors">{{ error }}</li>
    </ul>
  </p>

  <p>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" v-model="name">
  </p>

  <p>
    <label for="age">Age</label>
    <input type="number" name="age" id="age" v-model="age" min="0">
  </p>

  <p>
    <label for="movie">Favorite Movie</label>
    <select name="movie" id="movie" v-model="movie">
      <option>Star Wars</option>
      <option>Vanilla Sky</option>
      <option>Atomic Blonde</option>
    </select>
  </p>

  <p>
    <input type="submit" value="Submit">
  </p>

</form>
const app = new Vue({
  el:'#app',
  data:{
    errors:[],
    name:null,
    age:null,
    movie:null
  },
  methods:{
    checkForm:function(e) {
      if(this.name && this.age) return true;
      this.errors = [];
      if(!this.name) this.errors.push("Name required.");
      if(!this.age) this.errors.push("Age required.");
      e.preventDefault();
    }
  }
})

Vue官网上的验证,是的,它非常短小精悍的完成了校验。

但说真的,这不是我想要的,我还是需要去写逻辑,我就想像前两章后台校验那样通过函数链式配置完成。

怎么办呢,Vue自己又没有,用别的框架?我咋知道有啥框架可用,我才刚认识它(Vue),对它的六大姑七大婆还不熟呢。

既然使用方式已定,又找不到别的办法,那就只有自己下地狱了。

本章节采用了ES6的语法,如看官还不熟悉ES6请先了解一下ES6基础后再来。

假设我有个实体Student

class Student {
            constructor() {
                this.name = undefined;
                this.age = undefined;
                this.sex = undefined;
            }
        }

 

首先我确定了我的使用方式像这样

this.ruleFor("name")
                    .NotEmpty()
                    .WithMessage("名称必填")
                    .MinimumLength(5)
                    .WithMessage("最短长度为5");

                this.ruleFor("age")
                    .NotEmpty()
                    .WithMessage("年龄必须")
                    .Number(0, 100)
                    .WithMessage("年龄必须在0-100岁之间");

                this.ruleFor("sex")
                    .NotEmpty()
                    .WithMessage("性别必填")
                    .Must(m => !m.sex)
                    .WithMessage("gxq is a man");

从FluentValidation认识哪里开始,FluentValidation的使用需要一个验证器,没关系,那我也创建一个验证器名字叫StudentValidator的验证器

 class StudentValidator{
            constructor(){
                
            }
        }

我们知道要想向ruleFor()、NotEmpty()等这样使用 首先我得具有ruleFor这些方法才行啊,反观FluentValidation,我们发现他必须要继承自AbstractValidator<T>,其中T代表验证器要验证的类型。

javascript没有泛型,但我们也可以继承自Validator啊,不支持泛型,我还不能用参数表单我要验证那个实体了么。╭(╯^╰)╮

于是乎

class Validator {
    constructor(model) {

        this.model =new model();
    }

    ruleFor(field) {   //此处表达式返回一个指定字段哈

    }

    validation(targetElement) {
      
    }
}

Validator就这么出现了,首先他有一个参数,参数是传递一个构造函数进去的,实体名就是构造函数,比如前面的Student。

内部定义了一个ruleFor方法,有一个参数,表明为指定属性配置验证规则。为了降低使用成本,尽量和前面使用的后台验证框架用法一致。

还定义了一个validation方法有一个参数触发对象,这个对象实际上是sumbit那个按钮,后面在做解释。

现在我们让StudentValidator继承自Validator,这样我们的StudentValidator就变为了

 class StudentValidator extends Validator {
            constructor(typeName) {
                super(typeName);
                this.ruleFor("name");this.ruleFor("age");
                 this.ruleFor("sex");
                  
            }
        }

可以指定字段了,但不能配置这像什么话,二话不说继续改。

从哪里开始改呢?已经调用了ruleFor方法,要想实现接着.NotEmpty()的话那必须从ruleFor下手了。

方向已经明确了,但总的有具体实施方案啊,于是啊苦想半天,我认为我们的ruleFor既然是为了给目标字段定义验证,并且是链式的可以为目标字段配置多个验证规则如

 this.ruleFor("age")
                    .NotEmpty()
                    .WithMessage("年龄必须")
                    .Number(0, 100)
                    .WithMessage("年龄必须在0-100岁之间");

那么我们就应该在ruleFor的时候返回一个以字段名为唯一标识的对象,幸好啊,在ES6中提供了一种数据类型叫Map,他有点类似于咱们C#的Dictionary,现在数据类型有了,键有了,那我这个键对应的值该是什么呢?

继续分析,这个值里必须具备NotEmpty、Number等这些函数我才能够调用啊,既然这样,那毫无疑问它又是一个对象了。

于是我创建了RuleBuilderInitial对象,基础结构如下

class RuleBuilderInitial {

    constructor() {   

        this.length = undefined;
        this.must = undefined;
        this.maximumLength = undefined;
        this.minimumLength = undefined;
        this.number = undefined;
    }

    /*
     *  非空
     */
    NotEmpty() {

    }
    Length(min, max) {

    }
    Must(expression) {

    }
    EmailAddress() {

    }
    MaximumLength(max) {

    }
    MinimumLength(min) {

    }
    Number(min, max) {

    }
}

有了RuleBuilderInitial后我们来改造下Validator

class Validator {
    constructor(model) {

        this.model =new model();

        this.fieldValidationSet = new Map();
    }

    ruleFor(field) {   //此处表达式返回一个指定字段哈

        //  验证配置以字段作为唯一单位,每个字段对应一个初始化器
        this.fieldValidationSet.set(field, new RuleBuilderInitial());
        return this.fieldValidationSet.get(field);
    }

    validation(targetElement) {
       

    }
}

在Validator里我们新增了fieldValidationSet 他是一个Map数据结构,前面说到了Map就是一个键值对,只不过他比较唯一,他不允许键重复,如果键值对里已存在Key,则新的Value不会替换掉之前的Value。

我们用这个fieldValidationSet来保存以字段名为单位的验证配置。因为Map的结构原因,ruleFor确保了每个字段的配置项唯一的工作。

在ruleFor时,我们将new 一个RuleBuilderInitial对象,并将它和字段一起添加到Map去,最后将这个RuleBuilderInitial对象从Map里取出并返回。

我们知道在RuleBuilderInitial对象里定义了许多方法如NotEmpty、Number等,所以现在我们可以这样写了。

 class StudentValidator extends Validator {
            constructor(typeName) {
                super(typeName);
                this.ruleFor("name")
                    .NotEmpty()

                this.ruleFor("age")
                    .NotEmpty()

                this.ruleFor("sex")
                    .NotEmpty()

            }
        }

typeName是类型名,略略略,上面忘了解释了,在Validator的构造函数里我们不是有一个model吗,拿到model后我们new model了,所以typeName应该为我们要验证的实体如Student。

首先这显然不是我们想要的,我们希望在NotEmpty后能够接着调用WithMessage()方法,汲取了上面ruleFor的经验,肯定是在NotEmpty方法里返回一个新对象,并且这个新对象具备WithMessage方法。这没问题,太简单了,也许我们在创建一个叫 RuleBuilderOptions的对象就一切OK了,在NotEmpty()中只需要返回这个 RuleBuilderOptions对象就行了,可事实上我们希望的是在返回RuleBuilderOptions对象后调用WithMessage方法后并继续调用Number等其他方法。

梳理一下结构,我们在Validator种以字段作为key创建了RuleBuilderInitial,也就是说每个字段只有一个唯一的RuleBuilderInitial,在RuleBuilderInitial中如果享有多个验证的配置,同样我想也需要一个以验证名为key,RuleBuilderOptions为实例的针对不同验证信息的存储对象。于是我先创建了RuleBuilderOptions

class RuleBuilderOptions {

    constructor() {
        this.errorMessage = '';
    }

    WithMessage(errorMessage) {
        this.errorMessage = errorMessage;
    }
}

紧接着在修改了 RuleBuilderInitial

class RuleBuilderInitial {

    constructor() {   // T:验证的目标类型 TProperty:验证的属性类型
        //  以具体的验证方式作为唯一单位
        this.validationSet = new Map();
        this.length = undefined;
        this.must = undefined;
        this.maximumLength = undefined;
        this.minimumLength = undefined;
        this.number = undefined;
    }

    /*
     *  非空
     */
    NotEmpty() {
        this.validationSet.set("NotEmpty", new RuleBuilderOptions());
        return this.validationSet.get('NotEmpty');
    }
    Length(min, max) {
        this.validationSet.set("Length", new RuleBuilderOptions());
        this.length = { min: min, max: max };
        return this.validationSet.get("Length");
    }
    Must(expression) {
        this.validationSet.set("Must", new RuleBuilderOptions());
        this.must = expression;
        return this.validationSet.get("Must");
    }
    EmailAddress() {
        this.validationSet.set("EmailAddress", new RuleBuilderOptions());
        return this.validationSet.get('EmailAddress');
    }
    MaximumLength(max) {
        this.validationSet.set("MaximumLength", new RuleBuilderOptions());
        this.maximumLength = max;
        return this.validationSet.get('MaximumLength');
    }
    MinimumLength(min) {
        this.validationSet.set("MinimumLength", new RuleBuilderOptions());
        this.minimumLength = min;
        return this.validationSet.get('MinimumLength');
    }
    Number(min, max) {
        this.validationSet.set("Number", new RuleBuilderOptions());
        this.number = { min: min, max: max };
        return this.validationSet.get("Number");
    }
}

在调用NotEmpty()之后先将我对该字段非空校验的要求保存到 validationSet 里去,具体措施就是以验证名为key,以一个RuleBuilderOptions实例为value 存储到 validationSet 然后返回这个 RuleBuilderOptions,因为它能让我接着调用WithMessage(“”)

遗憾的是这样做了之后我发现我调用WithMessage(“”)后不能再接着调用其他的验证方法了。噢,我想到了,我可以给 RuleBuilderOptions 的构造函数添加一个参数,然后在new RuleBuilderOptions 的时候将this传进去 而new RuleBuilderOptions的地方只有

RuleBuilderInitial,这个this 也就自然而然的成了当前所要验证的那个字段的唯一 RuleBuilderInitial 实例,只要在WithMessage之后将这个this 返回回来一切似乎就大功告成了。

于是美滋滋的把代码改成了这样。

class RuleBuilderOptions {

    constructor(initial) {
        this.errorMessage = '';
        this.ruleBuilderInitial = initial;
    }

    WithMessage(errorMessage) {
        this.errorMessage = errorMessage;
        return this.ruleBuilderInitial;
    }
}
class RuleBuilderInitial {

    constructor() {   // T:验证的目标类型 TProperty:验证的属性类型
        //  以具体的验证方式作为唯一单位
        this.validationSet = new Map();
        this.length = undefined;
        this.must = undefined;
        this.maximumLength = undefined;
        this.minimumLength = undefined;
        this.number = undefined;
    }

    /*
     *  非空
     */
    NotEmpty() {
        this.validationSet.set("NotEmpty", new RuleBuilderOptions(this));
        return this.validationSet.get('NotEmpty');
    }
    Length(min, max) {
        this.validationSet.set("Length", new RuleBuilderOptions(this));
        this.length = { min: min, max: max };
        return this.validationSet.get("Length");
    }
    Must(expression) {
        this.validationSet.set("Must", new RuleBuilderOptions(this));
        this.must = expression;
        return this.validationSet.get("Must");
    }
    EmailAddress() {
        this.validationSet.set("EmailAddress", new RuleBuilderOptions(this));
        return this.validationSet.get('EmailAddress');
    }
    MaximumLength(max) {
        this.validationSet.set("MaximumLength", new RuleBuilderOptions(this));
        this.maximumLength = max;
        return this.validationSet.get('MaximumLength');
    }
    MinimumLength(min) {
        this.validationSet.set("MinimumLength", new RuleBuilderOptions(this));
        this.minimumLength = min;
        return this.validationSet.get('MinimumLength');
    }
    Number(min, max) {
        this.validationSet.set("Number", new RuleBuilderOptions(this));
        this.number = { min: min, max: max };
        return this.validationSet.get("Number");
    }
}

至此,我们已经可以这样配置了。

  class StudentValidator extends Validator {
            constructor(typeName) {
                super(typeName);
                this.ruleFor("name")
                    .NotEmpty()
                    .WithMessage("名称必填")
                    .MinimumLength(5)
                    .WithMessage("最短长度为5");

                this.ruleFor("age")
                    .NotEmpty()
                    .WithMessage("年龄必须")
                    .Number(0, 100)
                    .WithMessage("年龄必须在0-100岁之间");

                this.ruleFor("sex")
                    .NotEmpty()
                    .WithMessage("性别必填")
                    .Must(m => !m.sex)
                    .WithMessage("gxq is a man");
            }
        }

以为可以用了?还早呢,我先去吃个饭,晚上回来接着写,(#^.^#)。



You must enable javascript to see captcha here!

Copyright © All Rights Reserved · Green Hope Theme by Sivan & schiy · Proudly powered by WordPress

无觅相关文章插件,快速提升流量