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 相关文章推荐
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 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
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
JS解析XML的实现代码
2009/11/12 Javascript
jQuery 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
2010/03/23 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
electron demo项目npm install安装失败的解决方法
2018/02/06 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
浅谈Ant Design Pro 菜单自定义 icon
2020/11/17 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
详解Python使用tensorflow入门指南
2018/02/09 Python
对python函数签名的方法详解
2019/01/22 Python
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
抄作业检讨书
2014/02/17 职场文书
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
献爱心倡议书
2014/04/14 职场文书
促销活动总结怎么写
2014/06/25 职场文书
个人授权委托书样本
2014/09/13 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2016年教师节感言
2015/12/09 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
JavaScript实例 ODO List分析
2022/01/22 Javascript
一文解答什么是MySQL的回表
2022/08/05 MySQL