当前位置 主页 > 服务器问题 > Linux/apache问题 >

    Vue快速实现通用表单验证功能

    栏目:Linux/apache问题 时间:2019-12-05 21:58

    本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载。博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用了Vue,依然需要通过jQuery去操作DOM。其次,只有有通过Rozar生成的DOM,譬如HtmlHelper,Vue的双向绑定就突然变得尴尬起来,更不用说,Rozar中的@语法和Vue中的@指令相互冲突的问题,原本可以直接用v-for生成列表,因为使用了HtmlHelper,突然一下子变得厌恶起来,虽然Rozar语法非常强大,可我依然没有在JavaScript里写C#的热情,因为实在太痛苦啦Orz……

    所以,想做好前后端分离,首先需要分离出一套前端组件库,做不到这一点,前后端分离就无从谈起,就像我们公司的项目,即使框架切换到.NET Core,可是在很长的一段时间里,我们其实还是再写MVC,因为所有的组件都是后端提供的HtmlHelper/TagHelper这种形式。我这次做项目的过程中,其实是通过jQuery实现了一部分组件,正因为如此,一个在前后端不分离时非常容易实现的功能,在前后端分离以后发现缺好多东西,就比如最简单的表单验证功能,即便你是在做一个新项目,为了保证产品在外观上的一致性,你还是得依赖老项目的东西,所以,这篇博客主要想说说前后端分离以后,Vue的时代怎么去做表单的验证。因为我不想测试同事再给我提Bug,问我为什么只有来自后端接口的验证,而没有来自前端页面的验证。我希望,在写下这篇博客之前,我可以实现和老项目一模一样的表单验证。如同CRUD之于后端,80%的前端都是在写Form表单,所以,这个事情还是挺有意思的。

    最简单的表单验证

    OK,作为国内最接“地气”的前端框架,Vue的文档可以说是相当地“亲民”啦!为什么这样说呢,因为其实在官方文档中,尤大已经提供了一个表单验证的示例,这个示例让我想起给某银行做自动化工具时的情景,因为这两者都是采用MVVM的思想,所以,理解起来是非常容易的,即:通过一个列表来存储错误信息,而这个错误信息会绑定到视图层,所以,验证的过程其实就是向这个列表里添加错误信息的过程。我们一起来看这个例子:

    <div>
      <h2>你好,请登录</h2>
      <div>
        <form >
          <div>
            <label>邮箱</label>
            <input type="text" class="form-control"  placeholder="Email" v-model="email">
            </div>
          </div>
          <div>
            <label>密码</label>
            <input type="password" class="form-control"  placeholder="Password" v-model="password">
          </div>
          <div>
            <button type="button" class="btn btn-default login" v-on:click="login()">登录</button>
          </div>
          <div v-if="errorList.length > 0">
            <div class="alert alert-danger" role="alert">{{errorList.join(';')}}</div>
          </div>
        </form>
      </div>
    </div>
    <script>
    var vm = new Vue({
      el: '#loginFrom',
      data: {
        email: "",
        password: "",
        errorList: []
      },
      methods: {
        validate: function () {
          this.errorList = []
          if (this.email == '') {
            this.errorList.push('请输入邮箱');
          } else {
            var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
            if (!reg.test(this.email)) {
              this.errorList.push('请输入有效的邮箱');
            }
          }
          if (this.password == '') {
            this.errorList.push('请输入密码');
          } else {
            if (this.password.length < 6) {
              this.errorList.push('密码长度不得少于6位');
            }
          }
    
          return this.errorList.length <= 0;
        },
        login: function () {
          if (this.validate()) {
            alert('登录成功');
          }
        }
      }
    });
    </script>