详解vue-validator(vue验证器)


Posted in Javascript onJanuary 16, 2017

官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html

github项目地址:https://github.com/vuejs/vue-validator

单独使用vue-validator的方法见官方文档,本文结合vue-router使用。

安装验证器

不添加自定义验证器或者无需全局使用的公用验证器,在main.js中安装验证器,使用 CommonJS 模块规范, 需要显式的使用 Vue.use() 安装验证器组件。

import Validator from 'vue-validator'
Vue.use(Validator)

与 vue-router 同时使用,必须在调用 router#map, router#start 等实例方法前安装验证。

若要自定义验证器,建一个js文件,在该文件中安装验证器组件。例如:validation.js

import Vue from 'vue'
import Validator from 'vue-validator'
Vue.use(Validator)
//自定义验证器

自定义验证器

官方提供的api如下

  • input[type="text"]
  • input[type="radio"]
  • input[type="checkbox"]
  • input[type="number"]
  • input[type="password"]
  • input[type="email"]
  • input[type="tel"]
  • input[type="url"]
  • select
  • textarea

但是以上的不一定满足我们的需求,这时就需要用到另一个全局api,用于注册和获取全局验证器。

Vue.validator( id, [definition] )

示例  定义validation.js  内容如下

import Vue from 'vue'
import Validator from 'vue-validator'
Vue.use(Validator)
//自定义验证器
//添加一个简单的手机号验证 
//匹配0-9之间的数字,并且长度是11位
Vue.validator('tel', function (val) {
 return /^[0-9]{11}$/.test(val)
});
//添加一个密码验证
//匹配6-20位的任何字类字符,包括下划线。与“[A-Za-z0-9_]”等效。
Vue.validator('passw', function (val) {
 return /^(\w){6,20}$/.test(val)
});

使用验证器

验证器语法

<validator name="validation">
  <input type="text" v-model='comment' id='comment' v-validate:comment="{ minlength: 3, maxlength: 15 }">
  <div>
   <span v-show="$validation.comment.minlength">不得少于3个字符</span>
   <span v-show="$validation.comment.maxlength">不得大于15个字符</span>
  </div>
 </validator>

默认情况下,vue-validator 会根据 validator 和 v-validate 指令自动进行验证。然而有时候我们需要关闭自动验证,在有需要时手动触发验证。如果你不需要自动验证,可以通过 initial 属性或 v-validate 验证规则来关闭自动验证。如下:

<validator name="validation">
   <input type="text" v-model='comment' id='comment' v-validate:comment="{ minlength: 3, maxlength: 15 }" detect-change="off" initial='off'>
   <div>
    <span v-show="$validation.comment.minlength">不得少于3个字符</span>
    <span v-show="$validation.comment.maxlength">不得大于15个字符</span>
   </div>
</validator>

Terminal 指令问题

<validator name="test_validator">
  <!-- @invalid:valid的逆 ,表示验证不通过 -->
  <input @invalid="passwInvalid" @valid="passwok" type="password" v-model='passw' id='passw' v-validate:passw="['passw']" detect-change="off" initial='off' placeholder='请输入密码'>
  <input @invalid="passwInvalid" @valid="passwok" type="password" v-model='passw2' id='passw2' v-validate:passw2="['passw']" detect-change="off" initial='off' placeholder='请输入密码'>
</validator>
<script>
//若是在main.js中导入 无需再次导入
//此处导入的是上面代码的validation.js
import validator from '../validator/validation'
export default{
  data(){
    return{
      comment:'',
      passw:'',
      passw2:''
    }
  },
  methods:{
    passwInvalid(){
      alert('只能输入6-20个字母、数字、下划线');
    },
    passwok(){
      //alert('验证码符合规范')
    }
  }
}
</script>

示例:用户注册验证

用了一个组件来显示提示信息

toast.vue

<template>
  <div v-show="toastshow" transition="toast" class="toast font-normal">
    {{toasttext}}
  </div>
</template>
<script>
export default{
  props:{
    //是否显示提示
    toastshow:{
      type:Boolean,
       required: false,
      default:function(){
        return false;
      }
    },
    //提示的内容
    toasttext:{
      type:String,
      required: false,
      default:function(){
        return 'no message';
      }
    },
    //显示的时间
    duration: {
      type: Number,
      default:3000,//默认3秒
      required:false
    }    
  },
  ready() {
    
  },
  watch:{
    toastshow(val){
      if (this._timeout) clearTimeout(this._timeout)
      if (val && !!this.duration) {
       this._timeout = setTimeout(()=> this.toastshow = false, this.duration)
      }
    }
  }
}
</script>
<style>
  .toast{
    position:absolute;
    left:50%;
    margin-left:-25%;
    bottom:30px;
    display:block;
    width:200px;
    height:auto;
    text-align:center;
    color:white;
    background-color:rgba(0,0,0,0.5);
    border-radius:10px;
    z-index:10;
    transform:scale(1);
    padding:5px;
  }
  .toast-transition{
    transition: all .3s ease;
  }
  .toast-enter{
    opacity:0;
    transform:scale(0.1);
  }
  .toast-leave{
    opacity:0;
    transform:scale(0.1);
  }
