vue表单验证插件 vuerify

使用文档

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 等规则 */)

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

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>  
    <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>

<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>  
    <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 包含如下属性

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