Vue+element注册表单判定

一、是否被注册，不用element的验证

<template>
    <div class="login">
        <div class="login_box" style="top:-40px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <ul class="login_form">
                    <li>
                        <div class="login_input">
                            <div class="login_input_left">
                                +86
                            </div>
                            <div class="line"></div>
                            <div class="login_input_right">
                                <el-form-item prop="phone">
                                    <el-input v-model="ruleForm.phone" placeholder="请输入手机号" style="width:260px" @blur="userPhoneExist()" @focus="cleanPhoneExist()"></el-input>
                                    <p v-show="isReg === true" style="color:red;font-size:12px;position: absolute;top: 30px;">手机号已被注册!</p>
                                </el-form-item>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="login_input">
                            <div class="login_input_left iconfont icon-mima" style="text-align: center">
                            </div>
                            <div class="line"></div>
                            <div class="login_input_right">
                                <el-form-item prop="password">
                                    <el-input type='password' v-model="ruleForm.password" placeholder="请输入密码" style="width:260px"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="login_input">
                            <div class="login_input_left iconfont icon-bianji" style="text-align: center">
                            </div>
                            <div class="line"></div>
                            <div class="login_input_right">
                                <el-form-item prop="nickName">
                                    <el-input v-model="ruleForm.nickName" placeholder="请输入昵称" style="width:170px"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                        <p class="error"></p>
                    </li>
                    <li>
                        <div class="login_input" style="width:218px;float:left">
                            <div class="login_input_left iconfont icon-anquan" style="text-align: center">
                            </div>
                            <div class="line"></div>
                            <div class="login_input_right" style="width:170px">
                                <el-form-item prop="verticalCode">
                                    <el-input v-model="ruleForm.verticalCode"  style="width:170px"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                        <el-button style="margin:0 0 0 10px" v-show="show" @click="sendCode()" class="btn_code" >发送验证码</el-button>
                        <el-button style="margin:0 0 0 10px;padding:0 10px" v-show="!show" disabled class="btn_code"><el-input disabled v-model="this.count" class="sendCodeNum"></el-input>秒后重发</el-button>
                        <p class="error"></p>
                    </li>
                    <li>
                        <div class="login_input" style='width:104px;float:left'>
                            <div class="login_input_left iconfont icon-xingbie" style="text-align: center">
                            </div>
                            <div class="line"></div>
                            <div class="login_input_right" style="width:60px">
                              <el-form-item prop="sex">
                                <input type="text" placeholder="性别" v-model="ruleForm.sex" style="width:62px;text-align:left" disabled>
                              </el-form-item>
                            </div>
                        </div>
                        <div class="sex_radio">
                            <label for="" v-if = "ruleForm.sex === '男'" @click="clickSex1()"><span class="iconfont icon-yixuanzhong"></span><input type="radio" value="男">男</label>
                            <label for="" v-else @click="clickSex1()"><span class="iconfont icon-weixuanzhong"></span><input type="radio" value="男">男</label>
                            <label for="" v-if = "ruleForm.sex === '女'" @click="clickSex2()"><span class="iconfont icon-yixuanzhong"></span><input type="radio" value="女">女</label>
                            <label for="" v-else @click="clickSex2()"><span class="iconfont icon-weixuanzhong"></span><input type="radio" value="女">女</label>
                        </div>
                        <p class="error"></p>
                    </li>
                </ul>
                <div class="lrbtn login_btn" @click="submitForm('ruleForm')" >注册</div>
                <p class="regmsg">注册即表示同意[SANTE] <router-link to="" class="linkto">服务条款</router-link> 和 <router-link to=""  class="linkto">隐私条款</router-link></p>
                <p class="regthird"><a href="#" class="linkto" style="border-bottom:none"><span class="iconfont icon-weixin"></span> 使用社交账号快速登录</a></p>
                <div class="login_close" @click="close"></div>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
  name: 'register',
  props: ['userreg'],
  mounted: function () {
  },
  data () {
    return {
      ajaxPhoneUrl: '', // 验证手机号是否存在
      ajaxSendCodeUrl: '', // 发送验证码
      ajaxRegisterUrl: '', // 注册提交表单
      show: true, //是否显示发送验证码的按钮
      isReg: '', // 手机号是否存在的判定验证,最后在提交表单里还需要再次验证
      isCodeCorrect: false, // 如果是分步骤的，需要判断手机号的验证码是否正确
      GetCode: {},  //  如果是分步骤的，需要验证手机号的验证码是否正确
      count: '', // 发送验证码的计时器变量
      timer: null, // 是否已存在计时器
      ruleForm: { // 表单内容
        nickName: '',
        phone: '',
        password: '',
        verticalCode: '',
        sex: ''
      },
      rules: { // 表单规则
        nickName: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符'},
          {pattern: /^[\u4E00-\u9FA5A-Za-z]+$/, message: '只能输入中文和英文'}
        ],
        phone: [
          {required: true, message: '请输入注册手机号', trigger: 'blur'},
          {pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '只能输入11位手机号'},
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {pattern: /^[A-Za-z]+[0-9]+[A-Za-z0-9]*|[0-9]+[A-Za-z]+[A-Za-z0-9]*$/, message: '密码必须由6-16个英文字母和数字的字符串组成！'}
        ],
        verticalCode: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          // {pattern: /^[0-9]{6}$/, message: '验证码必须为6位数字'}
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'blur'},
        ]
      }
    }
  },
  methods: {
    close () {
      this.$emit('listenToChildEvent', false)
    },
    login () {
      this.$emit('changestate', [0, true, false])
    },
    clickSex1 () {
      this.ruleForm.sex = '男'
    },
    clickSex2 () {
      this.ruleForm.sex = '女'
    },
    // 失去焦点后, 判断用户手机号是否存在, POST失败
    userPhoneExist () {
      this.$ajax.get(this.ajaxPhoneUrl, {
        params: {phone: this.ruleForm.phone}
      })
        .then((res) => {
          if (res.data.status === 1) {
            // 可以注册
            this.isReg = false
          } else {
            // 已经被注册
            this.isReg = true
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    // 清除新增加判定手机号是否存在的提示
    cleanPhoneExist () {
      this.isReg = ''
    },
    // 验证码获得
    getCode () {
      // 发送手机号验证码
      this.$ajax.get(this.ajaxSendCodeUrl, {
        params: {phone: this.ruleForm.phone}
      })
        .then((res) => {
          if (res.data.status === 1) {
            this.isCodeCorrect = true
            this.$message.success('验证码发送成功')
          } else {
            this.isCodeCorrect = false
            this.$message.error('验证码发送失败')
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    // 点击发送验证码
    sendCode () {
      // 倒计时
      // 先判断手机号是否填写正确
      var re = /^[1][3,4,5,7,8][0-9]{9}$/
      if ((re.test(this.ruleForm.phone)) & (this.isReg === false)) {
        // 填写正确后，开始发送信息，倒计时
        const TIME_COUNT = 60
        // 判断时间计时是否存在,不存在则赋值60,不显示发送验证码按钮,计时器启动循环
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              if (this.count === 60) {
                // 发送手机号到后台
                this.getCode()
              }
              this.count--
            } else {
              // 计时器为0的时候显示发送验证码按钮，清空计时器
              this.show = true
              clearInterval(this.timer)
              this.timer = null
              return false
            }
          }, 1000)
        }
      } else {
        // 手机号存在,或者手机号没有正确填写
        this.show = true
        this.$message.error('请填写正确手机号！')
      }
    },
    // 总表单提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 判断手机号是否被注册,是否发送过验证码
          if (this.isReg === false && this.isCodeCorrect === true) {
            // 验证通过,提交注册信息
            console.log('提交了呢！')
            this.$ajax.get(this.ajaxRegisterUrl, {
              params: {regForm: this.ruleForm}})
              .then((res) => {
                if (res.status === 1) {
                  this.$message.success('恭喜您,注册成功！')
                  // 跳转提交状态页面,可不添加
                  this.formSubmit = true
                } else if (res.status === 2) {
                  this.$message.error('验证码错误，请重新注册！')
                }
              })
          } else {
            // 验证未通过
            this.$message.error('未通过验证,注册失败！')
            return false
          }
        } else {
          this.$message.error('提交资料有误,注册失败！')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>

手机号已被注册的判定就是通过增加了一个isReg的变量判断，使用userPhoneExist（）这个方法来确定是否显示的

二、自定义element验证是否被注册

<template>
    <div class="login">
        <div class="login_box" style="top:-40px">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <ul class="login_form">
                    <li>
                        <div class="login_input">
                            <div class="login_input_left">
                                +86
                            </div>
                            <div class="line"></div>
                            <div class="login_input_right">
                                <el-form-item prop="phone">
                                    <el-input v-model="ruleForm.phone" placeholder="请输入手机号" style="width:260px"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="login_input">
                            <div class="login_input_left iconfont icon-mima" style="text-align: center">
                            </div>
                            <div class="line"></div>
                            <div class="login_input_right">
                                <el-form-item prop="password">
                                    <el-input type='password' v-model="ruleForm.password" placeholder="请输入密码" style="width:260px"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="login_input">
                            <div class="login_input_left iconfont icon-bianji" style="text-align: center">
                            </div>
                            <div class="line"></div>
                            <div class="login_input_right">
                                <el-form-item prop="nickName">
                                    <el-input v-model="ruleForm.nickName" placeholder="请输入昵称" style="width:170px"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                        <p class="error"></p>
                    </li>
                    <li>
                        <div class="login_input" style="width:218px;float:left">
                            <div class="login_input_left iconfont icon-anquan" style="text-align: center">
                            </div>
                            <div class="line"></div>
                            <div class="login_input_right" style="width:170px">
                                <el-form-item prop="verticalCode">
                                    <el-input v-model="ruleForm.verticalCode"  style="width:170px"></el-input>
                                </el-form-item>
                            </div>
                        </div>
                        <el-button style="margin:0 0 0 10px" v-show="show" @click="sendCode()" class="btn_code" >发送验证码</el-button>
                        <el-button style="margin:0 0 0 10px;padding:0 10px" v-show="!show" disabled class="btn_code"><el-input disabled v-model="this.count" class="sendCodeNum"></el-input>秒后重发</el-button>
                        <p class="error"></p>
                    </li>
                    <li>
                        <div class="login_input" style='width:104px;float:left'>
                            <div class="login_input_left iconfont icon-xingbie" style="text-align: center">
                            </div>
                            <div class="line"></div>
                            <div class="login_input_right" style="width:60px">
                              <el-form-item prop="sex">
                                <input type="text" placeholder="性别" v-model="ruleForm.sex" style="width:62px;text-align:left" disabled>
                              </el-form-item>
                            </div>
                        </div>
                        <div class="sex_radio">
                            <label for="" v-if = "ruleForm.sex === '男'" @click="clickSex1()"><span class="iconfont icon-yixuanzhong"></span><input type="radio" value="男">男</label>
                            <label for="" v-else @click="clickSex1()"><span class="iconfont icon-weixuanzhong"></span><input type="radio" value="男">男</label>
                            <label for="" v-if = "ruleForm.sex === '女'" @click="clickSex2()"><span class="iconfont icon-yixuanzhong"></span><input type="radio" value="女">女</label>
                            <label for="" v-else @click="clickSex2()"><span class="iconfont icon-weixuanzhong"></span><input type="radio" value="女">女</label>
                        </div>
                        <p class="error"></p>
                    </li>
                </ul>
                <div class="lrbtn login_btn" @click="submitForm('ruleForm')" >注册</div>
                <p class="regmsg">注册即表示同意[SANTE] <router-link to="" class="linkto">服务条款</router-link> 和 <router-link to=""  class="linkto">隐私条款</router-link></p>
                <p class="regthird"><a href="#" class="linkto" style="border-bottom:none"><span class="iconfont icon-weixin"></span> 使用社交账号快速登录</a></p>
                <div class="login_close" @click="close"></div>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
  name: 'register',
  props: ['userreg'],
  mounted: function () {
  },
  data () {
    var rulePhone = (rule, value, callback) => {
        this.$ajax.get(this.ajaxPhoneUrl, {
        params: {phone: this.ruleForm.phone}
      })
        .then((res) => {
          if (res.data.status === 1) {
            // 可以注册
            this.isReg = false
            callback();    //重点在这  如果在验证通过后不添加callback()函数在验证时是条件会为false
          } else if (res.data.status === 0) {
            // 已经被注册
            this.isReg = true
            callback(new Error('该手机号已被注册！'));
          }
        })
        .catch(function (error) {
          console.log(error)
        })
      }
    return {
      isReg : '',
      ajaxPhoneUrl: '', // 验证手机号是否存在
      ajaxSendCodeUrl: '', // 发送验证码
      ajaxRegisterUrl: '', // 注册提交表单
      show: true, //是否显示发送验证码的按钮
      GetCode: {},  //  如果是分步骤的，需要验证手机号的验证码是否正确
      count: '', // 发送验证码的计时器变量
      timer: null, // 是否已存在计时器
      ruleForm: { // 表单内容
        nickName: '',
        phone: '',
        password: '',
        verticalCode: '',
        sex: ''
      },
      rules: { // 表单规则
        nickName: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {min: 3, max: 10, message: '长度在 3 到 10 个字符'},
          {pattern: /^[\u4E00-\u9FA5A-Za-z]+$/, message: '只能输入中文和英文'}
        ],
        phone: [
          {required: true, message: '请输入注册手机号', trigger: 'blur'},
          {pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '只能输入11位手机号'},
          {validator: rulePhone, trigger: 'blur' }
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {pattern: /^[A-Za-z]+[0-9]+[A-Za-z0-9]*|[0-9]+[A-Za-z]+[A-Za-z0-9]*$/, message: '密码必须由6-16个英文字母和数字的字符串组成！'}
        ],
        verticalCode: [
          {required: true, message: '请输入验证码', trigger: 'blur'},
          // {pattern: /^[0-9]{6}$/, message: '验证码必须为6位数字'}
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'blur'},
        ]
      }
    }
  },
  methods: {
    close () {
      this.$emit('listenToChildEvent', false)
    },
    login () {
      this.$emit('changestate', [0, true, false])
    },
    clickSex1 () {
      this.ruleForm.sex = '男'
    },
    clickSex2 () {
      this.ruleForm.sex = '女'
    },
    // 验证码获得
    getCode () {
      // 发送手机号验证码
      this.$ajax.get(this.ajaxSendCodeUrl, {
        params: {phone: this.ruleForm.phone}
      })
        .then((res) => {
          if (res.data.status === 1) {
            this.isCodeCorrect = true
            this.$message.success('验证码发送成功')
          } else {
            this.isCodeCorrect = false
            this.$message.error('验证码发送失败')
          }
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    // 点击发送验证码
    sendCode () {
      // 倒计时
      // 先判断手机号是否填写正确
      var re = /^[1][3,4,5,7,8][0-9]{9}$/
      if ((re.test(this.ruleForm.phone)) & (this.isReg === false)) {
        // 填写正确后，开始发送信息，倒计时
        const TIME_COUNT = 60
        // 判断时间计时是否存在,不存在则赋值60,不显示发送验证码按钮,计时器启动循环
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              if (this.count === 60) {
                // 发送手机号到后台
                this.getCode()
              }
              this.count--
            } else {
              // 计时器为0的时候显示发送验证码按钮，清空计时器
              this.show = true
              clearInterval(this.timer)
              this.timer = null
              return false
            }
          }, 1000)
        }
      } else {
        // 手机号存在,或者手机号没有正确填写
        this.show = true
        this.$message.error('请填写正确手机号！')
      }
    },
    // 总表单提交
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
            this.$ajax.get(this.ajaxRegisterUrl, {
              params: {regForm: this.ruleForm}})
              .then((res) => {
                if (res.status === 1) {
                  this.$message.success('恭喜您,注册成功！')
                  // 跳转提交状态页面,可不添加
                  this.formSubmit = true
                } else if (res.status === 2) {
                  this.$message.error('验证码错误，请重新注册！')
                }
              })
        } else {
          this.$message.error('提交资料有误,注册失败！')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
</style>

通过新增一个变量isReg来判断是否被注册（主要是在点击发送验证码的时候判断是否被注册了，如果被注册则不发验证码），不需要额外在失去焦点和聚焦的时候写方法。定义一个变量rulePhone，使用element的自定义验证规则，{validator: rulePhone, trigger: 'blur' }来设置。

参考文档：

1.vue2.X+elementUI表单自定义验证：https://www.cnblogs.com/wei-dong/p/8776466.html