</style>

注册用户:假如我们需要填写手机号和输入两次密码

<template>
  <div class='register-box'>
    <!-- 组件:用于显示提示信息 -->
    <Toast :toastshow.sync="toastshow" :toasttext="toasttext"></Toast>
    <validator name="validation_register1">
    <div class='register1'>
      <div class='pd05'>
      <input @invalid="telonInvalid" initial="off" detect-change="off" v-model="telphone" id="telphone" type="tel" class='phone-number' v-validate:telphone="['tel']" placeholder='请输入手机号码'>
      </div>
      <div class='pd05'>
        <input @invalid="passwInvalid" v-model="passw1" initial="off" detect-change="off" id="passw1" type="password" v-validate:passw1="['passw']" class='password-number' placeholder='请输入密码'>
      </div>
      <div class='pd05'>
        <input @invalid="passwInvalid" v-model="passw2" initial="off" detect-change="off" id="passw2" type="password" v-validate:passw2="['passw']" class='password-number' placeholder='请输入密码'>
      </div>
      <a class='greenBtn' v-on:click='register_user()'>下一步</a>
    </div>
    </validator>
  </div>
</template>
<script>
//导入validation.js 此处的validation.js就是上文中validation.js的内容
import validator from '../validator/validation';
//导入显示提示信息的组件
import Toast from '../components/toast.vue';
export default{  
  components: {
    //注册组件
     Toast
   },
  data(){
    return{
      telphone:'',//电话号码
      toastshow:false,//默认不现实提示信息
      toasttext:'',//提示信息内容
      passw1:'',//首次输入密码
      passw2:''//再次输入密码
    }
  },
  methods:{
    //手机号验证失败时执行的方法
    telonInvalid(){
      //设置提示信息内容
      this.$set('toasttext','手机不正确');
      //显示提示信息组件
      this.$set('toastshow',true);
    },
    //密码验证失败时执行的方法
    passwInvalid(){
      this.$set('toasttext','只能输入6-20个字母、数字、下划线');
      this.$set('toastshow',true);
    },  
    register_user(){
      var that = this;
      var telephones = that.$get('telphone');
      var pw1 = that.$get('passw1');
      var pw2 = that.$get('passw2') 
      that.$validate(true, function () {      
        if (that.$validation_register1.invalid) {
          //验证无效
           that.$set('toasttext','请完善表单');
           that.$set('toastshow',true);
        }else{
           that.$set('toasttext','验证通过');
           that.$set('toastshow',true);
           //验证通过做注册请求
           /*that.$http.post('http://192.168.30.235:9999/rest/user/register',{'account':telephones,'pwd':pw1,'pwd2':pw2}).then(function(data){
            if(data.data.code == '0'){
              that.$set('toasttext','注册成功');
               that.$set('toastshow',true);
            }else{
              that.$set('toasttext','注册失败');
               that.$set('toastshow',true);
            }
          },function(error){
            //显示返回的错误信息
            that.$set('toasttext',String(error.status));
            that.$set('toastshow',true);
          })*/
        }
      })
      
    }
  }
}
</script>
<style>
.register-box{
  padding: 10px;
}
.pd05{
  margin-top: 5px;
}
.greenBtn{
  width: 173px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: red;
  color: #fff;
  margin-top: 5px;
}
</style>

若点击下一步,会提示“请完善表单”,因为验证不通过;若是文本框获得焦点后失去焦点则会提示相应的错误信息;若内容填写正确,则会提示验证通过并发送相应的请求。

效果如图

详解vue-validator(vue验证器)

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

Javascript 相关文章推荐
js中的内部属性与delete操作符介绍
Aug 10 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
微信小程序 数据访问实例详解
Oct 08 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
vue实现顶部菜单栏
Nov 08 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
Jan 16 #Javascript
webpack入门必知必会
Jan 16 #Javascript
angular+ionic 的app上拉加载更新数据实现方法
Jan 16 #Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 #Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 #Javascript
Javascript的this用法
Jan 16 #Javascript
jQuery向webApi提交post json数据
Jan 16 #Javascript
You might like
php设置session值和cookies的学习示例
2014/03/21 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
解决出现SoapFault (looks like we got no XML document)的问题
2017/06/24 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
Bootstrap使用基础教程详解
2016/09/05 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
JavaScript实现简单生成随机颜色的方法
2017/09/21 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
webpack4 升级迁移的实现
2018/09/12 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python类继承用法实例分析
2015/05/27 Python
python实现图片变亮或者变暗的方法
2015/06/01 Python
Python写的一个简单监控系统
2015/06/19 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
Python urllib request模块发送请求实现过程解析
2020/12/10 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
html5新特性与用法大全
2018/09/13 HTML / CSS
20世纪40年代连衣裙和复古服装:The Seamstress Of Bloomsbury
2018/07/24 全球购物
美国领先的宠物用品和宠物食品零售商:Petco
2020/10/28 全球购物
秘书行业自我鉴定范文
2013/12/30 职场文书
建房协议书
2014/04/11 职场文书
教师节演讲稿
2014/05/06 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
交通事故协议书范文
2014/10/23 职场文书
商场收银员岗位职责
2015/04/07 职场文书
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server