Go语言视频零基础入门到精通

admin

官方文档：http://vuejs.github.io/vue-validator/zh-cn/index.HTML
github项目地址：https://github.com/vuejs/vue-validator
单独使用vue-validator的方法见官方文档，本文结合vue-router使用。
安装验证器
不添加自定义验证器或者无需全局使用的公用验证器，在main.js中安装验证器，使用 CommonJS 模块规范, 需要显式的使用

1. Vue.use()

复制代码

安装验证器组件。

1. import Validator from "vue-validator"
2. Vue.use(Validator)

复制代码

与 vue-router 同时使用，必须在调用 router#map, router#start 等实例方法前安装验证。  
若要自定义验证器，建一个js文件，在该文件中安装验证器组件。例如：validation.js

1. import Vue from "vue"
2. import Validator from "vue-validator"
3. Vue.use(Validator)
4. //自定义验证器

复制代码

自定义验证器
官方提供的api如下

1. input[type="text"]
2. input[type="radio"]
3. input[type="checkbox"]
4. input[type="number"]
5. input[type="password"]
6. input[type="email"]
7. input[type="tel"]
8. input[type="url"]
9. select
10. textarea

复制代码

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

1. Vue.validator( id, [definition] )

复制代码

示例  定义validation.js  内容如下

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

复制代码

使用验证器
验证器语法

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

复制代码

默认情况下，

1. vue-validator

复制代码

会根据

1. validator

复制代码

和

1. v-validate

复制代码

指令自动进行验证。然而有时候我们需要关闭自动验证，在有需要时手动触发验证。如果你不需要自动验证，可以通过

1. initial

复制代码

属性或

1. v-validate

复制代码

验证规则来关闭自动验证。如下：

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

复制代码

Terminal 指令问题

1. <validator name="test_validator">
2.     <!-- @invalid：valid的逆 ，表示验证不通过 -->
3.     <input  @invalid="passwInvalid" @valid="passwok" type="password" v-model="passw" id="passw" v-validate:passw="["passw"]"  detect-change="off" initial="off" placeholder="请输入密码">
4.     <input  @invalid="passwInvalid" @valid="passwok" type="password" v-model="passw2" id="passw2" v-validate:passw2="["passw"]"  detect-change="off" initial="off" placeholder="请输入密码">
5. </validator>
6. <script>
7. //若是在main.js中导入  无需再次导入
8. //此处导入的是上面代码的validation.js
9. import validator from "../validator/validation"
10. export default{
11.     data(){
12.         return{
13.             comment:"",
14.             passw:"",
15.             passw2:""
16.         }
17.     },
18.     methods:{
19.         passwInvalid(){
20.             alert("只能输入6-20个字母、数字、下划线");
21.         },
22.         passwok(){
23.             //alert("验证码符合规范")
24.         }
25.     }
26. }
27. </script>

复制代码

示例：用户注册验证
用了一个组件来显示提示信息
toast.vue

1. <template>
2.     <div v-show="toastshow" transition="toast" class="toast font-normal">
3.         {{toasttext}}
4.     </div>
5. </template>
6. <script>
7. export default{
8.     props:{
9.         //是否显示提示
10.         toastshow:{
11.             type:Boolean,
12.               required: false,
13.             default:function(){
14.                 return false;
15.             }
16.         },
17.         //提示的内容
18.         toasttext:{
19.             type:String,
20.             required: false,
21.             default:function(){
22.                 return "no message";
23.             }
24.         },
25.         //显示的时间
26.         duration: {
27.             type: Number,
28.             default:3000,//默认3秒
29.             required:false
30.         }        
31.     },
32.     ready() {
33.         
34.     },
35.     watch:{
36.         toastshow(val){
37.             if (this._timeout) clearTimeout(this._timeout)
38.             if (val && !!this.duration) {
39.              this._timeout = setTimeout(()=> this.toastshow = false, this.duration)
40.             }
41.         }
42.     }
43. }
44. </script>
45. <style>
46.     .toast{
47.         position:absolute;
48.         left:50%;
49.         margin-left:-25%;
50.         bottom:30px;
51.         display:block;
52.         width:200px;
53.         height:auto;
54.         text-align:center;
55.         color:white;
56.         background-color:rgba(0,0,0,0.5);
57.         border-radius:10px;
58.         z-index:10;
59.         transform:scale(1);
60.         padding:5px;
61.     }
62.     .toast-transition{
63.         transition: all .3s ease;
64.     }
65.     .toast-enter{
66.         opacity:0;
67.         transform:scale(0.1);
68.     }
69.     .toast-leave{
70.         opacity:0;
71.         transform:scale(0.1);
72.     }
73. </style>

复制代码

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

1. <template>
2.     <div class="register-box">
3.         <!-- 组件:用于显示提示信息 -->
4.         <Toast :toastshow.sync="toastshow" :toasttext="toasttext"></Toast>
5.         <validator name="validation_register1">
6.         <div class="register1">
7.             <div class="pd05">
8.             <input @invalid="telonInvalid" initial="off" detect-change="off" v-model="telphone" id="telphone" type="tel" class="phone-number" v-validate:telphone="["tel"]"  placeholder="请输入手机号码">
9.             </div>
10.             <div class="pd05">
11.                 <input @invalid="passwInvalid" v-model="passw1" initial="off"  detect-change="off" id="passw1" type="password" v-validate:passw1="["passw"]" class="password-number"  placeholder="请输入密码">
12.             </div>
13.             <div class="pd05">
14.                 <input @invalid="passwInvalid" v-model="passw2" initial="off" detect-change="off" id="passw2" type="password" v-validate:passw2="["passw"]" class="password-number"  placeholder="请输入密码">
15.             </div>
16.             <a class="greenBtn" v-on:click="register_user()">下一步</a>
17.         </div>
18.         </validator>
19.     </div>
20. </template>
21. <script>
22. //导入validation.js  此处的validation.js就是上文中validation.js的内容
23. import validator from "../validator/validation";
24. //导入显示提示信息的组件
25. import Toast from "../components/toast.vue";
26. export default{   
27.     components: {
28.         //注册组件
29.           Toast
30.       },
31.     data(){
32.         return{
33.             telphone:"",//电话号码
34.             toastshow:false,//默认不现实提示信息
35.             toasttext:"",//提示信息内容
36.             passw1:"",//首次输入密码
37.             passw2:""//再次输入密码
38.         }
39.     },
40.     methods:{
41.         //手机号验证失败时执行的方法
42.         telonInvalid(){
43.             //设置提示信息内容
44.             this.$set("toasttext","手机不正确");
45.             //显示提示信息组件
46.             this.$set("toastshow",true);
47.         },
48.         //密码验证失败时执行的方法
49.         passwInvalid(){
50.             this.$set("toasttext","只能输入6-20个字母、数字、下划线");
51.             this.$set("toastshow",true);
52.         },   
53.         register_user(){
54.             var that = this;
55.             var telephones = that.$get("telphone");
56.             var pw1 = that.$get("passw1");
57.             var pw2 = that.$get("passw2")  
58.             that.$validate(true, function () {            
59.                 if (that.$validation_register1.invalid) {
60.                     //验证无效
61.                       that.$set("toasttext","请完善表单");
62.                      that.$set("toastshow",true);
63.                 }else{
64.                      that.$set("toasttext","验证通过");
65.                      that.$set("toastshow",true);
66.                      //验证通过做注册请求
67.                      /*that.$http.post("http://192.168.30.235:9999/rest/user/register",{"account":telephones,"pwd":pw1,"pwd2":pw2}).then(function(data){
68.                         if(data.data.code == "0"){
69.                             that.$set("toasttext","注册成功");
70.                              that.$set("toastshow",true);
71.                         }else{
72.                             that.$set("toasttext","注册失败");
73.                              that.$set("toastshow",true);
74.                         }
75.                     },function(error){
76.                         //显示返回的错误信息
77.                         that.$set("toasttext",String(error.status));
78.                         that.$set("toastshow",true);
79.                     })*/
80.                 }
81.             })
82.             
83.         }
84.     }
85. }
86. </script>
87. <style>
88. .register-box{
89.     padding: 10px;
90. }
91. .pd05{
92.     margin-top: 5px;
93. }
94. .greenBtn{
95.     width: 173px;
96.     height: 30px;
97.     text-align: center;
98.     line-height: 30px;
99.     background: red;
100.     color: #fff;
101.     margin-top: 5px;
102. }
103. </style>

复制代码

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