经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue使用rules实现表单字段验证
来源：jb51　　时间：2021/8/26 8:53:44　　对本文有异议

vue中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。

1. 写在 data 中验证

表单内容

  1. <!-- 表单 -->
  2. <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
  3.     <el-form-item label="用户名称:" prop="userName">
  4.        <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
  5.     </el-form-item>
  6. </el-form>
  • <el-form>：代表这是一个表单
  • <el-form> -> ref：表单被引用时的名称，标识
  • <el-form> -> rules：表单验证规则
  • <el-form> -> model：表单数据对象
  • <el-form> -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
  • <el-form> -> <el-form-item>：表单中的每一项子元素
  • <el-form-item> -> label：标签文本
  • <el-form-item> -> prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
  • <el-input>：输入框
  • <el-input> -> v-model：绑定的表单数据对象属性
  • <el-input> -> style：行内样式
  • <el-input> -> maxlength：最大字符长度限制

data 数据

  1. data() {
  2.     return {
  3.         // 省略别的数据定义
  4.         ...
  5.         
  6.         // 表单验证
  7.         formRules: {
  8.             userName: [
  9.                 {required: true,message: "请输入用户名称",trigger: "blur"}
  10.             ]
  11.         }
  12.     }
  13. }
  • formRules：与上文  '表单内容' 中 <el-form> 表单的 :rules 属性值相同
  • userName：与上文 '表单内容' 中 <el-form-item> 表单子元素的 prop 属性值相同
  • 验证内容是：必填，失去焦点时验证，如果为空，提示信息为 '请输入用户名称'

2. 写在行内

表单内容

  1. <!-- 表单 -->
  2. <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
  3.     <el-form-item label="银行名称:" prop="accountName" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
  4.         <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
  5.     </el-form-item>
  6. </el-form>
  • <el-form-item> -> rules：和第一种方式表现的效果一致，只是写法不一样，这里不再赘述

data 数据没有内容

3. 引入外部定义的规则

表单内容

  1. <!-- 表单 -->
  2. <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
  3.     <el-form-item label="银行卡号:" prop="accountNumber">
  4.        <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="19"/>
  5.     </el-form-item>
  6. </el-form>

表单内容与第一种方式写法一致，这里不再赘述

script 内容

  1. <script>
  2. // 引入了外部的验证规则
  3. import { validateAccountNumber } from "@/utils/validate";
  4.  
  5. // 判断银行卡账户是否正确
  6. const validatorAccountNumber = (rule, value, callback) => {
  7.   if (!value) {
  8.     return callback(new Error("请输入账户信息"));
  9.   } else {
  10.     if (validateAccountNumber(value)) {
  11.       callback();
  12.     } else {
  13.       return callback(new Error('账号格式不正确'))
  14.     }
  15.   }
  16. };
  17.  
  18. export default {
  19.     data() {
  20.         return {
  21.             // 省略别的数据定义
  22.             ...
  23.         
  24.             // 表单验证
  25.             formRules: {
  26.                 accountNumber: [
  27.                     {required: true,validator: validatorAccountNumber,trigger: "blur"}
  28.                 ]
  29.             }
  30.         }
  31.     }
  32. }
  33. </script>
  • import：先引入了外部的验证规则
  • const：定义一个规则常量，常量名可变， '= (rule, value, callback) => {}' 为固定格式，value 入参为验证的字段值
  • formRules -> accountNumber：表单验证中使用 validator 指定自定义校验规则常量名称

validate.js

  1. /* 银行账户 */
  2. export function validateAccountNumber(str) {
  3.   const reg = /^([1-9]{1})(\d{14}|\d{18})$/
  4.   return reg.test(str)
  5. }
  • 验证规则

以上都是在失去焦点时的验证，下面来分析一下如何在表单提交时验证

1. 表单的提交按钮

  1. <!-- 表单 -->
  2. <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
  3.     <el-form-item>
  4.         <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button>
  5.         <el-button @click="cancel">取消</el-button>
  6.     </el-form-item>
  7. </el-form>
  • <el-button>：按钮
  • <el-button> -> type：按钮类型
  • <el-button> -> @click：按钮点击时触发的事件，这里注意方法的入参为 'rulesForm'，这里要与 <el-form> 表单的 rel 属性值一致

2. methods 方法

  1. methods: {
  2.     // 保存
  3.     onSubmit(formName) {
  4.         this.$refs[formName].validate(valid => {
  5.             if (valid) {
  6.                 console.log("success submit!!");
  7.             }else{
  8.                 console.log("error submit!!");
  9.             }
  10.         });
  11.     },
  12.     // 取消
  13.     cancel() {
  14.         
  15.     }
  16. }

