实现动态验证element输入框密码框

1.前提需求:

1.某个页面需要展示输入框的密码,但是更改过的密码后端给我们返回六个***

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RuhvNjza-1663292699990)(C:/Users/WXCHO/AppData/Roaming/Typora/typora-user-images/image-20220916092407155.png)]

2.没有更改过的我们就展示原始账号和密码

3.他们都是可以重新更改的

因为有两个不同的展示所以需要根据状态进行验证(因为密码不能有特殊符号*)

2.在html部分

  <el-form-item label="密码: "ref="passwordT"prop="password":rules="passwordFocus?passwordF:defoutPasswords"><el-input style="width: 180px;"required='true'@input="inputPassword(formObj.password)"size="medium"v-model.trim="formObj.password"></el-input>
</el-form-item>

因为这部分和整个表单验证脱离开的,重新写了rules,记得加:冒号
passwordFocus这个变量是控制该进行什么验证,我这边写了两个验证的方法passwordF和defoutPasswords(没有改变的就是保持六个*的时候)

3.两个密码验证方法规则

// 密码验证规则passwordF: [{required: true,validator: validatepass(自定义,不会的参考el文档),trigger: ['change', 'blur']}],defoutPasswords(默认的): [{ required: true, trigger: ['change', 'blur'] }],

4.我是通过监控 @input输入值进行一个验证能不能发送请求和需要那个验证方法

inputPassword () {this.passwordFocus = trueconst val = this.formObj.passwordconst resumePass = /\D/gif (val === '******') {this.passwordFocus = falsethis.passwordControl = true} else if ((resumePass.test(val) || val === '' || val.length < 6 || val.length > 19)) {this.passwordFocus = truethis.passwordControl = false} else {this.passwordFocus = falsethis.passwordControl = true}},

passwordControl这个变量是一个控制空发送请求的一个开关,为false的时候不发送请求,并提示用户(具体实现很简单的,就是一个开关思想,因为他这个验证脱离了整个表单用不了 this.refs[′form′].validate这个方法,需要另起一个来控制)是一个开关思想,因为他这个验证脱离了整个表单用不了this.refs['form'].validate这个方法,需要另起一个来控制) 是一个开关思想,因为他这个验证脱离了整个表单用不了 this.refs[′form′].validate这个方法,需要另起一个来控制)是一个开关思想,因为他这个验证脱离了整个表单用不了this.refs[‘form’].validate这个方法,需要另起一个来控制)
passwordFocus这个就是前面提出来的一个动态验证的变量,通过三元运算进行一个选择

实现动态验证element输入框密码框相关推荐

element的密码框实现睁眼闭眼效果
element的密码框是一个眼睛,切换时图标没任何效果,测试给提了个bug,要改成睁眼闭眼的,我....而且翻了翻源码,input密码框状态改图片似乎不大好实现参考了下帖子,突然发现我居然陷入了思维 ...
前端实现input标签输入框密码框显示文字效果
背景:各种登录网址账号密码输入框中的显示文字效果,当点击输入框时,显示的文字消失,当离开输入框后再次显示默认的文字思路:采用 input 标签,给它设置 CSS 样式,这里本人将两个 input 标 ...
一篇解决Element ui密码框眼睛图标明文密文，不允许中文输入以及输入的各种校验
先上效果,再上代码,后面有说明代码我已经做到让你们复制粘贴就能用 HTML <el-form-item label="新密码" prop="cpPassword& ...
纯HTML+CSS+Jquery实现的修改密码框（密码强度动态验证，再次确认验证，密码长度动态显示）均实现，可直接运行使用
`在这里插入代码片 <head><meta charset="UTF-8"><title>纯HTML+CSS+Jquery实现的修改密码框< ...
进入登录页时，用户名输入框自动聚焦、按enter键让密码框聚焦，完整输入信息后登录
让element-ui的输入框聚焦的4种方式思路:(可以跳过这一步看完整代码--完整代码) 1. 进入页面时,用户名输入框就要获取焦点,使用自定义指令聚焦更方便.当然也可以用 ref 在 mou ...
vue下实现textarea类似密码框的功能之探索input输入框keyup，keydown，input事件的触发顺序...
项目中引入element的input框组件,触发事件必须要加上.native <el-input placeholder="请输入" type="textarea& ...
HTML5：去除IE10中输入框和密码框的X按钮和小眼睛
在IE10和之后的IE版本中,当在输入框和密码框中输入的时候,后面会自动出现X按钮和小眼睛,如下图所示: 令人苦恼的是,这个效果只有IE才有,其它浏览器是没有这个功能的.为了统一,我们就需要去掉这 ...
弹出框动态增加input输入框
欢迎关注微信公众号: 程序员小圈圈原文首发于: www.zhangruibin.com 本文出自于: RebornChang的博客转载请标明出处^_^ 弹出框动态增加input输入框最近项目上有 ...
表单验证通过输入框获取用户输入的密码，如果输入密码为“happy123”,则显示“密码输入正确”，否则提示“密码输入错误”,如果输入三次，显示提示信息“三分钟后在尝试”
功能:简单的表单验证,密码输入次数控制,定时器控制可输入提醒,密码匹配 Html:请忽略界面设计,没时间做 <form><input id="userName" ...

实现动态验证element输入框密码框

实现动态验证element输入框密码框

1.前提需求:

2.在html部分

3.两个密码验证方法规则

实现动态验证element输入框密码框相关推荐

最新文章

热门文章