Vue校验组件

Svalidate.vue:

<template>
    <div>
        <slot :validate="validate"></slot>
        {{errMsg}}
    </div>
</template>

<script>
export default{
    props:["value", "rules"],
    data(){
        return { errMsg: ""};
    }
    methods:{
        validate(){
            let validate = this.rules.reduce((pre, cur)=>{
                let check = cur && cur.test && cur.test(this.value);
                this.errMsg = check ? "" : cur.message;
                return pre && check;
            }, true);
            return validate;
        }
    }
}
</script>

index.vue:
<template>
    <s-validate #default="{validate}" :value="value" :rules="rules">
        <input type="text" @blur="validate" v-model="value"/>
    </s-validate>

	<s-validate #default="{validate}" :value="text" :rules="textRules">
        <textarea type="text" @blur="validate" v-model="text"/>
    </s-validate>
</template>

<script>
import SValidate from "./SValidate";
export default{
    data()=>{
    	value:"hi";
    	rules:[{
			test:function(value){
				return /\d+/.test(value);
			},
			message:"请输入一个数字"
		}],
		textRules:[{
			test:function(value){
				return value;
			},
			message:"请输入非空的值"
		}]
    }
    components:{ SValidate }
}
</script>