vue.js - vue data和methods的一些问题
本文介绍了vue.js - vue data和methods的一些问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
目前在用element-ui做一个项目,其中涉及到用里边的表单验证组件。。。
如果有使用过的朋友请解答一下。
<template>
<el-form :model="register" :rules="rules" ref="register" >
<el-form-item prop="email">
<el-input v-model="register.email" id="register_email" name="email" type="email" placeholder="电子邮箱">
</el-input>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
register: {
email: '',
mobile: '',
username: '',
password: ''
},
rules: {
email: [
{ required: true, message: '请输入邮箱'},
{ type: 'email', message: '请输入正确的邮箱格式'},
// 验证完成后的回调
function(){
console.log('success')
}
]
}
}
},
methods: {
emailCheck: function(){
var emailUrl = 'http://cuv.hd.dev:8080/auth/email/unique'
this.$http.get(emailUrl+'?res='+this.register.email).then(
res => {
console.log(res.data)
},res => {
}
)
}
}
}
</script>
<style>
</style>
如何在验证成功后的回调里面执行emailCheck这个方法??
可能问题表述的不是很清晰,望谅解。。。
解决方案
import axios from 'axios'
export function EmailCheck(rule, value, callback) {
const params = {
email: value
}
axios.get('/api/emailcheck', { params: params }).then(rsp => {
if (rsp.result === true) {
//email exists, this means validation fails
callback(new Error('email已存在'))
}
else {
//email does not exist, therefore this validation success
callback()
}
})
}
import { EmailCheck } from xxx;
...
rules: {
email: [
{ required: true, message: '请输入email', trigger: 'blur' },
{ validator: EmailCheck, trigger: 'blur' }
]
}
...
这篇关于vue.js - vue data和methods的一些问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文