码迷,mamicode.com
首页 > Web开发 > 详细

5.ASP.NET全栈开发之在Vue中使用前端校验(二)

时间:2018-07-20 21:17:14      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:mode   邮箱验证   head   ted   内容   设置   tar   范围   地址   

在全栈开发系列第三篇的时候有讲到使用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 你可以下载下来看看有何不同或有何问题,方便我们一起改进。

5.ASP.NET全栈开发之在Vue中使用前端校验(二)

标签:mode   邮箱验证   head   ted   内容   设置   tar   范围   地址   

原文地址:https://www.cnblogs.com/Gxqsd/p/9343421.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!