<!-- template of LoginForm --> <template> <div> <h2>你好，请登录</h2> <div> <form> <div> <label for="inputEmail3">邮箱</label> <div> <input type="text" placeholder="Email" v-model="email" v-validate="'required|email'" data-vv-as="邮箱"/> <p role="alert" v-show="errors.has('email')">{{ errors.first('email') }}</p> </div> </div> <div rules="required"> <label for="inputPassword3">密码</label> <div> <input type="password" placeholder="Password" v-model="password" v-validate="'required|min:6'" data-vv-as="密码"/> <p role="alert" v-show="errors.has('password')">{{ errors.first('password') }}</p> </div> </div> <div> <div> <div> <label> <input type="checkbox" />记住密码 </label> </div> </div> </div> <div> <div> <button type="button" v-on:click="login()">登录</button> </div> </div> </form> </div> </div> </template> <!-- script of LoginForm --> <script> export default { name: "LoginForm", components: {}, data: () => ({ email: "", password: "" }), methods: { login: function() { } } }; </script> <!-- style of LoginForm --> <style scoped> .login { color: white; height: 38px; width: 300px; background-color: #2b669a; } </style>
可以看到，我们在关键的两个input控件上添加了v-validate和data-vv-as这两个属性。比如我们这里需要验证用户输入的邮箱是否合法、邮箱是否为空，那么我们就可以使用下面的语法：
<input type="text" placeholder="Email" v-model="email" v-validate="'required|email'" data-vv-as="邮箱"/> <p role="alert" v-show="errors.has('email')">{{ errors.first('email') }}</p>
这些语法在Vue中被称为指令，而data-vv-as则是HTML5中的一个特性，用来给提示信息中的字段起一个别名。实际上，这个插件里同样内置了一批常见的校验规则。当控件中的值不满足校验条件时，就会在errors中产生错误信息，所以，我们根据错误信息中是否包含指定字段来决定要不要展示错误信息，这就是这个插件的作用。运行这个例子，我们会得到下面的结果。
既然提到这类表单验证最难的地方在于扩展性，那么下面我们再来看看如何扩展一个新的校验规则，这里以最常见的手机号校验为例, 个人以为这是这个插件最为强大的地方：
Validator.extend('isMobile', { messages: { zh_CN: field => field + '必须是11位手机号码' }, validate: value => { return value.length === 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value) } })
相信通过今天这篇博客，大家应该对Vue里的表单验证有一点心得了。这类验证的库或者框架其实非常多，整合到Vue中要做的工作无外乎写一个插件，在控件触发相关事件或者表单提交的时候进行验证。作为一个Vue的新人，这个过程可谓是路漫漫其修远。你大概想不到，我是在凌晨加班加到凌晨两点半的情况下做完这几个示例的，最近这两三个月里加的班比我过去三年都多，这到底是好事还是坏事呢？有时候不知道自己还能不能坚持下去，往事已矣，人难免会感到迷茫的吧！
本文小结
这篇博客主要通过三个示例分享了Vue下表单校验的实现，而促使博主对这一切进行研究的原始动力，则是源于一个实际工作中通过Vue开发的新项目。前后端要不要分离、项目里要不要继续使用jQuery、该不该频繁地操作DOM，这其实是毫无关联地三件事情，而这种事情90%的人是完全不关心的，就像有一种看起来相当“成年人”的做法，出了事情第一时间不是去纠结谁的过错，而是问能不能马上解决以及解决问题需要多长时间。这看起来好像一点问题都没有，可不去在意事件本身对错的人，是因为这些问题不需要他去处理，利益相关和责任相关是完全不一样的，因为你不能一出问题全部都找到程序员这里，这项目又不是程序员一个人的。我关心这些无关紧要的问题，纯粹是因为我对自己做的东西有一种感情，我想做好它而已，我希望自己是个纯粹的人，而且可以一直纯粹下去，晚安！
您可能感兴趣的文章: