详解vue-validator（vue验证器）

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

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

Vue.validator( id, [definition] )

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>

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

<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.jsimport validator from '../validator/validation'export default{  data(){    return{      comment:'',      passw:'',      passw2:''    }  },  methods:{    passwInvalid(){      alert('只能输入6-20个字母、数字、下划线');    },    passwok(){      //alert('验证码符合规范')    }  }}</script>

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