亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue.js表單驗(yàn)證插件(vee-validate)的使用教程詳解

 更新時(shí)間:2019年05月23日 16:19:25   作者:xfcy514728  
這篇文章主要介紹了vue.js表單驗(yàn)證插件(vee-validate)的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

綜述

名稱:vee-validate

用途:簡單的 Vue.js 表單驗(yàn)證插件

官網(wǎng):地址

github:地址

特別提示

配合laravel使用特別好使 因?yàn)轵?yàn)證規(guī)則和laravel后端的驗(yàn)證規(guī)則一樣

插件既可以應(yīng)用于SPA也可以應(yīng)用于多頁面,通用性強(qiáng)

安裝

單頁安裝

npm install vee-validate --save

瀏覽器安裝

 <!-- unpkg -->
 <script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>

引入項(xiàng)目

單頁引入

import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);

瀏覽器引入

 <script src="path/to/vue.js"></script>
 <script src="https://unpkg.com/vee-validate@2.0.0-rc.7"></script>
 <script>
 Vue.use(VeeValidate); // good to go.
 </script>

基礎(chǔ)使用

<div class="column is-12">
 <label class="label" for="email">Email</label>
 <p :class="{ 'control': true }">
 <input v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }" name="email" type="text" placeholder="Email">
 <span v-show="errors.has('email')" class="help is-danger"></span>
 </p>
</div>

代碼解析

v-validate=”‘required email'”

v-validate 是由該插件提供的指令 作用于html上

“‘required email'” 字段驗(yàn)證的規(guī)則,注意雙引號之內(nèi)必須有單引號,多個(gè)規(guī)則之間用 連接

errors.first(‘email') email字段驗(yàn)證不通過時(shí)顯示相關(guān)聯(lián)的提示信息

驗(yàn)證規(guī)則

地址

進(jìn)一步學(xué)習(xí)

本地化

使用本地化功能可以讓錯(cuò)誤提示換成中文

單頁中使用

瀏覽器中使用

var dict = {
 zh_CN: {
 messages: {
 required: function(field){
 return '請輸入' + field ;
 },
 confirmed: function(field) {
 return '兩次輸入的密碼不一致';
 }
 },
 attributes: {
 OldPassword: '舊密碼',
 NewPassword: '新密碼',
 ConfirmNewPassword: '確認(rèn)密碼',
 }
 }
};
VeeValidate.Validator.localize('zh_CN', dict.zh_CN);
Vue.use(VeeValidate);
var app = new Vue({
// 省略
});

代碼解析

VeeValidate(瀏覽器引入js后建立了一個(gè)全局對象)

dict 翻譯的內(nèi)容,其中attributes對象表示字段,messages對象表示提示信息

本地化進(jìn)一步參考

常用方法

出錯(cuò)渲染

字段驗(yàn)證不通過時(shí)渲染提示信息時(shí)使用

errors.first(‘field') 顯示字段field的第一個(gè)出錯(cuò)信息
errors.collect(‘field') 顯示字段field的所有出錯(cuò)信息
errors.has(‘field') 判斷fileds字段是否檢驗(yàn)有誤
erros.all() 顯示所有的出錯(cuò)信息
errors.any() 判斷是否有錯(cuò)誤

手動(dòng)檢驗(yàn)

常用于數(shù)據(jù)提交(寫在vue的方法內(nèi)部)

this.$validator.validate(‘field'); 校驗(yàn)單個(gè)字段
this.$validator.validateAll(); 表單整體校驗(yàn)

代碼片段

 this.$validator.validateAll().then(function(result) {
  if (result) {
  //成功操作
  } else {
  // 失敗操作
  }
 })

檢驗(yàn)信息清除

常用于校驗(yàn)成功后清除錯(cuò)誤的提示信息

this.errors.clear();

API進(jìn)一步學(xué)習(xí)

總結(jié)

以上所述是小編給大家介紹的vue.js表單驗(yàn)證插件(vee-validate)的使用教程詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • vue-element-admin登錄攔截設(shè)置白名單方式

    vue-element-admin登錄攔截設(shè)置白名單方式

    這篇文章主要介紹了vue-element-admin登錄攔截設(shè)置白名單方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue-cli3.0之配置productionGzip方式

    vue-cli3.0之配置productionGzip方式

    這篇文章主要介紹了vue-cli3.0之配置productionGzip方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-05-05
  • Vuex 單狀態(tài)庫與多模塊狀態(tài)庫詳解

    Vuex 單狀態(tài)庫與多模塊狀態(tài)庫詳解

    這篇文章主要介紹了Vuex 單狀態(tài)庫與多模塊狀態(tài)庫詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2018-12-12
  • 如何給element添加一個(gè)抽屜組件的方法步驟

    如何給element添加一個(gè)抽屜組件的方法步驟

    這篇文章主要介紹了如何給element添加一個(gè)抽屜組件的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • Vue開發(fā)中遇到的跨域問題及解決方法

    Vue開發(fā)中遇到的跨域問題及解決方法

    在本篇文章里小編給大家整理的是關(guān)于Vue開發(fā)中遇到的跨域問題及解決方法,需要的朋友們可以學(xué)習(xí)下。
    2020-02-02
  • vue3+vite+ts使用monaco-editor編輯器的簡單步驟

    vue3+vite+ts使用monaco-editor編輯器的簡單步驟

    因?yàn)楫呍O(shè)需要用到代碼編輯器,根據(jù)調(diào)研,我選擇使用monaco-editor代碼編輯器,下面這篇文章主要給大家介紹了關(guān)于vue3+vite+ts使用monaco-editor編輯器的簡單步驟,需要的朋友可以參考下
    2023-01-01
  • uniapp使用條件編譯#ifdef(跨平臺設(shè)備兼容)

    uniapp使用條件編譯#ifdef(跨平臺設(shè)備兼容)

    這篇文章主要介紹了uniapp使用條件編譯#ifdef(跨平臺設(shè)備兼容),需要的朋友可以參考下
    2022-12-12
  • 前端vue中實(shí)現(xiàn)嵌入代碼編輯器的詳細(xì)代碼

    前端vue中實(shí)現(xiàn)嵌入代碼編輯器的詳細(xì)代碼

    隨著Web技術(shù)的不斷發(fā)展,前端開發(fā)也正日新月異,下面這篇文章主要給大家介紹了關(guān)于前端vue中實(shí)現(xiàn)嵌入代碼編輯器的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-07-07
  • elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題

    elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題

    這篇文章主要介紹了elementUI動(dòng)態(tài)表單?+?el-select?按要求禁用問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • 淺談el-table中使用虛擬列表對對表格進(jìn)行優(yōu)化

    淺談el-table中使用虛擬列表對對表格進(jìn)行優(yōu)化

    我們會經(jīng)常使用表格,如果數(shù)據(jù)量大就直接可以分頁,如果多條可能會影響表格的卡頓,那么應(yīng)該如何進(jìn)行優(yōu)化,感興趣的可以了解一下
    2021-08-08

最新評論