</div>
</div>
<div>
<label>密码</label>
<input type="password" class="form-control" id="inputPassword3" 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>
为了排除无关内容对大家的影响，写这个例子的时候，博主排除了一切复杂的HTML结构和CSS样式，经过简单润色以后，这个例子的效果展示如下，果然GUI满足了人们颜控的一面，可让这个世界高速运行的是CLI，Bootstrap是博主这种“全栈工程师”的最爱之一。这种验证方式简直是人类本能的反应，可这恰好是最糟糕的一个例子，因为这个代码完全没法复用，可以想象得到，如果再继续增加针对密码强度，譬如大小写、数字等等的验证，这个代码会混乱成什么样子，所以，这是最简单的表单验证，同样是最糟糕的表单验证。
基于jQuery的表单验证
其实，如果不是因为老项目依赖jQuery，而新项目在某些地方又需要和老项目保持一致，有谁会喜欢在Vue的世界里使用jQuery呢？因为数据驱动和事件驱动，真的是两种不同的思想，我就见过因为监听不到某个事件而花费一整天时间的人……所以，这里使用jQuery的表单验证插件jQuery Validation，目的只有一个，即实现博主对自己的承诺，做一个和老项目一模一样的表单验证。官方这个示例最大的问题是，它的检验逻辑扩展性比较差，后端同学对这个应该有所体会啦，譬如实际业务中常常有邮箱、手机号、非空、数字、正则等等的验证规则，而后端常常采用基于Attribute的验证或者是FluentValidation这样的库，所以，核心问题是，能不能定义相应的验证规则。接下来，我们通过jQuery的表单验证插件来实现验证。
