for表单自定义validator 验证未生效

Question

页面存在两个表单 对其中的一个表单进行校验 结果自定义的validator 验证未生效，想知道如何解决

 ruleseditPassword: {
        // 密码验证
        oldPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9_-]{3,15}$/,
            message: '密码为数字，小写字母，大写字母，长度为 3 - 15位'
          }
        ],
        newPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            pattern: /^[A-Za-z0-9_-]{3,15}$/,
            message: '密码为数字，小写字母，大写字母，长度为 3 - 15位'
          }
        ],
        repeatPassword: [
          { required: true, validator: validatePass2, trigger: 'blur' }
        ]
      }

var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.loginPassword.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

<el-form
      ref="loginPassword"
      v-loading="loading"
      :model="loginPassword"
      :rules="ruleseditPassword"
      label-width="120px"
      :inline="true"
      class="form-inline"
      label-position="right"
    >
      <el-form-item label="登录邮箱" style="display: block">
        <el-input
          v-model="loginPassword.account"
          placeholder="请输入"
          disabled
          style="width: 400px"
          size="small"
        />
      </el-form-item>
      <el-form-item v-if="noneButton" label="登录密码" style="display: block">
        <el-button size="mini" @click="edit">点击修改</el-button>
      </el-form-item>
      <el-form-item
        v-if="nonePassword"
        label="登录密码"
        style="display: block"
        prop="oldPassword"
      >
        <el-input
          v-model="loginPassword.oldPassword"
          type="password"
          placeholder="输入旧密码"
          style="width: 400px; display: block"
          size="small"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        v-if="nonePassword"
        label="       "
        style="display: block"
        prop="newPassword"
      >
        <el-input
          v-model="loginPassword.newPassword"
          type="password"
          placeholder="输入新密码"
          style="width: 400px; display: block"
          size="small"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        v-if="nonePassword"
        label="       "
        style="display: block"
        prop="repeatPassword"
        required
      >
        <el-input
          v-model="loginPassword.repeatPassword"
          type="password"
          placeholder="重复新密码"
          style="width: 400px; display: block"
          size="small"
          autocomplete="off"
        />
      </el-form-item>
      <el-row>
        <el-col :span="14" class="password-btn">
          <el-button
          v-if="nonePassword"
          size="mini"
          @click="onColse"
            >取消</el-button>
          <el-button
            v-if="nonePassword"
            type="primary"
            size="mini"
            @click="editPassword"
            >提交</el-button>
        </el-col>
      </el-row>
    </el-form>

 // 按钮交互
    edit() {
      if (this.noneButton === true) {
        this.noneButton = false
        this.nonePassword = true
      }
    },
    // 按钮交互
    onColse() {
      this.noneButton = true
      this.nonePassword = false
    },

this.$refs.['loginform'].rules的打印结果

Answer 1

改换css的隐藏

<el-form
      ref="loginPassword"
      v-loading="loading"
      :model="loginPassword"
      :rules="ruleseditPassword"
      label-width="120px"
      :inline="true"
      class="form-inline"
      label-position="right"
    >
      <el-form-item label="登录邮箱" style="display: block">
        <el-input
          v-model="loginPassword.account"
          placeholder="请输入"
          disabled
          style="width: 400px"
          size="small"
        />
      </el-form-item>
      <el-form-item v-if="noneButton" label="登录密码" :style="{display: noneButton}">
        <el-button size="mini" @click="edit">点击修改</el-button>
      </el-form-item>
      <el-form-item
        label="登录密码"
        :style="{display: nonePassword}"
        prop="oldPassword"
      >
        <el-input
          v-model="loginPassword.oldPassword"
          type="password"
          placeholder="输入旧密码"
          style="width: 400px; display: block"
          size="small"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="       "
        :style="{display: nonePassword}"
        prop="newPassword"
      >
        <el-input
          v-model="loginPassword.newPassword"
          type="password"
          placeholder="输入新密码"
          style="width: 400px; display: block"
          size="small"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item
        label="       "
        :style="{display: nonePassword}"
        prop="repeatPassword"
        required
      >
        <el-input
          v-model="loginPassword.repeatPassword"
          type="password"
          placeholder="重复新密码"
          style="width: 400px; display: block"
          size="small"
          autocomplete="off"
        />
      </el-form-item>
      <el-row>
        <el-col :span="14" class="password-btn">
          <el-button
          :style="{display: nonePassword}"
          size="mini"
          @click="onColse"
            >取消</el-button>
          <el-button
            :style="{display: nonePassword}"
            type="primary"
            size="mini"
            @click="editPassword"
            >提交</el-button>
        </el-col>
      </el-row>
    </el-form>
    <router-view />
  </div>
</template>

Answer 2

surePassword: [
  { validator: validatePass2, trigger: 'blur' }
]

能打印出，说明校验函数绑定没错，是校验函数内部问题，尝试将
(value === '') 改为(!value)
value在从未输入时，或resetFields后，值为undefined

Answer 3

required表示必填项，你自定义验证的话，不需要required，所有的验证规则都写在validator函数里面，你看看官网是怎么做的：
https://element.eleme.cn/#/zh-CN/component/form

---

我上面说的required在自定义验证的时候，还是可以加的，会多一个红色的星号，表示必填项。

---

再检查下你表单里面prop、v-model是否绑定正确了(你有两个表单，字段有没有冲突)

<el-form-item label="密码" prop="newPassword">
            <el-input type="password" v-model="loginPassword.newPassword" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="surePassword">
            <el-input type="password" v-model="loginPassword.surePassword" autocomplete="off"></el-input>
</el-form-item>

Answer 4

没这个prop 你密码重复验证不是`
surePassword