直接引用vee-validate校验插件

直接在页面引用vee-validate

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

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

 <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="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:{message:{
            required:function (name) {
                return name+"不能为空！";
            },
            email:function () {
                return "邮箱格式无效"
            }
        }}
    });
    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: {

…………代码省

原文地址：https://www.cnblogs.com/SimonHu1993/p/9230704.html