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="registerFormstatus-icon :rules="registerRulesref="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.registerPswdautocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="registerRpswd">
            <el-input type="password" v-model="registerForm.registerRpswdautocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-link :underline="falsetype="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>
posted @ 2019-10-17 18:16  略略略额  阅读(479)  评论(0)    收藏  举报