vue+vue-validator 表單驗(yàn)證功能的實(shí)現(xiàn)代碼
更新時(shí)間：2017年11月13日 17:07:41 作者：徐同保
這篇文章主要介紹了vue+vue-validator 表單驗(yàn)證功能的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
官方文檔：http://vuejs.github.io/vue-validator/zh-cn/index.html
github項(xiàng)目地址：https://github.com/vuejs/vue-validator
下面給大家介紹vue+vue-validator 表單驗(yàn)證功能，具體代碼如下所示：
1.
<!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="https://unpkg.com/vue@1.0.26/dist/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js"></script>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>radio button validation example</title>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="../../dist/vue-validator.js"></script>
<style>
input.invalid { border-color: red; }
.errors { color: red; }
</style>
</head>
<body>
<div id="app">
<h1>Survey</h1>
<validity-group field="fruits" v-model="validation" :validators="{
required: { message: requiredErrorMsg }
}">
<legend>Which do you like fruit ?</legend>
<input id="apple" type="radio" name="fruit" value="apple" @change="handleValidate" @focusin="handleValidate">
<label for="apple">Apple</label>
<input id="orange" type="radio" name="fruit" value="orange" @change="handleValidate" @focusin="handleValidate">
<label for="orange">Orage</label>
<input id="grape" type="radio" name="fruit" value="grage" @change="handleValidate" @focusin="handleValidate">
<label for="grape">Grape</label>
<input id="banana" type="radio" name="fruit" value="banana" @change="handleValidate" @focusin="handleValidate">
<label for="banana">Banana</label>
<ul class="errors">
<li v-for="error in validation.result.errors">
<p :class="error.field + '-' + error.validator">{{error.message}}</p>
</li>
</ul>
</validity-group>
</div>
<script>
new Vue({
data: {
validation: {
result: {}
}
},
computed: {
requiredErrorMsg: function () {
return 'Required fruit !!'
}
},
methods: {
handleValidate: function (e) {
var $validity = e.target.$validity
$validity.validate()
}
}
}).$mount('#app')
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的vue+vue-validator 表單驗(yàn)證功能的實(shí)現(xiàn)代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())
在項(xiàng)目開(kāi)發(fā)中我遇到了日期范圍選擇器,兩種獲取當(dāng)前日期并做處理的寫(xiě)法,這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue獲取當(dāng)前日期時(shí)間(使用moment和new?Date())的相關(guān)資料,需要的朋友可以參考下2023-06-06
Vue組件間通信方法總結(jié)（父子組件、兄弟組件及祖先后代組件間）
這篇文章主要給大家介紹了關(guān)于Vue組件間通信的相關(guān)資料，其中包括父子組件、兄弟組件及祖先后代組件間的通信，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue中復(fù)用vuex.store對(duì)象的定義
這篇文章主要介紹了vue中復(fù)用vuex.store對(duì)象的定義，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù)
前端開(kāi)發(fā)想省時(shí)間就是要找框架呀,下面這篇文章主要給大家介紹了關(guān)于van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù),文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
如果你也和我一樣，按照正常的流程下載并且配置了stylus，但是依舊報(bào)錯(cuò)，也許這篇文章就是你的菜，一起來(lái)看看吧2022-08-08
在Vue組件中,data函數(shù)用于定義組件的數(shù)據(jù),本文主要介紹了Vue組件data函數(shù)的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-02-02
Vuejs中的watch實(shí)例詳解(監(jiān)聽(tīng)者)
本文通過(guò)實(shí)例代碼給大家介紹了Vuejs中的watch，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-01-01
這篇文章主要給大家介紹了關(guān)于vue如何調(diào)用瀏覽器分享的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue利用指令實(shí)現(xiàn)快速設(shè)置元素的高度
在項(xiàng)目中經(jīng)常有需要將列表的高度設(shè)置成剩余可視區(qū)域的高度,本文主要來(lái)和大家介紹一下如何通過(guò)指令和css變量的方式快速設(shè)置列表高度,希望對(duì)大家有所幫助2024-03-03
vue-router+vuex addRoutes實(shí)現(xiàn)路由動(dòng)態(tài)加載及菜單動(dòng)態(tài)加載
本篇文章主要介紹了vue-router+vuex addRoutes實(shí)現(xiàn)路由動(dòng)態(tài)加載及菜單動(dòng)態(tài)加載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09