</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox" />记住密码
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default login" 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" class="form-control" id="email" name="email" placeholder="Email" v-model="email" v-validate="'required|email'" data-vv-as="邮箱"/>
<p class="alert alert-danger" 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的新人，这个过程可谓是路漫漫其修远。你大概想不到，我是在凌晨加班加到凌晨两点半的情况下做完这几个示例的，最近这两三个月里加的班比我过去三年都多，这到底是好事还是坏事呢？有时候不知道自己还能不能坚持下去，往事已矣，人难免会感到迷茫的吧！
