详解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 相关文章推荐
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
Feb 05 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 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 file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php输出xml属性的方法
2015/03/19 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
js使用心得分享
2015/01/13 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
基于Three.js实现360度全景图片
2018/12/30 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
《小松树和大松树》教学反思
2014/02/20 职场文书
村党支部书记承诺书
2014/05/29 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
银行员工考核评语
2014/12/31 职场文书
中秋晚会致辞
2015/07/31 职场文书