Vue表单验证插件Vue Validator使用方法详解


Posted in Javascript onApril 07, 2017

Vue-validator 是Vue的表单验证插件,供大家参考,具体内容如下

Vue版本: 1.0.24
Vue-validator版本: 2.1.3

基本使用

<div id="app">
 <validator name="validation">
  <form novalidate>
   <div class="username-field">
    <label for="username">username:</label>
    <input type="text" id="username" v-validate:username="['required']" />
   </div>
   <div class="comment-filed">
    <label for="comment">comment:</label>
    <input type="text" id="comment" v-validate:comment="{maxlength: 256}" />
   </div>
   <div class="errors">
    <p v-if="$validation.username.required">请输入你的名字</p>
    <p v-if="$validation.comment.maxlength">您的评论太长了</p>
   </div>
   <input type="submit" value="send" v-if="$validation.valid" />
  </form>
 </validator>
</div>


<script src="//cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

 new Vue({
  el: '#app'
 });

</script>

将要验证的表单包裹在validator自定义元素指令中,而在要验证的表单控件元素的 v-validate 属性上绑定相应的校验规则。

验证结果会保存在组建实例的 $validation 属性下。 $validation 是由 validator 元素和 name 属性和 $ 前缀组件

验证结果结构

{
 // 表单整体验证
 "valid": false, // 字段校验是否通过 
 "invalid": true, // valid 取反
 "touched": false, // 校验字段所在元素获得通过焦点时返回true,否则返回false
 "untouched": true, // touched 取反
 "modified": false, // 当元素值与初始值不同时返回true,否则返回false
 "dirty": false, // 字段值改变过至少一次返回true,否则返回false 
 "pristine": true, // dirty 取反
 // 字段单一验证
 "username": {
  "required": true,
  "modified": false,
  "pristine": true,
  "dirty": false,
  "untouched": true, 
  "touched": false,
  "invalid": true,
  "valid": false
 },
 "comment": {
  "maxlength": false,
  "modified": false,
  "pristine": true,
  "dirty": false,
  "untouched": true,
  "touched": false,
  "invalid": false,
  "valid": true
 }
}

校验结果由两部分组成。表单整体校验结果和单个字段校验结果。

验证器语法

v-validate 指令语法:

v-validate[:field]=”array literal | object literfal | binding”

校验字段名field

field用来标识校验字段,之后可以用该字段来引用校验结果

v-validate 指令用来定义校验规则,其值可以是数组字面量,对象字面量,组件实例数组属性名。

数组字面量

当校验器不需要额外参数时,可以使用数组字面量形式,如 required 校验器,只要出现就带I表该校验器所在元素是必填项。

<div id="app">
 <validator name="validation">
  <form novalidate>
   Zip: <input type="text" v-validate:zip="['required']" /><br />
   <div>
    <span v-if="$validation.zip.required">邮政编码是必填项</span>
   </div>
  </form>
 </validator>
</div>

对象字面量

对象字面量语法适合需要额外参数的校验器。如限制输入长度的校验器 minlength,需要说明限制长度多少。

<div id="app">
 <validator name="validation">
  <form novalidate>
   ID: <input type="text" v-validate:id="{ required:true, minlength: 3, maxlength: 16 }" />
   <br />
   <div>
    <p v-if="$validation.id.required">ID不能为空</p>
    <p v-if="$validation.id.minlength">你的ID名字太短</p>
    <p v-if="$validation.id.maxlength">你的ID名字太长</p>
   </div>
   <input type="submit" value="send" v-if="$validation.valid" />
  </form>
 </validator>
</div>

还可以用 对象字面量语法通过 rule 字段来自定义验证规则

