vue项目 elementUI 表单验证请求后端接口

做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' }
          ]
        },
      };
    },