经验首页 前端设计 程序设计 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. formRules: {
  7. userName: [
  8. {required: true,message: "请输入用户名称",trigger: "blur"}
  9. ]
  10. }
  11. }
  12. }
  • 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. const validatorAccountNumber = (rule, value, callback) => {
  6. if (!value) {
  7. return callback(new Error("请输入账户信息"));
  8. } else {
  9. if (validateAccountNumber(value)) {
  10. callback();
  11. } else {
  12. return callback(new Error('账号格式不正确'))
  13. }
  14. }
  15. };
  16. export default {
  17. data() {
  18. return {
  19. // 省略别的数据定义
  20. ...
  21. // 表单验证
  22. formRules: {
  23. accountNumber: [
  24. {required: true,validator: validatorAccountNumber,trigger: "blur"}
  25. ]
  26. }
  27. }
  28. }
  29. }
  30. </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. }

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. <script>
  26. import { validateAccountNumber } from "@/utils/validate";
  27. // 判断银行卡账户是否正确
  28. const validatorAccountNumber = (rule, value, callback) => {
  29. if (!value) {
  30. return callback(new Error("请输入账户信息"));
  31. } else {
  32. if (validateAccountNumber(value)) {
  33. callback();
  34. } else {
  35. return callback(new Error('账号格式不正确'))
  36. }
  37. }
  38. };
  39. export default {
  40. name: "rules",
  41. data() {
  42. return {
  43. activeName: "rulesPane",
  44. defaultProps: {
  45. children: "children",
  46. label: "label"
  47. },
  48. rulesForm: {
  49. },
  50. // 表单验证
  51. formRules: {
  52. userName: [
  53. {
  54. required: true,
  55. message: "请输入用户名称",
  56. trigger: "blur"
  57. }
  58. ],
  59. accountNumber: [
  60. {
  61. required: true,
  62. validator: validatorAccountNumber,
  63. trigger: "blur"
  64. }
  65. ],
  66. }
  67. };
  68. },
  69. created() {},
  70. mounted() {},
  71. methods: {
  72. handleClick(tab) {
  73. },
  74. // 取消
  75. cancel() {
  76. },
  77. // 保存
  78. onSubmit(formName) {
  79. this.$refs[formName].validate(valid => {
  80. if (valid) {
  81. console.log("success submit!!");
  82. } else {
  83. console.log("error submit!!");
  84. return false;
  85. }
  86. });
  87. }
  88. }
  89. };
  90. </script>
  91. <style lang="scss">
  92. </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。

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

本站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号