<div id="app">
 <validator name="validation">
  <form novalidate>
   ID: <input type="text" v-validate:id="{minlength: {rule: 3}, required: true, maxlength: {rule: 16}}" />
   <br />
   <div>
    <p v-if="$validation.id.required">ID不能为空</p>
    <p v-if="$validation.id.minlength">你的ID名字太短</p>
    <p v-if="$validation.id.maxlength">你的ID名字太长</p>
   </div>
   <input type="submit" value="send" v-if="$validation.valid" />
  </form>
 </validator>
</div>

实例数据属性

v-validate 的值可以是组建实例的数据属性。这样可以用来动态绑定校验规则。

<div id="app">
 <validator name="validation">
 <form novalidate>
  ID: <input type="text" v-validate:id="rules" /><br />
  <div>
   <p v-if="$validation.id.required">不能为空</p>
   <p v-if="$validation.id.minlength">你的ID太短</p>
   <p v-if="$validation.id.maxlength">你的ID太长</p>
  </div>
 </form>
 </validator>
</div>

<script src="//cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

 new Vue({
  el: '#app',
  data: {
   rules: {
    required: true,
    minlength: 3,
    maxlength: 16
   }
  }
 });
 
</script>

内置校验规则

vue-validator 内置一些常用的验证规则:

  • required — 输入值不能为空
  • pattern — 必须匹配pattern表示的正则表达式
  • minlength — 输入值长度不能小于minlength表示的值
  • maxlength — 输入的值不能大于maxlength表示的值
  • min — 输入值不能小于min表示的值
  • max — 输入值不能大于max表示的值

与v-model同时使用

vue-validator会自动校验通过v-model动态设置的值。

<div id="app">
 <validator name="validation">
  <form novalidate>
   message: <input type="text" v-model="msg" v-validate:message="{required: ture, minlength: 8}" />
   <br />
   <p v-if="$validation.message.required">message不能为空</p>
   <p v-if="$validation.message.minlength">message输入太长位数</p>
  </form>
 </validator>
</div>

<script src="//cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

 var vm = new Vue({
  el: '#app',
  data: {
   msg: ''
  }
 });
 
 setTimeout(function () {
  vm.msg = 'hello world!';
 }, 2000);
 
</script>

重置校验结果

通过在Vue组件实例上调用$resetValidation();方法来动态重置校验结果。

<div id="app">
 <validator name="validation">
  <form novalidate>
   <div class="username-field">
    <label for="username">username:</label>
    <input type="text" id="username" v-validate:username="['required']" />
   </div>
   <div class="comment-filed">
    <label for="comment">comment:</label>
    <input type="text" id="comment" v-validate:comment="{maxlength: 256}" />
   </div>
   <div class="errors">
    <p v-if="$validation.username.required">用户名不能为空</p>
    <p v-if="$validation.comment.maxlength">输入文字超过256个</p>
    <input type="submit" value="send" v-if="$validation.valid" />
    <button type="button" @click="onReset">Reset Validation</button>
   </div>
   <pre>{{$validation | json}}</pre>
  </form>
 </validator>
</div>

<script src="//cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
 
 new Vue({
  el: '#app',
  methods: {
   onReset: function () {
    this.$resetValidation();
   }
  }
 });
 
</script>

复选框checkbox

<div id="app">
 <validator name="validation">
  <form novalidate>
   <h1>调查</h1>
   <fieldset>
    
    <legend>请选择水果</legend>
    <input type="checkbox" id="apple" value="apple" v-validate:fruits="{
     required: { rule: true, message: requiredErrorMsg },
     minlength: { rule: 1, message: minlengthErrorMsg },
     maxlength: { rule: 2, message: maxlengthErrorMsg }
     }" />
     
    <label for="apple">Apple</label>
    <input type="checkbox" id="orange" value="orange" v-validate:fruits />
    <label for="orange">Orange</label>
    <input type="checkbox" id="grape" value="grape" v-validate:fruits />
    <label for="grape">Grape</label>
    <input type="checkbox" id="banana" value="banana" v-validate:fruits />
    <label for="banana">Banana</label>
    
    <ul class="errors">
     <li v-for="msg in $validation.fruits">
      <p>{{msg | json}}</p>
     </li>
    </ul>
   </fieldset>
  </form>
 </validator>
