element form的前两个input无法校验

如下图,form的前两个input无法校验。反复试了总是只有前两个无法验证 ,因此验证rules应该没问题。哪位帮我看看是我form结构有问题吗?
如图

<el-form 
  :model="formSignup"
  ref="signup"
  :rules="signupRules"
  :hide-required-asterisk="true"
  label-width="100px"
  label-position="left"
  class="signup-content">
  
  <el-form-item label="手机号" class="signup-item" prop="phone">
    <el-input 
      v-model="formSignup.phone"
      autocomplete="new-password" 
      class="signup-input"></el-input>
  </el-form-item>
  <el-form-item label="手机号" class="signup-item" prop="phone">
    <el-input 
      v-model="formSignup.phone"
      autocomplete="new-password" 
      class="signup-input"></el-input>
  </el-form-item>
  <el-form-item label="密码" class="signup-item" prop="pwd">
    <el-input 
      v-model="formSignup.pwd"
      autocomplete="new-password"
      type="password"
      class="signup-input">
    </el-input>
  </el-form-item>
  <el-form-item label="密码" class="signup-item" prop="pwd">
    <el-input 
      v-model="formSignup.pwd"
      autocomplete="new-password"
      type="password"
      class="signup-input">
    </el-input>
  </el-form-item>
  <el-form-item label="密码确认" class="signup-item" prop="pwd2">
    <el-input 
    v-model="formSignup.pwd2"
    autocomplete="new-password" 
    class="signup-input"
    type="password"></el-input>
  </el-form-item>
  <el-form-item label="所在城市" class="signup-item" prop='city'>
    <el-cascader 
      v-model="formSignup.city" 
      :options="cities" 
      class="signup-input"></el-cascader>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" class="signup-btn" @click="signUp">保存并登录</el-button>
  </el-form-item>
</el-form>
//验证规则
signupRules: {
  phone: [
    { required: true, message: "请输入手机号", trigger: 'blur' },
    { 
      pattern: /^(((13|18)[0-9]{9})|(14[05679][0-9]{8})|(15[012356789][0-9]{8})|(16[2567][0-9]{8})|(17[01235678][0-9]{8})|(19[189][0-9]{8}))$/,
      message: "请输入正确的手机号",
      trigger: "blur"
    }
  ],
  pwd: [
    { required: true, message: "请输入密码", trigger: 'blur' },
    { min: 6, message: "请输入六位及六位以上的密码", trigger: 'blur' }
  ],
  pwd2: [{ validator: checkPwd, trigger: 'blur' }],
  city: [{ required: true, message: "请选择您所在的城市", trigger: 'blur' }]
},

自定义验证

let checkPwd = (source, options, callback) => {
  if(options === ''){
    callback(new Error('请再次输入密码'))
  } else if(options !== this.formSignup.pwd) {
    callback(new Error("两次输入的密码不一致!"))
  } else {
    callback()
  }
}
阅读 1.8k
1 个回答

校验规则贴出来signupRules

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题