已迁移-Vue - 实现回车键登录功能
目录
before
vue3 +elementplus + drf
想要在登录或者注册页面，实现表单输入完毕后，按回车触发按钮的提交功能，那么只需要在form标签中，增加属性:
<!-- 重点就是el-form标签中的@keyup.enter.native="doPwdLogin" doPwdLogin是具体实现与后端交互的函数 -->
<el-form size="large" :model="currentState.userModel" :rules="currentState.userRules" ref="userRef" @keyup.enter.native="doPwdLogin">
<el-form-item style="margin-top: 24px;" prop="mobile" :error="currentState.userError.mobile">
<el-input placeholder="手机号" v-model="currentState.userModel.mobile"/>
</el-form-item>
<el-form-item style="margin-top: 24px;" prop="password"
:error="currentState.userError.password">
<el-input placeholder="密码" v-model="currentState.userModel.password"/>
</el-form-item>
<el-form-item style="margin-top: 24px;">
<el-button type="primary" @click="doPwdLogin">登 录</el-button>
</el-form-item>
</el-form>
参考代码：
<el-form size="large" :model="currentState.userModel" :rules="currentState.userRules" ref="userRef" @keyup.enter.native="doPwdLogin">
<el-form-item style="margin-top: 24px;" prop="mobile" :error="currentState.userError.mobile">
<el-input placeholder="手机号" v-model="currentState.userModel.mobile"/>
</el-form-item>
<el-form-item style="margin-top: 24px;" prop="password"
:error="currentState.userError.password">
<el-input placeholder="密码" v-model="currentState.userModel.password"/>
</el-form-item>
<el-form-item style="margin-top: 24px;">
<el-button type="primary" @click="doPwdLogin">登 录</el-button>
</el-form-item>
</el-form>
<script>
import {ref, reactive, getCurrentInstance} from 'vue'
import {ElMessage} from 'element-plus'
// 注意是 useStore 不是userStore
import {useStore} from 'vuex'
import {useRouter} from 'vue-router'
const store = useStore()
const router = useRouter()
const {proxy} = getCurrentInstance();
const currentState = reactive({
tabSelected: 0,
btnSmsText: '发送验证码',
btnSmsDisabled: false,
tabList: ["账号密码登录", "短信验证登录"],
userModel: {
mobile: "18211101111",
password: "123"
},
userRules: {
mobile: [
{required: true, message: '手机不能为空', trigger: 'blur'},
],
password: [
{required: true, message: '密码不能为空', trigger: 'blur'},
//{ pattern:/^[a-z]+$/, message: '格式错误', trigger: 'blur'},
// {min: 6, max: 28, message: '密码长度至少6个字符', trigger: 'blur'}
]
},
userError: {
mobile: '',
password: '',
},
smsModel: {
mobile: '18211101111',
code: '',
},
smsRules: {
mobile: [
{required: true, message: '手机号不能空', trigger: 'blur'},
// {pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,message: '手机号格式不正确', trigger: 'blur'}
],
code: [
{required: true, message: '验证码不能为空', trigger: 'blur'},
]
},
smsError: {
mobile: '',
code: '',
},
})
/*
* 基于手机号和密码登录方式的登录，点击登录按钮触发的函数
* */
// 展示各字段的具体错误信息，表示没有通过后端的钩子校验
// 注意这个展示函数应该和清除错误信息的clearFormError同时使用，单用validateFormError的话
// 只会在页面刷新后，第一次点击登录按钮才会展示错误信息，后续再点击登录按钮也不展示错误信息了
function validateFormError(errorDict, userError) {
// errorDict是后端传来的各字段的报错，然后各自赋值到resError字段中，这样页面中就有了效果了
for (let key in errorDict) {
let msg = errorDict[key][0];
userError[key] = msg;
// console.log(666, key, msg)
}
}
// 清除各字段的具体错误信息，每次点击登录按钮时，先把之前的错误信息都清空，然后在后续逻辑中，根据情况展示最新的错误提示
function clearFormError(userError) {
// errorDict是后端传来的各字段的报错，然后各自赋值到resError字段中，这样页面中就有了效果了
for (let key in userError) {
// let msg = errorDict[key][0];
userError[key] = "";
// console.log(666, key, msg)
}
}
// 点击登录按钮触发登录逻辑
function doPwdLogin() {
clearFormError(currentState.userError)
// 如果有input框没有通过规则校验，则下面valid就是false，通过判断这个false值，来return false，表示
// 点击登录按钮时，还有输入框的值不合法，就不往下走逻辑
proxy.$refs.userRef.validate((valid) => {
// console.log(111, valid)
if (!valid) {
console.log('账号密码方式校验失败')
return false // 表示有输入框的值不合法
}
// 如果每个输入框的值都通过了规则校验，则继续往下走逻辑
// console.log(333, currentState.userModel)
proxy.$axios.post("/api/login/", currentState.userModel).then((res) => {
console.log(444, res)
if (res.data.code === 0) {
// 登录校验成功
// console.log(555, '登录认证成功', res.data)
// 1. 将数据保存到vuex + 持久化
store.commit('login', res.data.data);
// 2. 跳转到指定页面，这里跳转到后台
router.replace({name: "Basic"})
} else if (res.data.code === -1) {
// 表示各字段没有通过后端校验，展示到各自的input框下面
validateFormError(res.data.detail, currentState.userError)
} else if (res.data.code === -2) {
// 手机号或者密码错误，直接elementplus错误组件展示即可
ElMessage.error(res.data.msg)
}
}).catch(function (error) {
ElMessage.error("请求超时，请检查服务端是否正常启动")
})
})
}
</script>
参考：
