vue表單校驗
1.npm安裝vue-validator
$ npm install vue-validator
程式碼示例:
var Vue=require("vue"); var VueValidator=require("vue-validator"); Vue.use(VueValidator);
2.直接使用script標籤引入vue.js
要下載vue-validator，那麼進入cdn的地址https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js把內容複製下來就好了。版本使用了2.1.3，不要搞錯了哦。
下面是簡單的小例子。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> Zip: <input type="text"v-validate:zip="['required']"><br /> <div> <span v-if="$myForm.zip.required">Zip code is required.</span> </div> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app", }) </script> </body> </html>
將要驗證的表單包裹在validator自定義元素指令中，而在要驗證的表單控制元件元素的 v-validate 屬性上繫結相應的校驗規則。
驗證結果會儲存在組建例項的
注意哦，這個校驗在2.1.3版本並不依賴v-model指令。
3.驗證結果的結構
使用上面的例子。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> Zip: <input type="text" v-validate:zip="['required']"><br /> <div> {{$myForm |json}} </div> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app", }) </script> </body> </html>
{{$myForm |json}} 顯示的內容是:
{ "valid": false,
"invalid": true,
"touched": false,
"untouched": true,
"modified": false,
"dirty": false,
"pristine": true,
"zip": {
//zip欄位的驗證結果
"required": true,
"modified": false,
"pristine": true,
"dirty": false,
"untouched": true,
"touched": false,
"invalid": true,
"valid": false
}
}
這些校驗屬性分別是什麼意思:
valid:欄位校驗是否通過
invalid:取反、
touched:校驗欄位所在元素獲得過焦點返回truke,否則返回false
untouched:touched取反
modified:當元素值與初始值是否相同
dirty:欄位值改變過至少一次返回true，否則返回false
pristine:dirty取反
表單整體校驗單獨的屬性:
errors:如果整體校驗沒通過，則返回錯誤欄位資訊陣列。否則返回undefined。
4.驗證器語法
v-validate[:field]="array literal | object literal| bind"
(1)校驗欄位名field
vue-validator版本小於2，校驗依賴於v-model指令。2.0之後的版本使用v-validate指令。欄位的命名可使用連字元(-)，然後通過駝峰式命名法引用它。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> <h1>1.校驗的欄位為user-name，校驗的規則是最小長度6，最大長度12</h1> <input type="text" v-validate:user-name="{minlength:6,maxlength:12}"/> <div> <span v-show="$myForm.userName.minlength">Your comment is too short.</span> <span v-show="$myForm.userName.maxlength">Your comment is too long.</span> </div> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app", }) </script> </body> </html>
動態繫結校驗欄位:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> <p v-for="field in fields"> <label :for="field.id">{{field.label}}</label> <!--v-bind:for繫結for屬性的簡寫--> <input type="text" :id="filed.id" :placeholder="field.placeholder" field="{{field.name}}" v-validate="field.validate"/> </p> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app", data:{ fields:[ {id:"username",label:"username",name:"username",placeholder:"input your username",validate:{required:true,maxlength:16}} ] } }) </script> </body> </html>
(2)校驗規則定義
第一種，陣列字面量。
類似如下程式碼:
Zip: <input type="text" v-validate:zip="['required']">
第二種，物件字面量。
類似如下程式碼:
<input type="text" v-validate:user-name="{minlength:6,maxlength:12}"/>
物件字面量還可以通過rule欄位自定義驗證規則。
<input type="text" v-validate:user-name="{minlength:6,maxlength:{rule:12}"/>
第三種，例項資料屬性。
v-validate的值可以是元件例項的資料屬性，可用來動態繫結檢驗規則。其實就是把校驗的欄位換成變數，比較簡單。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> <h1>1.校驗的欄位為id，校驗的規則是最小長度6，最大長度12</h1> <input type="text" v-validate:id="rules"/> <div> <span v-show="$myForm.id.minlength">Your comment is too short.</span> <span v-show="$myForm.id.maxlength">Your comment is too long.</span> </div> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app", data:{ rules:{ minlength:3, maxlength:6 } } }) </script> </body> </html>
第四種，與terminal指令(比如v-if、v-for)同時使用。
Vue 通過遞迴遍歷 DOM 樹來編譯模組。但是當它遇到 terminal 指令時會停止遍歷這個元素的後代元素。這個指令將接管編譯這個元素及其後代元素的任務。v-if 和 v-for 都是 terminal 指令。因為v-validate指令不能與terminal指令同時使用，所以包裹在了div元素中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> <h1>1.可以看到，v-if指令包裹在div元素裡，並沒有和v-validator指令同時使用</h1> <div class="password"> <label for="password">password:</label> <input id="password" type="password" v-validate:password="['required']"/> <br/> {{$myForm|json}} </div> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app", data:{ enable:true } }) </script> </body> </html>
那麼如果使用錯誤的程式碼:
<div class="password"> <label for="password">password:</label> <input v-if="enable" id="password" type="password" v-validate:password="['required']"/> <br/> {{$myForm|json}} </div>
控制檯會報錯
另:可自動校驗通過v-model動態設定的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> Zip: <input type="text" v-model="zip" v-validate:zip="['required']"><br /> <div> 是否錯誤:{{$myForm.zip.required}} </div> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> var vm=new Vue({ el:"#app", data:{ zip:"" } }); setTimeout(function(){ vm.zip="hello world!"; },2000) </script> </body> </html>
顯示結果，等待兩秒之後，我們就看到v-model的值被設定上去，而且根據必填的規則，報錯資訊顯示false。
5.內建驗證規則有哪些？
(1)required校驗器適用的元素有input的text、radio、checkbox、number、password、email、tel、url、還有select、textarea。
對應的原始碼如下:
function required(val) { if (Array.isArray(val)) { if (val.length !== 0) { var valid = true; for (var i = 0, l = val.length; i < l; i++) { valid = required(val[i]); if (!valid) { break; } } return valid; } else { return false; } } else if (typeof val === 'number' || typeof val === 'function') { return true; } else if (typeof val === 'boolean') { return val; } else if (typeof val === 'string') { return val.length > 0; } else if (val !== null && (typeof val === 'undefined' ? 'undefined' : babelHelpers.typeof(val)) === 'object') { return Object.keys(val).length > 0; } else if (val === null || val === undefined) { return false; } }
它是通過typeof判斷各個型別的。
(2)pattern是正則匹配校驗器，適用的元素有text、number、password、email、tel、url型別的input和textarea。
/** * pattern * * This function validate whether the value matches the regex pattern * * @param val * @param {String} pat * @return {Boolean} */ function pattern(val, pat) { if (typeof pat !== 'string') { return false; } var match = pat.match(new RegExp('^/(.*?)/([gimy]*)$')); if (!match) { return false; } return new RegExp(match[1], match[2]).test(val); }
正則匹配的原始碼
(3)minlength是最小長度校驗器，適用的元素有text、checkbox、number、password、email、tel、url型別的input和select、textarea。
(4)maxlength是最大長度校驗器，適用的元素有text、checkbox、number、password、email、tel、url型別的input和select、textarea。
(5)min是最小長度校驗器，適用的元素有text、number型別的input和textarea。
(6)max是最小長度校驗器，適用的元素有text、number型別的input和textarea。
6.重置校驗結果
Vue元件例項上呼叫$resetValidation()方法來動態重置校驗結果。
7.checkbox、radio和select的使用例子
checkbox的DEMO:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> <div>你喜歡哪一種水果？</div> <div> 蘋果:<input id="apple" type="checkbox" value="apple" v-validate:fruits="{ required:{rule:true,message:requiredErrorMsg}, maxlength:{rule:1,message:maxlengthErrorMsg}, minlength:{rule:2,message:minlengthErrorMsg} }"/> </div> <div> 橘子:<input id="orange" type="checkbox" value="orange" v-validate:fruits/> </div> <div> 葡萄:<input id="grape" type="checkbox" value="grape" v-validate:fruits/> </div> <div> 香蕉:<input id="banana" type="checkbox" value="banana" v-validate:fruits /> </div> <div>{{$myForm.fruits.errors|json}}</div> <ul class="errors"> <li v-for="msg in $myForm.fruits.errors"> {{msg.message}} </li> </ul> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app", computed:{ requiredErrorMsg:function(){ return "Required fruit!!" }, minlengthErrorMsg:function(){ return "please choose at least 1 fruit!!" }, maxlengthErrorMsg:function(){ return "please choose at most 2 fruits!!" } } }) </script> </body> </html>
單選按鈕的demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> <div>你喜歡哪一種水果？</div> <div> 蘋果:<input id="apple" type="radio" value="apple" v-validate:fruits="{ required:{rule:true,message:requiredErrorMsg} }"/> </div> <div> 橘子:<input id="orange" type="radio" value="orange" v-validate:fruits/> </div> <div> 葡萄:<input id="grape" type="radio" value="grape" v-validate:fruits/> </div> <div> 香蕉:<input id="banana" type="radio" value="banana" v-validate:fruits /> </div> <div>{{$myForm.fruits.errors|json}}</div> <ul class="errors"> <li v-for="msg in $myForm.fruits.errors"> {{msg.message}} </li> </ul> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app", computed:{ requiredErrorMsg:function(){ return "Required fruit!!" } } }) </script> </body> </html>
沒有選擇任何選項就會報錯:
下拉列表select的DEMO:
v-validate指令使用在select標籤上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> <select v-validate:city="{required:true}"> <option value="">請選擇你最喜歡的內地城市</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="chengdu">成都</option> <option value="hangzhou">杭州</option> <option value="suzhou">蘇州</option> <option value="shenzhen">深圳</option> </select> <div v-if="$myForm.city.required"> required </div> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app" }) </script> </body> </html>
8.校驗狀態和分組校驗
(1)各校驗狀態對應的class
valid對應的class是valid。
invalid對應的class是invalid。
touched對應的class是touched。
untouched對應的class是untouched。
pristine對應的class是pristine。
dirty對應的class是dirty。
modified對應的class是modified。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> <input id="username" type="text" v-validate:username="{ required:{rule:true,message:'require your name!'} }"/> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app" }) </script> </body> </html>
上面的程式碼 <input id=”username” type=”text” v-validate:username=”{ 程式碼在頁面初始化之後，會給input新增上一些類名，如下截圖:
(2)自定義校驗狀態class
使用classes屬性，他只能用在validator屬性上或者使用了v-validate的元素上。
<validator name="myForm" :classes="{touched:'touched-validator',dirty:'dirty-validator'">
(3)在v-validate指令的包裹元素使用校驗狀態
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm" :classes="{touched:'touched-validator',dirty:'dirty-validator'}"> <form novalidate> <div v-validate-class class="username"> <input id="username" type="text" v-validate:username="{ required:{rule:true,message:'require your name!'} }"/> </div> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app" }) </script> </body> </html>
只是在div上使用了v-validate-class，校驗狀態在頁面初始化之後就可以看到一些類名了。
(4)分組校驗
vue-validator支援分組校驗。如輸入密碼時，可以將第一次輸入密碼與再次輸入密碼的確認放入同一個校驗組內，只有兩次校驗都通過了，該組校驗才算通過。validator元素使用groups屬性，要校驗的input框使用group屬性。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm" :groups="['passwordGroup']"> <div> password:<input type="password" group="passwordGroup" v-validate:password="{minlength:4,required:true}"/> </div> <div> confirm:<input type="password" group="passwordGroup" v-validate:password-confirm="{minlength:4,required:true}" /> <div>passwordGroup校驗:{{$myForm.passwordGroup.valid}}</div> </div> <!--只有password和confirm都通過校驗，表單的密碼組才會通過校驗--> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app" }) </script> </body> </html>
9.validator-errors元件的使用
在之前的例子中使用v-for指令來遍歷輸出錯誤資訊。其實vue-validator提供了validator-errors元件能更便捷的輸出錯誤資訊的。
使用方法:validator-errros指令，提供動態繫結的validation屬性就好了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> <div> username:<input id="username" type="text" v-validate:username="{ required:{rule:true,message:'require your name!'} }"/> </div> <div class="errors"> <validator-errors :validation="$myForm"></validator-errors> </div> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> new Vue({ el:"#app" }) </script> </body> </html>
頁面初始化後的顯示結果:
不喜歡預設的錯誤資訊模板，可以自定義。
(1)component模板
除了使用validator-errors指令，動態繫結validation屬性，還要繫結component元件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <validator name="myForm"> <form novalidate> <div> username:<input id="username" type="text" v-validate:username="{ required:{rule:true,message:'require your name!'} }"/> </div> <div class="errors"> <validator-errors :validation="$myForm" :component="'custom-error'"></validator-errors> </div> </form> </validator> </div> <script src="js/vue.js"></script> <script src="js/vue-validator.js"></script> <script> Vue.component("custom-error",{ props:['field','message'], //這裡的屬性可以使用filed,validator,message template:"<p>{{field}}報錯資訊:<span style='color:red;'>{{message}}</span></p>" }) new Vue({ el:"#app" }) </script> </body> </html>
相關推薦
Vue 表單校驗 vee-validate
function eal for ble this code 文字 email onf gitHub 地址：https://github.com/baianat/vee-validate 官網API 地址：https://baianat.github.io/vee-val
vue表單校驗
1.npm安裝vue-validator $ npm install vue-validator 程式碼示例: var Vue=require("vue"); var VueValidator=require("vue-validator"); Vue
vue+element中自定義表單校驗特殊字元
本次專案基於vue和element-ui，需要在前端使用者輸入的時候去校驗輸入的內容中是否含有特殊符號，如果有，則提示使用者不支援輸入特殊符號。 校驗規則方法 export function checkSpecificKey(str) { var special
利用Vue計算資料屬性實現簡單的表單校驗
計算資料屬性(官網稱呼),又叫動態資料繫結(相對於靜態資料繫結而言).可以在dom渲染之前修改資料.按照官網的解釋,計算資料屬性是為了簡化模板的運算邏輯.從而利於維護.把複雜的邏輯繫結在computed裡.當然,利用它也可以做很多事情.比如單選,全選的實現.今
JQuery中內容操作函數、validation表單校驗
調用方法 scrip 註意 語言 rul asc javascrip 最前面插入 獲取 JQuery:內容體拼接（可以直接拼接元素節點和內容節點） JQuery實現： 方案1：A.append(B); == B.appendTo(A);A的後面拼接B
表單校驗常用原生js庫
rim pro fun 常用 ltrim turn () js庫 his 1.字符串去除左右空格繼承形式// 除去左右空格String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g,
常用表單校驗
通過 let div 返回 letter 常用 fun als 英文 /*用途：檢查輸入字符串是否只由英文字母和數字組成 輸入：obj 字符串 返回：如果通過驗證返回true,否則返回false*/ function isNumberOrLetter(obj){
Angular 表單校驗
result tex lar uil img 輸入 password value mod 1.html <form [formGroup]="formModel" (submit)="submit()"> <div> 用戶名
JavaScript學習——完善註冊頁面表單校驗
函數 提示 步驟 表格 ges function img 但是 最終 1、之前我們已經使用彈出框的方式實現了表單校驗的功能，但是此種方式用戶體驗效果很差 我們希望做成把提示信息和校驗結果放在輸入欄的後面。 2、步驟分析 （此案例基於HTML&CSS——網站註冊頁面實
表單校驗的值$valid、$invalid、$pristine和$dirty
狀態 ng- 愛好 定義 ida from 用戶操作 num $set angular內置了一套表單校驗，其中包含幾個狀態 ① valid、invalid、pristine和dirty valid標記表單元素有效； invalid標記表單元素無效； pristi
表單校驗
長度 username clas 電話 增加 use rul action pwd 1、form表單驗證 <!DOCTYPE html> <html> <head lang="en"> <meta ch
Android註解方式實現表單校驗
view print tde try success lte ise rdb emp 在開發中總會遇到輸入框的輸入規則限制 比如 電話輸入框電話號碼的校驗，密碼規則的校驗等 ，我們通常做法是提交操作時對每個輸入框的輸入內容進行校驗，很多的if else ，代碼看起來很亂，
案例15-基本的表單校驗使用validate
true 插件 control 位置 mes lin jquery插件 相關 顯示中文 1 導入插件 <!--引入jquery相關文件 --> <script src="js/jquery-1.11.3.min.js" type="text/ja
jQuery validate 設置失去焦點就校驗和失去焦點就表單校驗是否通過
checked 設置 ali idt date jquery req BE font js部分 html部分 自定義樣式： /*自定義validate覆蓋掉了 validate 裏面默認的顯示樣式*/ label.error{
JavaScript完成簡單的表單校驗案例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>註冊介面</title> <script type="text/javascript">
js 表單校驗
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE>
SpringMVC(八)使用@Valid註解實現後臺表單校驗
目錄 依賴jar 配置spring對@valid註解的支援 JSR303定義的校驗型別 如何使用 建立一個pojo類 controller中觸發引數校驗 硬編碼校驗 使用AOP的方式實現校驗 依賴jar <dep
[無心插柳]簡單實現常用的表單校驗函式
有意取而不得，失落而歸。無意間有所獲，未有喜悅，但珍惜依舊 1.前言 表單校驗，相信絕大部分的開發者會遇到過，網上也有很多外掛可使用。但當時想著就是簡單的校驗，沒必要引外掛，就自己寫一個簡單的函式。隨著校驗的需求多樣化，函式越來越大。有點輪子的雛形，算是無心插柳吧。現在也該分享出來了，和大家交流
JavaScript表單校驗
確認事件 事件觸發函式 函式操作元素 &nbs
第11講 11.2 SpringBoot表單校驗
8， 寫studentAdd.html 方法，匯入jquery，ajax 方式提交， <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit