Element UI Guide: Custom Form Validation Rule
,
在指南上方
,
你需要创建一个规则,
然后在规则处理程序中,调用
callback()
如果成功,或者
callback(new Error('something...'))
如果在服务器响应验证结果后失败。
或者在fiddle下面是一个实现自定义验证器的示例,该验证器使用一个观察者来实现它。
new Vue({
el: "#app",
data () {
return {
dateobj: null,
hasError: false,
loading: false
}
},
watch: {
dateobj: function (newVal) {
this.loading = true
this.hasError = false
setTimeout(()=>{
this.hasError = Math.random() > 0.5 ? true : false
this.loading = false
}, 1500)
}
}
})
@import url("//unpkg.com/element-ui@2.4.6/lib/theme-chalk/index.css");
.my-error {
background-color:red;
color:white;
}
.lds-circle {
display: inline-block;
background: gray;
animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
@keyframes lds-circle {
0%, 100% {
animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
}
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(1800deg);
animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
}
100% {
transform: rotateY(3600deg);
}
}
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.4.6/lib/index.js"></script>
<div id="app">
<div class="form-row">
<label class="form-label" for="date">Date</label>
<el-date-picker class="NewReminder__date-picker"
v-model="dateobj"
type="date"
:readonly="loading">
</el-date-picker>
<span class="my-error" v-if="hasError">the server return one error</span>
<span class="lds-circle" v-if="loading">loading</span>
</div>
</div>
