因vee-validate用于静态页面开发的例子很少，也爬了很多坑，先简单写一下，后续会有更复杂的交互操作更新
如有更好的建议，欢迎求指导
由于时间关系，直接贴代码
<form action="" method="post" id="login_form">
<div class="logininput">
<input name="mobile" class="loginusername" placeholder="请输入您的手机号" v-model="login.mobile"
v-validate="'required|mobile'"
:class="{'input': true, 'is-danger': errors.has('mobile') }"/>
<span v-show="errors.has('mobile')" class="help is-danger" style='display:none'>{{ errors.first('mobile') }}</span>
<input type="password" name="password" class="loginuserpasswordt loginusername" placeholder="密码"
v-model="login.password" v-validate="'required'"
:class="{'input': true, 'is-danger': errors.has('password') }"/>
<span v-show="errors.has('password')"
class="help is-danger" style='display:none'>{{ errors.first('password') }}</span>
</div>
<div class="loginbtn">
<div class="loginsubmit">
<input type="submit" value="登录"/>
<div class="loginsubmiting">
<div class="loginsubmiting_inner">
</div>
</div>
</div>
<div class="logcheckbox fl">
<label>
<input id="bcdl" type="checkbox" checked="true"/>
保持登录
</label>
</div>
<div class="fr">
<a href="##">忘记密码?</a>
</div>
<div class="clear">
</div>
</div>
</form>
js引用
<script src="/static/js/vue/vue.js"></script>
<script src="/static/js/vue/vee-validate.js"></script>
<script src="/static/js/vue/locale/zh_CN.js"></script>
<script src="/static/js/vue/vue-resource.min.js"></script>
注意zh_CN.js的顺序，否者语言切换会失败
<script>
var isMobile = {
messages: {
zh_CN: function (field, args) {
return field + '必须是11位手机号码'
}
},
getMessage:function () {
return "wocha";
},
validate: function (value, args) {
if( value.length != 11 || !/^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value))
{
return false;
}
return true;
}
}
//自定义验证
VeeValidate.Validator.extend('mobile', isMobile);
//语言切换
Vue.use(VeeValidate,{
locale:"zh_CN"
});
//数据交互
Vue.use(VueResource);
var v = new Vue({
el: '.form',
data: {
login: {}
},
methods: {
//表单提交
submit: function () {
// 这里才是你的表单数据
var formData = JSON.stringify(this.login);
//请求地址
this.$http.post("/login",formData).then(function(data){
if(data.json().state=="success"){
setTimeout(function () {
console.log("success");
}, 2000);
}
}).catch(function(){
console.log("服务器异常！");
});
}
}
});
</script>
效果：
vee-validate登陆 自定义验证
vee-validate登陆 自定义验证
