[非ES6方式]vue.js 纯静态页面+vee-validat

因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登陆 自定义验证