直接引用vee-validate校驗插件

直接在頁面引用vee-validate

源文件下載地址：http://www.bootcdn.cn/vee-validate/

官方api https://baianat.github.io/vee-validate/guide/rules.html#is-not

　　　　　　 .is-danger { border: 1px solid red; } .is-danger>span{//默認none，防止初始化時顯示{{error信息}} display: block; }

 注：vee-validate支持對象表示方法，支持動態取消校驗：

v-validate="{ required: !(brandBaseItem && brandBaseItem.logoName),//作為動態校驗規則 image: true, size: 300, ext: ['png', 'jpeg', 'jpg', 'bmp']}"

https://segmentfault.com/q/1010000013117209

 <script th:src="@{/js/vee-validate/vee-validate.min.js}"></script>
 <script th:src="@{/js/vee-validate/vee-zh_CN.js}"></script>

<input v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('phone') }" name="phone" type="text" placeholder="phone" />
    <br/>
    <span v-show="errors.has('phone')" style="display:none;color: red;font-size: 12px;">{{ errors.first('phone') }}</span> <br/> <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="email" /> <br/> <span v-show="errors.has('email')" style="color: red;font-size: 12px;">{{ errors.first('email') }}</span>

<script th:inline="javascript">
    /*<![CDATA[*/
//引入vue后，需要添加vee-validata的js和語言包文件(目前只用中文)

 VeeValidate.Validator.localize('zh_CN');
//js使用方式，指定語言、修改默認提示，添加自定義驗證
    VeeValidate.Validator.localize({

zh_CN:{
messages:{
    required:function (name) {
        return name+"不能為空！";
    },
    email:function () {
        return "郵箱格式無效"
    },
},//定義成我們需要的文字提示
    attributes:{
        email:'郵箱',
        phone: '手機',
    },
}

 }); VeeValidate.Validator.extend('phone',{ getMessage:function () { return "請輸入正確手機號！"; }, validate:function (value) { return /^1\d{10}$/.test(value); } }); Vue.use(VeeValidate);

var vue = new Vue({
    el: "#test",
    data: {
        submitDisabled: true,
        ruleForm: {

…………代碼省