vue el-form 自定义校验, 校验用户名调接口查重

天天向上10242025-09-25 13:33

html

html 复制代码

 <el-form ref="userForm" :model="userForm" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="userForm.username" placeholder="请输入用户名"></el-input>
    </el-form-item>
  </el-form>

js 复制代码

// 用户名唯一性校验
const validateUsername = (rule, value, callback) => {
  // 基本验证：不能为空
  if (!value) {
    return callback(new Error('请输入用户名'));
  }

  // 基本验证：长度限制
  if (value.length < 3 || value.length > 20) {
    return callback(new Error('用户名长度必须在3-20个字符之间'));
  }

  // 正则验证：只能包含字母、数字、下划线
  const reg = /^[a-zA-Z0-9_]+$/;
  if (!reg.test(value)) {
    return callback(new Error('用户名只能包含字母、数字和下划线'));
  }

  // 模拟接口请求，实际项目中替换为真实接口
  checkUsernameUnique(value)
    .then((isUnique) => {
      if (isUnique) {
        callback(); // 校验通过
      } else {
        callback(new Error('该用户名已被使用，请更换其他用户名'));
      }
    })
    .catch((error) => {
      callback(new Error('用户名校验失败，请稍后重试'));
    });
};

// 规则
rules: {
    username: [
       { validator: validateUsername, trigger: 'blur' }
    ],
},