Vue学习-Form表单处理账号密码自动填充

前言

处理Form表单账号密码自动填充(实则为密码自动填充导致账号也进行填充)

一、问题

操作用户表单时会默认填充浏览器(Chrome)保存的账号密码。
在这里插入图片描述

二、解决方式

Input组件中添加 autocomplete=“new-password”

<Input
  type="password"
  password
  :placeholder="placeholder"
  :disabled="disabled"
  :readonly="readonly"
  autocomplete="new-password"
/>
### 关于 `vue-element-plus-admin` 中表单 (Form) 的使用 #### 创建基础表单组件 为了创建一个简单的表单,在 `vue-element-plus-admin` 项目中可以利用 Element Plus 提供的 `<el-form>` 组件来构建。下面是一个基本的例子: ```html <template> <div class="app-container"> <!-- Form --> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFormRef" label-width="100px" class="demo-ruleForm"> <el-form-item label="用户名" prop="username"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button> <el-button @click="resetForm(ruleFormRef)">重置</el-button> </el-form-item> </el-form> </div> </template> <script lang="ts" setup> import { reactive, ref } from 'vue' import type { ElForm } from 'element-plus' interface RuleForm { username: string; password: string; } const ruleFormRef = ref<InstanceType<typeof ElForm>>() const ruleForm = reactive<RuleForm>({ username: '', password: '' }) // 验证规则定义 const rules = reactive({ username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'change' } ] }) const submitForm = async (formEl: InstanceType<typeof ElForm> | undefined) => { if (!formEl) return await formEl.validate((valid, fields) => { if (valid) { console.log('submit!') } else { console.log('error submit!', fields) } }) } const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => { if (!formEl) return formEl.resetFields() } </script> ``` 此代码片段展示了如何设置带有验证功能的基础表单[^1]。 #### 表单校验与事件处理 上述例子中的 `submitForm()` 方法用于触发表单验证逻辑;如果所有字段都有效,则执行相应的业务操作,比如向服务器发送请求保存数据。而 `resetForm()` 可以用来清除当前填写的内容并将状态恢复默认值。 #### 动态加载远程选项列表 对于某些场景下可能需要动态获取的数据项(如城市选择器),可以通过异步方式从后端API拉取最新信息填充表单项内。这通常涉及到 Axios 或 Fetch API 来发起 HTTP 请求,并将返回的结果绑定给特定控件作为可选值显示出来。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值