vue+element密码和确认密码校验以及隐藏显示密码的小眼睛

例：效果

    <el-form-item label="新密码" prop="newPassword"><el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" /></el-form-item><el-form-item label="确认密码" prop="confirmPassword"><el-input v-model="user.confirmPassword"  placeholder="请确认密码" type="password" /></el-form-item><el-form-item><el-button type="primary" size="mini" @click="modifyPwd">保存</el-button></el-form-item></el-form></el-dialog>

data() {const equalToPassword = (rule, value, callback) => {if (this.user.newPassword !== value) {callback(new Error("两次输入的密码不一致"));} else {callback();}};return {// 版本号version: "3.2.1",dialogTableVisible: false,currentUser:{},currentUserId:undefined,user: {newPassword: undefined,confirmPassword: undefined},// 表单校验rules: {newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" },{ min: 8, max: 12, message: "长度在 8 到 12个字符", trigger: "blur" }],confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" },{ required: true, validator: equalToPassword, trigger: "blur" }]}

如果需要隐藏展示密码只需要一个属性，这个是element-ui自带的属性：show-password

<el-input v-model="ruleForm.password" show-password maxlength="50" type="text" size="small" placeholder="请输入密码" />

vue+element密码和确认密码校验以及隐藏显示密码的小眼睛相关推荐

vue+element项目手机号、邮箱校验保姆级教程
vue+element项目手机号.邮箱校验保姆级教程 (包含注意点) 先看案例:在vue+element项目中给表单中的手机号和邮箱做校验标题先说注意点 prop黄色框框起来的一定要有废话不多 ...
linux终端密码星星,如何在Ubuntu终端中显示密码星号
每当要求您在Ubuntu终端中键入密码时,都将插入密码,而不会得到任何可视显示或屏幕反馈.在这种情况下,您可能会通过错误输入密码而弄乱密码.这就是视觉反馈如此重要的原因.它可以帮助您跟踪输入的字符数, ...
链接计算机网络密码错误,手机连不上路由器显示密码错误怎么办？
问:手机连不上路由器显示密码错误怎么办? 答:手机连接路由器wifi网络的时候,如果现实密码错误,这就很明显了,你输入的wifi密码不正确,所以连不上路由器的wifi网络. 这种情况下,请重新输入wi ...
表单验证通过输入框获取用户输入的密码，如果输入密码为“happy123”,则显示“密码输入正确”，否则提示“密码输入错误”,如果输入三次，显示提示信息“三分钟后在尝试”
功能:简单的表单验证,密码输入次数控制,定时器控制可输入提醒,密码匹配 Html:请忽略界面设计,没时间做 <form><input id="userName" ...
vue+element 身份证号码以及有效性校验适用 15位或18位
data () {let idCardValidity = (rule, code, callback) => {var city = { 11: "北京", 12: &qu ...
有赞组件vant密码输入框input在微信小程序里隐藏显示密码有问题
<van-fieldvalue="{{ pwd}}"placeholder="请输入密码"border="{{ false }}"cl ...
Vue：element-ui中表格过长内容隐藏显示
一.el-table表格在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表 ...
Vue 不加载字体包导致elementUI的icon显示为正方形小框框问题解决
问题描述在一次开发任务中遭遇的一个问题正常使用 element-ui的icon时却发现不知道为什么显示都为正方形小框框问题搜索 1.问题查找方向一 --版本问题于是,我就将element-u ...
vue中Vant的field输入框实现输入内容可见密码
有时候会有这种需求,密码输入的时候点击要显示密码再次点击隐藏. demo 请狠狠的戳这里 ¥ https://download.lllomh.com/cliect/#/product/F422705 ...

vue+element密码和确认密码校验以及隐藏显示密码的小眼睛

vue+element密码和确认密码校验以及隐藏显示密码的小眼睛相关推荐

最新文章

热门文章