vue项目 elementUI 表单验证请求后端接口
做vue项目中的注册页面,当用户填写完注册邮箱时需要调用后端api进行验证此邮箱是否已被注册。template<el-form-item label="邮箱" prop="email"><el-input v-model="ruleForm.email"></el-input></el-form-item>引入接口import {getEmail}
·
做vue项目中的注册页面,当用户填写完注册邮箱时需要调用后端api进行验证此邮箱是否已被注册。
template
<el-form-item label="邮箱" prop="email">
<el-input v-model="ruleForm.email"></el-input>
</el-form-item>
引入接口
import {getEmail} from '@/api/backStage_api/getEmail'
校验邮箱是否已被注册
data() {
var checkEmail = (rule, value, callback) => {
if (!value) {
return callback(new Error('邮箱不能为空'));
} else {
// 调用后端api
getEmail(value).then(Response => {
if(!Response.data) {
callback();
}
callback(new Error('邮箱已被注册!'));
})
}
};
return {
ruleForm: {
email: ''
},
rules: {
email: [
{ message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
{ validator: checkEmail, trigger: 'blur' }
]
},
};
},
更多推荐
已为社区贡献1条内容
所有评论(0)