elementUI的验证表单粗心导致的错误
<el-form v-show="!isLogin" :model="registerForm" status-icon :rules="registerRules" ref="registerForm" label-width="70px" class="demo-ruleForm"> <el-form-item label="昵称" prop="registerNickName"> <el-input v-model.number="registerForm.registerNickName"></el-input> </el-form-item> <el-form-item label="账号" prop="registerAdmin"> <el-input v-model.number="registerForm.registerAdmin"></el-input> </el-form-item> <el-form-item label="密码" prop="registerPswd"> <el-input type="password" v-model="registerForm.registerPswd" autocomplete="off"></el-input> </el-form-item> <el-form-item label="确认密码" prop="registerRpswd"> <el-input type="password" v-model="registerForm.registerRpswd" autocomplete="off"></el-input> </el-form-item> <el-form-item> <el-link :underline="false" type="primary" @click="submitRegister('registerForm')" style="margin-left: 16px;">注册</el-link> <el-link :underline="false" @click="toLogin('registerForm')" style="margin-left: 16px;">登录</el-link> </el-form-item> </el-form>
data () { var registerNickName = (rule, value, callback) => { if (!value) { return callback(new Error('昵称不能为空')); } else { callback(); } }; var registerAdmin = (rule, value, callback) => { if (!value) { return callback(new Error('账号不能为空')); } else { callback(); } }; var registerPass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.registerForm.registerRpswd !== '') { this.$refs.registerForm.validateField('registerRpswd'); } callback(); } }; var registerPass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.registerForm.registerPswd) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { registerForm:{ registerNickName: '', registerAdmin: '', registerPswd: '', registerRpswd: '' }, registerRules:{ registerNickName: [ { validator: registerNickName, trigger: 'blur' } ], registerAdmin: [ { validator: registerAdmin, trigger: 'blur' } ], registerPswd: [ { validator: registerPass, trigger: 'blur' } ], registerRpswd: [ { validator: registerPass2, trigger: 'blur' } ] } } } methods:{ submitRegister (formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { // eslint-disable-next-line no-console console.log('error submit!!'); return false; } }); }, toLogin (formName) { this.isLogin = true this.$refs[formName].resetFields(); } }
data里的if (!value) {
return callback(new Error('昵称不能为空')); } else { callback(); }
callback();不能不写,否则提交会一直卡着
<el-form v-show="!isLogin" :model="registerForm" status-icon :rules="registerRules" ref="registerForm" label-width="70px" class="demo-ruleForm">
<el-form-item label="昵称" prop="registerNickName">
<el-input v-model.number="registerForm.registerNickName"></el-input>
</el-form-item>
<el-form-item label="账号" prop="registerAdmin">
<el-input v-model.number="registerForm.registerAdmin"></el-input>
</el-form-item>
<el-form-item label="密码" prop="registerPswd">
<el-input type="password" v-model="registerForm.registerPswd" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="registerRpswd">
<el-input type="password" v-model="registerForm.registerRpswd" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-link :underline="false" type="primary" @click="submitRegister('registerForm')" style="margin-left: 16px;">注册</el-link>
<el-link :underline="false" @click="toLogin('registerForm')" style="margin-left: 16px;">登录</el-link>
</el-form-item>
</el-form>

浙公网安备 33010602011771号