基于vue elementu-ui表单验证框架的js工具类之密码、确认密码验证

最新推荐文章于 2023-10-20 20:09:09 发布
最新推荐文章于 2023-10-20 20:09:09 发布
阅读量989 收藏 3
点赞数
分类专栏： # 前端开发 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mathcoder23/article/details/109117090
版权
本文介绍了如何基于Vue和Element-UI构建表单验证工具类，特别是针对密码和确认密码的验证规则。通过优化代码，将验证规则转化为独立的JS工具类，以减少耦合并提高安全性。同时，文章讨论了存储明文数据的安全隐患，并建议将与项目相关性强的验证策略放在项目内的validation文件夹中。
摘要由CSDN通过智能技术生成

目录

Vue和Element-UI这两大框架在前端开发中应用已经非常nice了。但是在开发中还是有很多不足之处。以大量的使用基础，来不断的改进吧。

常规Element的表单验证

偷个懒，这里首先去官网看看表单验证的基本用法
https://element.eleme.cn/#/zh-CN/component/form

关键代码

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="年龄" prop="age">
    <el-input v-model.number="ruleForm.age"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary"
最低0.47元/天 解锁文章
mt23
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js+ElementUI实现进度条提示密码强度效果
WEN_Windy的博客
01-17 1651
参考链接：http://www.aijquery.cn/Html/jqueryjiqiao/200.html 要求一：判断输入的字符串是否包含数字、小写字母、大写字母以及特殊字符四种内容的8-20位字符 通过搜索了解到可以使用?=这个正则语法判断字符串中是否含有多种内容。(?=)这个语法结构在正则里表示“设定后面是”的意思，举下面几个例子进一步了解?=这个语法： (?=.*[a-zA-Z])...
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，使得开发者可以快速构建美观的后台管理系统。本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，...
VUE Element-UI 用户修改和重置密码时，新密码和密码确认失去焦点的时候不一致的校验
qq_21209307的博客
01-23 2869
<el-dialog title="修改密码" :visible.sync="dialogTableVisible" :fullscreen="true" :show-close="false" :close-on-click-modal="false" > <el-form ref="form" label-width="80px" :rules="rules" :model="user"> <el-form-item label="新密码"
vue3+ts+element-plus密码强弱校验+密码自定义规则校验
Johnson_7的博客
09-08 6772
vue3+ts+element-plus密码强弱校验+密码自定义规则校验 是否包含用户名； 是否包含3个及以上相同或连续的字符； 是否包含3个及以上键盘连续字符； 数字、小写字母、大写字母、特殊字符，至少包含两种
vue js 前端获取后台传过来的正则规则 字符串转正则 输入密码正则自定义 密码由8位以上数字、大小写字母和特殊符号组成
Li_Ning21的博客
05-17 1043
一个正则卡了很久，去网上搜 js 字符串转正则 大家都会让使用eval或者new RegExp(str)； 道理都懂 但是实际使用会有问题； 正则如下： /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}/ ①eval方式现在大部分工程已经废弃，如果使用会有安全隐患。 ②new RegExp方式有小坑，如果你直接这样使用 const str = '^(?=.*[a-z])(?=.*[A-Z])(
js密码输入与确认密码验证功能
qq_34761452的博客
10-20 1万+
密码确认密码 标签（空格分隔）： 密码验证 带有比较复杂的密码验证方式，比如具备大小写 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;meta name="viewport" content="width=devic
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
08-27
Vue 使用 vux-ui 自定义表单验证遇到的问题及解决方法 Vue 使用 vux-ui 自定义表单验证遇到的问题及解决方法是近年来非常流行的一种前端开发技术，特别是在移动端开发中。vux-ui 是一个基于 Vue 的移动端 UI 组件库...
这是一款基于vue与elementu-ui开发的聊天室组件库，在UI上模仿了TIM及微信
05-22
在IT领域，前端开发是不可或缺的一部分，而Vue.js作为一款轻量级的前端框架，以其简洁的API和强大的功能深受开发者喜爱。结合Element UI，一个由饿了么团队打造的高质量UI组件库，我们可以构建出高效、美观的用户...
精选_基于vue与elementu-ui开发的聊天室组件库_源码打包
03-10
综上所述，这个“精选_基于vue与elementu-ui开发的聊天室组件库_源码打包”项目是一个利用Vue.js和Element UI构建的前端聊天室应用。开发者可以利用提供的源码快速理解和学习如何用这两种工具搭建聊天室，同时也方便...
vue-trees-ui-基于Vue的Tree Ui。-Vue.js开发
05-27
install npm install vue-trees --save或cnpm i vue-trees -S快速入门从'vue'导入vue导入vueTrees fue树基于vue 2的树状UI .X install npm install vue-trees --save或cnpm i vue-trees -S快速入门从'vue'导入Vue从'...
vue.js表单密码强度验证代码.zip
07-04
vue.js表单密码强度验证代码是一款适用于手机注册表单输入密码强度验证特效。
Element ui Form表单确定密码效验方式rules
lyq1948的博客
10-20 861
【代码】Element ui Form表单确定密码效验方式rules。
vue密码强度校验
mia0303的博客
08-19 8486
vue密码强度校验 可直接复制使用,根据自己所需再更改! <template> <div class="container"> <label style="margin-left:40px;">密码:</label> <input v-model="pwdee" id="inputValue" auto-complete="...
vue项目中更改密码并验证
qq_42786138的博客
09-03 1133
data() { //此处即表单发送之前验证 let validateNewPassword = (rule, value, callback) => { if (value === this.form.password) { callback(new Error('新密码不能与原密码相同!')) } else { callback()...
vue + elementUi 实现密码校验
weixin_30486037的博客
12-19 1667
<el-form-item v-else label="密码" label-width='150px' prop="password"> <el-input :placeholder="info.password" v-model="info.password" style="width: 500px"></el-input> </...
Element-UI中的表单验证
热门推荐
yhang0802的博客
07-03 1万+
Element-UI中的表单验证
elementui校验登录密码和确认密码
Ych_cxy的博客
09-05 7652
var new_password = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.user.user...
vue确认密码
weixin_30483013的博客
10-24 1610
rules: { pwd:[{ required:true, message:'创建密码',trigger:'blur' }], cpwd:[{ required:true,message:'确认密码',trigger:'blur' },{ validator:(rule,value,callback)=>{ if(value===''){ callback(new...
vue element-ui 表单循环验证分享
最新发布
11-16
Element UI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件和工具。在 Vue 中使用 Element UI 构建表单，可以通过循环来动态生成表单项并进行验证。 首先，我们可以使用 Vue 的 v-for 指令来循环渲染表单项。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值