this.$refs[formName].validate：formName 就是传入的 'rulesForm'，与 <el-form> 表单的 rel 属性值一致，这样就指定好需要验证的表单了

完整示例代码如下

1. rules.vue

  1. <template>
  2.   <div class="app-container">
  3.     <el-tabs v-model="activeName">
  4.       <el-tab-pane label="表单" name="rulesPane" @tab-click="handleClick">
  5.         <!-- 表单 -->
  6.         <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
  7.           <el-form-item label="用户名称:" prop="userName">
  8.             <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
  9.           </el-form-item>
  10.           <el-form-item label="银行名称:" prop="accountName" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
  11.             <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
  12.           </el-form-item>
  13.           <el-form-item label="银行卡号:" prop="accountNumber">
  14.             <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="50"/>
  15.           </el-form-item>
  16.           <el-form-item>
  17.             <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button>
  18.             <el-button @click="cancel">取消</el-button>
  19.           </el-form-item>
  20.         </el-form>
  21.       </el-tab-pane>
  22.     </el-tabs>
  23.   </div>
  24. </template>
  25.  
  26. <script>
  27. import { validateAccountNumber } from "@/utils/validate";
  28.  
  29. // 判断银行卡账户是否正确
  30. const validatorAccountNumber = (rule, value, callback) => {
  31.   if (!value) {
  32.     return callback(new Error("请输入账户信息"));
  33.   } else {
  34.     if (validateAccountNumber(value)) {
  35.       callback();
  36.     } else {
  37.       return callback(new Error('账号格式不正确'))
  38.     }
  39.   }
  40. };
  41.  
  42. export default {
  43.   name: "rules",
  44.   data() {
  45.     return {
  46.       activeName: "rulesPane",
  47.       defaultProps: {
  48.         children: "children",
  49.         label: "label"
  50.       },
  51.       rulesForm: {
  52.       },
  53.       //   表单验证
  54.       formRules: {
  55.         userName: [
  56.           {
  57.             required: true,
  58.             message: "请输入用户名称",
  59.             trigger: "blur"
  60.           }
  61.         ],
  62.         accountNumber: [
  63.           {
  64.             required: true,
  65.             validator: validatorAccountNumber,
  66.             trigger: "blur"
  67.           }
  68.         ],
  69.       }
  70.     };
  71.   },
  72.   created() {},
  73.   mounted() {},
  74.   methods: {
  75.     handleClick(tab) {
  76.       
  77.     },
  78.     // 取消
  79.     cancel() {
  80.       
  81.     },
  82.     // 保存
  83.     onSubmit(formName) {
  84.       this.$refs[formName].validate(valid => {
  85.         if (valid) {
  86.           console.log("success submit!!");
  87.         } else {
  88.           console.log("error submit!!");
  89.           return false;
  90.         }
  91.       });
  92.     }
  93.   }
  94. };
  95. </script>
  96.  
  97. <style lang="scss">
  98. </style>

2. validate.js

  1. /* 银行账户 */
  2. export function validateAccountNumber(str) {
  3.   const reg = /^([1-9]{1})(\d{14}|\d{18})$/
  4.   return reg.test(str)
  5. }

效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持w3xue。

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

Vue.js热门文章

  • vue3中getCurrentInstance示例讲解
  • vue3页面跳转的两种方式
  • vue3动态加载对话框的方法实例
  • vue之Element-Ui输入框显示与隐藏方式
  • 封装vue基于element的select多选时启用鼠标悬停折叠文字以tooltip显示具体所选值
  • vue播放flv、m3u8视频流(监控)的方法实例
  • vue实现手机验证码登录
  • vue实现图片预览放大以及缩小问题
  • Vue自定义指令中无法获取this的问题及解决
  • uniapp组件uni-file-picker中设置使用照相机和相册权限的操作方法

    • Vue.js推荐文章

  • 《花100块做个摸鱼小网站! 》第四篇—前端应用搭建和完成第一个热搜组件
  • 卧槽，牛逼！vue3的组件竟然还能“暂停”渲染！
  • 给我5分钟，保证教会你在vue3中动态加载远程组件
  • 业务场景---Token无感刷新
  • 前端如何处理后端一次性返回10万条数据？
  • Vite本地构建：手写核心原理
  • 70%的人都答错了的面试题，vue3的ref是如何实现响应式的？
  • VUE系列之性能优化--懒加载
  • Vue 3 后端错误消息处理范例
  • useCookie函数：管理SSR环境下的Cookie

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号