vue表單驗證你真的會了嗎？組件之表單驗證（form）validate
前言
好久沒有寫文章了，學習了一下webpack，基礎的一些組件，今天帶來form表單驗證組件（element.iviewui）的一期教程（做爲一個菜雞畢竟經歷衆多項目能夠給一些新手一點提示 （QQ羣技術討論）838293023備註（github進來的css
內容總結
- 原理解釋
- 派發和廣播 // 父子級交互
- 引入 async-validator // 表單驗證插件
- form/以及api設計
- form-item
- input
效果圖
1.原理解釋
考慮
咱們看一下咱們能夠用form去總體觸發校驗也能夠單個input來觸發form-item 進行校驗 童鞋們如今可能感受仍是沒懂，不要緊繼續往下看。webpack
2.派發和廣播
爲何要用廣播和派發呢。一般咱們和業務沒有關係的組件儘可能不要使用vuex和bus(事件總線)。 下面我送上廣播和派發的代碼。咱們在須要調用組件綁上this.$on('event',res=>())，經過派發和廣播進行調用$emit。git
- 派發是向上查找且只調用1個
- 廣播是向下查找調用多個
- 注意⚠️全部的組件都要寫上
name - 經過混合器
mixins來使用
emitter.js
/**
* 遞歸使用 call 方式this指向
* @param componentName // 須要找的組件的名稱
* @param eventName // 事件名稱
* @param params // 須要傳遞的參數
*/
function broadcast(componentName, eventName, params) {
// 循環子節點找到名稱同樣的子節點 不然 遞歸 當前子節點
this.$children.map(child=>{
if (componentName===child.$options.name) {
child.$emit.apply(child,[eventName].concat(params))
}else {
broadcast.apply(child,[componentName,eventName].concat(params))
}
})
}
export default {
methods: {
/**
* 派發 (向上查找) (一個)
* @param componentName // 須要找的組件的名稱
* @param eventName // 事件名稱
* @param params // 須要傳遞的參數
*/
dispatch(componentName, eventName, params) {
let parent = this.$parent || this.$root;//$parent 找到最近的父節點 $root 根節點
let name = parent.$options.name; // 獲取當前組件實例的name
// 若是當前有節點 && 當前沒名稱 且 當前名稱等於須要傳進來的名稱的時候就去查找當前的節點
// 循環出當前名稱的同樣的組件實例
while (parent && (!name||name!==componentName)) {
parent = parent.$parent;
if (parent) {
name = parent.$options.name;
}
}
// 有節點表示當前找到了name同樣的實例
if (parent) {
parent.$emit.apply(parent,[eventName].concat(params))
}
},
/**
* 廣播 (向下查找) (廣播多個)
* @param componentName // 須要找的組件的名稱
* @param eventName // 事件名稱
* @param params // 須要傳遞的參數
*/
broadcast(componentName, eventName, params) {
broadcast.call(this,componentName, eventName, params)
}
}
}
複製代碼
3.async-validator
不懂async-validator 能夠去官網看看 githubgithub
yarn add async-validator // 由於當前這個插件是須要打包到項目裏的因此不能加-D
複製代碼
4.api設計
咱們看一下下面element官網的圖`web
form有2個注入的字段:rules規則，和:model當前form的值會經過model的值和rules進行匹配來進行校驗.form-item有2個注入的字段lable和prop(prop)是來和form進行匹配來獲取當前的form-item的值的input其實有當前的@input的方法。v-model就不解釋了
form
- 咱們在
form先開始注入當前全部的form-item實例（獲取） created會在生命週期開始的時候綁定和刪除當前實例的方法。一般綁定都在頁面dom開始前調用須要在dom加載完provide配合inject 使用讓子組件能夠調用當前父組件的方法以及data- 下面都寫了備註能夠放心食用（通過測試當前是能夠進行校驗的）
form.vue
<template>
<form>
<slot></slot>
</form>
</template>
<script>
export default {
name: "aiForm",
provide(){ // [不懂的能夠看看](https://cn.vuejs.org/v2/api/#provide-inject)
return {
form: this
}
},
props: {
// 當前 form 的model
model: {
type: Object
},
// 驗證
rules: {
type: Object
}
},
data(){
return{
fields: [] // 儲存當前的 form-item的實例
}
},
created(){
// 存當前實例
let that =this;
this.$on('on-form-item-add',item=>{
if (item) {
that.fields.push(item)
}
});
// 刪除當前有的實例
this.$on('on-form-item-remove',item=>{
if (item.prop) {// 若是當前沒有prop的話表示當前不要進行刪除（由於沒有注入）
that.fields.splice(that.fields.indexOf(item),1)
}
})
},
methods:{
/**
* 清空
*/
resetFields(){//添加resetFields方法使用的時候調用便可
/**
* 當前全部當form-item 進行賦值
*/
this.fields.forEach(field => {
field.resetField();
});
},
/**
* 校驗 公開方法：所有校驗數據，支持 Promise
*/
validate(callback){
return new Promise(resolve=>{
/**
* 當前全部當form-item 進行校驗
*/
let valid = true; // 默認是經過
let count = 0; // 來匹配當前是不是所有檢查完
this.fields.forEach(field => {
// 每一個實例都會有 validation 的校驗的方法
field.validation('',error=>{
// 只要有一個不符合那麼當前的校驗就是未經過的
if (error) {
valid = false;
}
// 經過當前檢查完全部的form-item的時候纔會調用
if (++count === this.fields.length) {
resolve(valid);// 方法使用then
if (typeof callback === 'function') {
callback(valid);// 直接調用注入的回調方法
}
}
});
});
})
}
}
}
</script>
複製代碼
5.form-item
form-item比較複雜咱們一個一個講isRequired來判斷當前是否須要必填validateState來判斷當前校驗的狀態validateMessage當前的錯誤的值inject: ['form']咱們就能夠經過this.from.xxx來調用父組件的事件以及值了computed下的fieldValue可能在不停的變化因此咱們經過計算屬性來使用initialValue默認的值咱們在mounted的時候且當前須要進行校驗的時候（prop有的時候）會賦值mixins: [Emitter]混合器就是裏面的方法以及date均可以在當前調用使用頻繁的均可以放在混合器裏面- 咱們
form-item會傳入input的兩個方法blur和change(input原生使用的@input)經過form傳入的校驗rules裏面的trigger來判斷
form-item.vue
<template>
<div>
<label :class="isRequired?'ai-form-item-label-required':''">{{label}}</label>
<div>
<slot></slot>
<div class="ai-form-item-message" v-if="validateState==='error'">{{validateMessage}}</div>
</div>
</div>
</template>
<script>
import Emitter from '../../mixins/emitter';
import schema from 'async-validator';
export default {
name: "aiFormItem",
mixins: [Emitter],
inject: ['form'],
props: {
label: {
type: String,
default: ''
},
prop:{
type: String
},
},
computed:{
fieldValue () {
return this.form.model[this.prop];
},
},
data(){
return {
initialValue: '', // 儲存默認值
isRequired: false, // 當前的是否有問題
validateState: '', // 是否校驗成功
validateMessage: '', // 校驗失敗文案
}
},
methods:{
/**
* 綁定事件 進行是否 required 校驗
*/
setRules(){
let that = this;
let rules = this.getRules();//拿到父組件過濾後當前須要使用的規則
if (rules.length) {
// every 方法用於檢測數組全部元素是否都符合指定條件（經過函數提供）
// some 只要有一個符合就返回true
this.isRequired = rules.some(rule=>{
// 若是當前校驗規則中有必填項，則標記出來
return rule.required;
})
}
/**
* blur 事件
*/
this.$on('on-form-blur',that.onFieldBlur);
/**
* change 事件
*/
this.$on('on-form-change',that.onFieldChange)
},
/**
* 從 Form 的 rules 屬性中，獲取當前 FormItem 的校驗規則
*/
getRules () {
let that = this;
let rules = that.form.rules;
rules = rules?rules[that.prop]:[];
return [].concat(rules||[])//這種寫法可讓規則確定是一個數組的形式
},
/**
* Blur 進行表單驗證
*/
onFieldBlur(){
this.validation('blur')
},
/**
* change 進行表單驗證
*/
onFieldChange(){
this.validation('change')
},
/**
* 只支持 blur 和 change，因此過濾出符合要求的 rule 規則
*/
getFilteredRule (trigger) {
let rules = this.getRules();
// !res.trigger 沒有調用方式的時候默認就校驗的
// filter 過濾出當前須要的規則
return rules.filter(res=>!res.trigger || res.trigger.indexOf(trigger)!==-1)
},
/**
* 校驗數據
* @param trigger 校驗類型
* @param callback 回調函數
*/
validation(trigger,callback=function () {}){
// blur 和 change 是否有當前方式的規則
let rules = this.getFilteredRule(trigger);
// 判斷當前是否有規則
if (!rules || rules.length === 0) {
return
}
// 設置狀態爲校驗中
// async-validator的使用形式
this.validateState = 'validating';
var validator = new schema({[this.prop]: rules});
// firstFields: true 只會校驗一個
validator.validate({[this.prop]: this.fieldValue}, { firstFields: true },(errors, fields) => {
this.validateState = !errors ? 'success' : 'error';
this.validateMessage = errors ? errors[0].message : '';
callback(this.validateMessage);
});
},
/**
* 清空當前的 form-item
*/
resetField(){
this.form.model[this.prop] = this.initialValue;
}
},
// 組件渲染時，將實例緩存在 Form 中
mounted(){
// 若是沒有傳入 prop，則無需校驗，也就無需緩存
if (this.prop) {
this.dispatch('aiForm','on-form-item-add', this);
// 設置初始值，以便在重置時恢復默認值
this.initialValue = this.fieldValue;
// 添加表單校驗
this.setRules()
}
},
// 組件銷燬前，將實例從 Form 的緩存中移除
beforeDestroy(){
this.dispatch('iForm', 'on-form-item-remove', this);
},
}
</script>
<style scoped>
<!--當前css-->
.ai-form-item-label-required:before{
content: '*';
color: red;
}
.ai-form-item-message {
color: red;
}
</style>
複製代碼
5.input
value支持一個入參- 由於當前是一個
input注入的參數是不能直接放到input裏面使用的因此先賦值給了defaultValue而後用watch來不停給defaultValue賦值達到一個父組件修改後的一個綁定
<template>
<input type="text"
@input="handleInput" // change
@blur="handleBlur"
:value="defaultValue"
>
</template>
<script>
import Emitter from '../../mixins/emitter.js'
export default {
name: "aiInput",
mixins: [Emitter],
props: {
value: {
type: String,
default: ''
}
},
data(){
return {
defaultValue: this.value
}
},
watch:{
value (val) {
this.defaultValue = val;
}
},
methods:{
/**
* change 事件
* @param event
*/
handleInput(event){
// 當前model 賦值
this.defaultValue = event.target.value;
// vue 原生的方法 return 出去
this.$emit('input',event.target.value);
// 將當前的值發送到 aiFormItem 進行校驗
this.dispatch('aiFormItem','on-form-change',event.target.value)
},
/**
* blur 事件
* @param event
*/
handleBlur(event){
// vue 原生的方法 return 出去
this.$emit('blur',event.target.value);
// 將當前的值發送到 aiFormItem 進行校驗
this.dispatch('aiFormItem','on-form-blur',event.target.value)
}
}
}
</script>
複製代碼
最後
最後給上一個當前能夠的使用方式vuex
<template>
<div class="home">
<button @click="changeButton">測試</button>
<ai-form ref="formItems" :model="formValidate" :rules="ruleValidate">
<ai-form-item label="用戶名" prop="name">
<ai-input v-model="formValidate.name"/>
</ai-form-item>
</ai-form>
</div>
</template>
<script>
import AiForm from "../components/form/form";
import AiFormItem from "../components/form/form-item";
import AiInput from "../components/input/ai-input";
export default {
name: 'home',
components: {AiInput, AiFormItem, AiForm},],
data(){
return{
formValidate: {
name: '123z',
mail: ''
},
ruleValidate: {
name: [
{ required: true, message: '用戶名不能爲空', trigger: 'blur' },
],
}
}
},
methods:{
changeButton(){
this.$refs.formItems.resetFields() // 清空方法
this.$refs.formItems.validate() // 驗證方法
.then(res=>{
console.log(res)
})
}
},
}
</script>
複製代碼
小結
可能如今小夥伴仍是不懂。。俗話說;師傅領進門,修行在我的。代碼上的備註寫的也夠多了。仍是不懂的能夠加羣問問小夥伴們，api
求靠譜內推（北京地區）能夠留言我 +。=數組
相關文章
- 1. Form表單組件驗證
- 2. validate表單驗證
- 3. validate表單驗證-單獨驗證
- 4. Validate 表單驗證插件
- 5. Vue Elementui Form表單驗證
- 6. vue elementui form表單驗證
- 7. TS下，form表單驗證validate報錯
- 8. Form表單驗證
- 9. form表單驗證
- 10. Django之Form表單驗證
- 更多相關文章...
- • PHP 表單驗證 - PHP教程
- • PHP 表單 - 驗證郵件和URL - PHP教程
- • 互聯網組織的未來：剖析GitHub員工的任性之源
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Form表單組件驗證
- 2. validate表單驗證
- 3. validate表單驗證-單獨驗證
- 4. Validate 表單驗證插件
- 5. Vue Elementui Form表單驗證
- 6. vue elementui form表單驗證
- 7. TS下，form表單驗證validate報錯
- 8. Form表單驗證
- 9. form表單驗證
- 10. Django之Form表單驗證