</div>

<script src="//cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
 
 new Vue({
  el: '#app',
  computed: {
   requiredErrorMsg: function () {
    return '请选择水果';
   },
   minlengthErrorMsg: function () {
    return '请选择至少1个水果!';
   },
   maxlengthErrorMsg: function () {
    return '请选择最多2个水果!';
   }
  }
 });
 
</script>

下拉类表select

<div id="app">
 
 <validator name="validation">
  <form novalidate>
   <select v-validate:lang="{required: true}">
    <option value="">请选择语言</option>
    <option value="javascript">javascript</option>
    <option value="php">php</option>
    <option value="node">node</option>
   </select>
   <div class="errors">
    <p v-if="$validation.lang.required">不能为空!</p>
   </div>
  </form>
 </validator>
 
</div>

<script src="//cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
 
 new Vue({
  el: '#app'
 });
 
</script>

校验状态class

各校验状态都有其对应的class(默认) 也可以自定义校验状态class

<validator name="validation" :classes="{touched: 'touehc-validator', dirty: 'dirty-validator'}">
 <label for="username">username</label>
 <<input type="text" id="username" :classes="{valid: 'valid-username', invalid: 'invalid-username'}" v-validate:username="{required: {rule: true, message: 'required you name!'}}">
</validator>
<!-- classes属性只能在validator元素或应用了v-validate的元素上使用有效 -->

分组校验

vue-validator支持分组校验。例如重复密码功能。

<div id="app">
 <validator name="validation" :groups="['passwordGroup']">
  <form novalidate>
   username: <input type="text" v-validate:username="['required']" /><br />
   password: <input type="password" v-validate:password="{ minlength: 8, required: true }" group="passwordGroup" /><br />
   comfirm password: <input type="password" v-validate:password-comfirm="{minlength: 8, required: true}" group="passwordGroup" />
   <div class="errors">
    <p v-if="$validation.username.required">用户名不能为空</p>
    <p v-if="$validation.password.required">密码不能为空</p>
    <p v-if="$validation.password.minlength">密码不能少于8位</p>
    <p v-if="$validation.password-comfirm.required">重复密码不能为空</p>
    <p v-if="$validation.password-comfirm.minlength">密码不能少于8位</p>
    <p v-if="$validation.passwordGroup.valid">密码不一致</p>
   </div>
  </form>
 </validator>
</div>

<script src="//cdn.bootcss.com/vue/1.0.24/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="//cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
 
 new Vue({
  el: '#app'
 });
 
</script>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
jquery等宽输出文字插件使用介绍
Sep 18 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
动态创建按钮的JavaScript代码
Jan 29 Javascript
JS实现上下左右对称的九九乘法表
Feb 22 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
Jun 17 Javascript
JS数组去重详情
Nov 07 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 #Javascript
利用js的闭包原理做对象封装及调用方法
Apr 07 #Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 #Javascript
socket.io实现在线群聊功能
Apr 07 #Javascript
JS+HTML5 FileReader对象用法示例
Apr 07 #Javascript
微信小程序实现图片轮播及文件上传
Apr 07 #Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 #Javascript
You might like
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
js下将字符串当函数执行的方法
2011/07/13 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
JavaScript实现左右滚动电影画布
2020/02/06 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
Python 专题四 文件基础知识
2017/03/20 Python
django实现用户登陆功能详解
2017/12/11 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
python redis连接 有序集合去重的代码
2019/08/04 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
嘻哈珠宝品牌:KRKC&CO
2020/10/19 全球购物
大学生涯自我鉴定
2014/01/16 职场文书
临床护士自荐信
2014/01/31 职场文书
科技之星事迹材料
2014/06/02 职场文书
公司副总经理任命书
2014/06/05 职场文书
房屋买卖协议样本
2014/11/16 职场文书