vue data和methods的一些问题

Question

目前在用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这个方法？？

可能问题表述的不是很清晰，望谅解。。。

Answer 1

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' }
    ]
}

...

Answer 2

你的想法错了
你应该要 提交的时候验证表单规则，成功的时候发送请求。

官方有demo的，部分代码如下：

  methods: {
      submitForm(formName) { //formName 表单数据对象 model
        this.$refs[formName].validate((valid) => { //验证规则
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      }

 <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>