vue+element 将密码输入框的小圆点显示为星号_vue 密码输入框*号显示-CSDN博客

本文链接：https://blog.csdn.net/weixin_50606255/article/details/116274280

本文介绍了如何在Vue.js应用中实现登录密码输入框，使得用户输入时显示为星号，同时在后台保存实际密码。通过监听密码输入框的变动，使用正则表达式将输入的字符替换为星号，同时更新实际密码值。这种方法既保证了密码输入的安全性，又能确保数据提交时传递正确的密码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先将输入框的type设置为text,设置为password就只能显示为小圆点

<el-form

ref="form"

:model="form"

:rules="loginRules"

label-width="0px"

class="loginForm"

>

<el-form-item prop="phone">

<el-input

v-model="form.phone"

placeholder="请输入账号"

clearable

></el-input>

</el-form-item>

<el-form-item prop="pwd">

<el-input

v-model="form.pwd"

placeholder="请输入密码"

clearable

type="text"

></el-input>

</el-form-item>

</el-form>

然后监听登录的密码输入框，将密文显示为*（这里可以设置为任何你想要的符号）

主要思想是输入框绑定的是为*的密文，但是我们需要传给后端的是实际的密码，所以这里需要定义一个变量来存实际的密码。

"form.pwd": {

handler: function (val, oldV) {

//监听登录的密码输入框，将密文显示为*

this.form.pwd = this.form.pwd.replace(/./g, "*");

if (oldV.length > val.length) {

//进行删除操作 this.form.password就是定义在data中用来存实际密码的变量

this.form.password = this.form.password.substring(0, this.form.password.length - 1);

} else {

this.form.password += val.replace(/[*]/g, "");

}

},

deep: true,

},