element form的前两个input无法校验

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

<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()
}
}

回答

校验规则贴出来signupRules

以上是 element form的前两个input无法校验 的全部内容， 来源链接： utcz.com/a/59657.html

回到顶部