在vue中使用rules对表单字段进行验证

偏执的太偏执、 2022-03-29 02:46 935阅读 0赞

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

**  1. 写在 data 中验证**

**表单内容**

<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
        <el-form-item label="用户名称:" prop="userName">
           <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
        </el-form-item>
    </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 数据**

data() {
        return {
            // 省略别的数据定义
            ...
            
            // 表单验证
            formRules: {
                userName: [
                    {required: true,message: "请输入用户名称",trigger: "blur"}
                ]
            }
        }
    }

*  formRules：与上文  '表单内容' 中 <el-form> 表单的 :rules 属性值相同
 *  userName：与上文 '表单内容' 中 <el-form-item> 表单子元素的 prop 属性值相同
 *  验证内容是：必填，失去焦点时验证，如果为空，提示信息为 '请输入用户名称'

--------------------

**  2. 写在行内**

**表单内容**

<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
        <el-form-item label="银行名称:" prop="accountName" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
            <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
        </el-form-item>
    </el-form>

*  <el-form-item> -> rules：和第一种方式表现的效果一致，只是写法不一样，这里不再赘述

**data 数据没有内容**

--------------------

**  3. 引入外部定义的规则**

**表单内容**

<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
        <el-form-item label="银行卡号:" prop="accountNumber">
           <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="19"/>
        </el-form-item>
    </el-form>

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

**script 内容**

*  import：先引入了外部的验证规则 
 *  const：定义一个规则常量，常量名可变， '= (rule, value, callback) => \{\}' 为固定格式，value 入参为验证的字段值
 *  formRules -> accountNumber：表单验证中使用 validator 指定自定义校验规则常量名称

**validate.js**

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

*  验证规则

--------------------

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

**  1. 表单的提交按钮**

<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
        <el-form-item>
            <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button>
            <el-button @click="cancel">取消</el-button>
        </el-form-item>
    </el-form>

*  <el-button>：按钮
 *  <el-button> -> type：按钮类型
 *  <el-button> -> @click：按钮点击时触发的事件，这里注意方法的入参为 'rulesForm'，这里要与 <el-form> 表单的 rel 属性值                                        一致

**  2. methods 方法**

methods: {
        // 保存
        onSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    console.log("success submit!!");
                }else{
                    console.log("error submit!!");
                }
            });
        },
        // 取消
        cancel() {
            
        }
    }

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

--------------------

**完整示例代码如下**

**  1. rules.vue**

<template>
      <div class="app-container">
        <el-tabs v-model="activeName">
          <el-tab-pane label="表单" name="rulesPane" @tab-click="handleClick">
            
            <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
              <el-form-item label="用户名称:" prop="userName">
                <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
              </el-form-item>
              <el-form-item label="银行名称:" prop="accountName" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
                <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
              </el-form-item>
              <el-form-item label="银行卡号:" prop="accountNumber">
                <el-input v-model="rulesForm.accountNumber" style="width:300px" maxlength="50"/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit('rulesForm')">保存</el-button>
                <el-button @click="cancel">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
    
    <script>
    import { validateAccountNumber } from "@/utils/validate";
    
    // 判断银行卡账户是否正确
    const validatorAccountNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入账户信息"));
      } else {
        if (validateAccountNumber(value)) {
          callback();
        } else {
          return callback(new Error('账号格式不正确'))
        }
      }
    };
    
    export default {
      name: "rules",
      data() {
        return {
          activeName: "rulesPane",
          defaultProps: {
            children: "children",
            label: "label"
          },
          rulesForm: {
          },
          //   表单验证
          formRules: {
            userName: [
              {
                required: true,
                message: "请输入用户名称",
                trigger: "blur"
              }
            ],
            accountNumber: [
              {
                required: true,
                validator: validatorAccountNumber,
                trigger: "blur"
              }
            ],
          }
        };
      },
      created() {},
      mounted() {},
      methods: {
        handleClick(tab) {
          
        },
        // 取消
        cancel() {
          
        },
        // 保存
        onSubmit(formName) {
          this.$refs[formName].validate(valid => {
            if (valid) {
              console.log("success submit!!");
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        }
      }
    };
    </script>
    
    <style lang="scss">
    </style>

**  2. validate.js**

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

--------------------

**效果图**

**![rules][]**

> **欢迎来访[我的vue专栏总篇][vue]博客**

希望能够帮助到你

over

[rules]: /images/20220329/614e36696b174ad0a5ad135a6f501928.png
[vue]: https://blog.csdn.net/qq_41402200/article/details/84390947