表单验证是一个网站或者系统不可或缺的,也是非常重要的一环.使用人工匹配验证的话会非常的复杂,尤其对于大量表单验证更是如此.
当然有一些jQuery 表单验证的插件,或许用着还不错.但是,如果你不想在vue中引用jQuery的话,只得另寻他法.
目前也有一些基于vue表单验证的插件,一开始试用了几款效果不太理想,最后找到了一个比较的适合的 [color=#ff0000]vuerify[/color]

使用文档

Vuerify 是一款轻量级的数据校验 Vue 插件，同时支持 Vue 1 和 2。可以使用正则、函数定义校验规则，也可以调用全局设置的规则。 插件会在 Vue 实例上注册一个 $vuerify 对象，会对声明的数据进行 watch，实时校验数据合法性。 同时提供的指令还能方便的操作 DOM。

安装

javascript 代码

npm i vuerify -S

初始化插件

javascript 代码

import Vue from 'vue'
import Vuerify from 'vuerify'

Vue.use(Vuerify/*, 添加自定义规则，默认提供了 email, required, url 等规则 */)

添加自定义规则
javascript 代码

{
  phone: {
    test: /^\d{11}$/,
    message: '十一位手机号'
  }
}

全局添加自定义规则 demo如下
javascript 代码

import Vuerify from 'vuerify';
Vue.use(Vuerify, {
  phone: {
    test: /^\d{11}$/,
    message: '十一位手机号'
  }
});

使用

javascript 代码

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <form>
            <input type="text" v-model="username" placeholder="输入用户名">
            <input type="password" v-model="password" placeholder="请输入密码">
            <input type="password" v-model="rePass" placeholder="请确认密码">
            <input type="email" v-model="email" placeholder="输入邮箱">
            <input type="tel" v-model="phone" placeholder="输入电话">
            <input type="button" @click="handleSubmit" value="提交">
            <ul>
                <li v-for="(err, index) in errors" :key="index" v-text="err"></li>
            </ul>
        </form>

    </div>
</template>

<script>
export default {
    name: 'hello',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            username: '',
            password: '',
            rePass: '',
            email: '',
            phone: ''
        }
    },
    computed: {
        errors() {
            console.log(this.$vuerify);
            return this.$vuerify.$errors // 错误信息会在 $vuerify.$errors 内体现
        }
    },
    vuerify: {
        username: {
            test: /\w{4,}/,  // 自定义规则，可以是函数，正则或者全局注册的规则（填字符串）
            message: '至少 4 位字符'
        },
        password: 'required', // 使用全局注册的规则
        rePass: {
            test: function() {
                if (this.rePass !== this.password) {
                    return false;
                } else {
                    return  ture;
                }
            },
            message: '两次密码输入不一致'
        },
        email: [ // 支持传入数组
            'required',
            'email',
            { test: /@gmail/, message: '只能是谷歌邮箱' }
        ],
        phone: 'phone' // 使用全局自定义规则
    },
    methods: {
        handleSubmit() {
            if (this.$vuerify.check()) { // 手动触发校验所有数据
                // do something
                alert('验证通过');
            } else {
                alert('验证不通过');
            }
        }
    },
    mounted() {

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
    font-weight: normal;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}

</style>

当然如果我想把所有的验证的字段包含到一个验证对象中去呢? 好吧,没问题,如下demo,效果一样
javascript 代码

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <form>
            <input type="text" v-model="loginInfo.username" placeholder="输入用户名">
            <input type="password" v-model="loginInfo.password" placeholder="请输入密码">
            <input type="password" v-model="loginInfo.rePass" placeholder="请确认密码">
            <input type="email" v-model="loginInfo.email" placeholder="输入邮箱">
            <input type="tel" v-model="loginInfo.phone" placeholder="输入电话">
            <input type="button" @click="handleSubmit" value="提交">
            <ul>
                <li v-for="(err, index) in errors" :key="index" v-text="err"></li>
            </ul>
        </form>

    </div>
</template>

<script>
export default {
    name: 'hello',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            loginInfo: {
                username: '',
                password: '',
                rePass: '',
                email: '',
                phone: ''
            }
        }
    },
    computed: {
        errors() {
            console.log(this.$vuerify);
            return this.$vuerify.$errors // 错误信息会在 $vuerify.$errors 内体现
        }
    },
    vuerify: {
        'loginInfo.username': {
            test: /\w{4,}/,  // 自定义规则，可以是函数，正则或者全局注册的规则（填字符串）
            message: '至少 4 位字符'
        },
        'loginInfo.password': 'required', // 使用全局注册的规则
        'loginInfo.rePass': {
            test: function () {
                if (this.loginInfo.rePass !== this.loginInfo.password) {
                    return false;
                } else {
                    return true;
                }
            },
            message: '两次密码输入不一致'
        },
        'loginInfo.email': [ // 支持传入数组
            'required',
            'email',
            { test: /@gmail/, message: '只能是谷歌邮箱' }
        ],
        'loginInfo.phone': 'phone' // 使用全局自定义规则
    },
    methods: {
        handleSubmit() {
            if (this.$vuerify.check()) { // 手动触发校验所有数据
                // do something
                alert('验证通过');
            } else {
                alert('验证不通过');
            }
        }
    },
    mounted() {

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
    font-weight: normal;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}

</style>

对于具有两个及两个以上验证规则的字段,他的错误信息将包含在一个数组里,即使错误信息只有一条,同样包含在一个数组里面.
如果只有一个验证规则,那么错误信息将是一个字符串类型.

$vuerify 包含如下属性

name description type default Value
$errors 数据校验失败的错误信息, 例如 username 校验失败会返回 { username: ‘至少 4 位字符’ }；如果 username 是数组，那么这里返回的也是数组类型 Object {}
invalid 存在校验失败的字段 Boolean true
valid 不存在校验失败的字段 Boolean false
check 检查指定字段，传入数组，返回 Boolean Function(Array) -
clear 清空错误列表 Function -

具体API文档的话,见 帮助文档