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

mt23

于 2020-10-16 15:48:38 发布

阅读量1k

点赞数

分类专栏： # 前端开发文章标签： vue

本文链接：https://blog.youkuaiyun.com/mathcoder23/article/details/109117090

版权

本文介绍了如何基于Vue和Element-UI构建表单验证工具类，特别是针对密码和确认密码的验证规则。通过优化代码，将验证规则转化为独立的JS工具类，以减少耦合并提高安全性。同时，文章讨论了存储明文数据的安全隐患，并建议将与项目相关性强的验证策略放在项目内的validation文件夹中。

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

常规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"