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

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

• 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' }],
},