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

最新推荐文章于 2024-08-17 17:56:24 发布
最新推荐文章于 2024-08-17 17:56:24 发布
阅读量10w+ 收藏 370
点赞数 103
分类专栏： Vue 文章标签： vue vue表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41402200/article/details/86016313
版权

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 内容

<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 {
    data() {
        return {
            // 省略别的数据定义
            ...
        
            // 表单验证
            formRules: {
                accountNumber: [
                    {required: true,validator: validatorAccountNumber,trigger: "blur"}
                ]
            }
        }
    }
}
</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专栏总篇博客  

 

希望能够帮助到你

over

 

 

 

intomylife
关注
专栏目录
vue3 表单校验大全，含对象嵌套对象验证、数组格式验证、动态添加验证等
共同学习，共同成长
07-15 2494
大家好，我是码喽的自我修养！今天给大家分享vue3 表单校验大全，含对象嵌套对象验证、数组格式验证、动态添加验证规则、validateField 验证具体的某个某些字段等，由浅入深详细讲解！并提供具体代码帮助大家深入理解，彻底掌握！
详解vue如何使用rules对表单字段进行校验
10-17
主要介绍了详解vue如何使用rules对表单字段进行校验，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue2表单校验：el-form表单绑定数组并使用rules进行校验
最新发布
l_q_l的专栏
08-17 2210
1、在el-form中指定rule，可引用data或compute中集中定义的rules，也可以每一条item中单独定义自己的rule2、另外，花费1天的时间买来的教训：如果rules集中写，在el-form中已经引用了，那么在el-form-item中不能重复引用，否则console中不会报错，但是，rules将不起作用，且提示 people is not a string，即便在rules中添加了 type: 'array' 也不行。如下写法是错误的。​。
前端Vue中常用rules校验规则
执行上下文的博客
11-14 1万+
前提 在 vue开发中，难免遇到各种表单校验，这里整理了网络上和自己平时高频率用到的一些校验方法。如果错误欢迎指出，后期不断补充更新。 1、是否合法IP地址 export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); ...
Vue中rules表单验证（常用）
热门推荐
lzzw的学习之路
11-19 4万+
vue的rules用法及自带的校验规则和常用正则表达式校验
vue表单验证
weixin_44116344的博客
03-27 179
return callback(new Error('需以字母开头,可包含字母,数字,下划线'))return callback(new Error("邮箱不能为空"));return callback(new Error('邮箱格式需正确'))if (validEmail(value)) { 这里的值与引入的值一致。return callback(new Error('输入不能为空'))(8)重置校验规则(防止打开后仍然有有红字校验)(2)el-form-item 下。(1) el-form下。
vue表单rules校验
weixin_45928161的博客
03-19 1万+
文章目录一、表单校验1. 表单项校验2. 表单整体校验二、规则模板 一、表单校验 此部分详情可参考此博客《在vue中使用rules对表单字段进行验证》，这里只记录一下个人理解。 1. 表单项校验 form标签处申明，此标签要使用rules规则，如下图， :rules=“formRules”：formRules是后续我们自己编写的规则的名称； ref=“rulesForm”：获取整体表单的数据保存在rulesForm，用于校验整体表单做准备； :model="rulesForm：这个是JS处定义的变量，
【JavaScript源代码】vue 使用rules对表单字段进行校验的步骤.docx
12-29
4. **在 rules 中使用**：在组件的 `rules` 对象中，直接调用这些验证函数，传入相应的参数。 ```javascript data() { return { form: { description: '' }, rules: { description: [validateLen(200)] } };...
【JavaScript源代码】vue使用rules实现表单字段验证.docx
12-29
在`vue`中，你可以通过在数据对象`data()`中定义一个规则对象，然后将该对象绑定到`rules`属性上来指定每个表单字段的验证规则。例如： ```javascript data() { return { formRules: { userName: [ { ...
vue2.0 + ele的循环表单及验证字段方法
12-29
关于vue2.0 + ele的表单循环以及对应字段的验证！！！！！ html代码 <el ref=ruleForm inline=true model=form label-width=140px rules=rules v-loading.fullscreen.lock=fullScreenLoading element-loading-text...
Vue中常用rules校验规则(实例代码)
10-15
主要介绍了Vue中常用rules校验规则，本文通过实例代码个大家介绍了一些校验方法,需要的朋友可以参考下
vue表格的字段校验
Kobeloveu
12-07 1346
需求：表格中某个栏位为输入框，且是必填项！要求进行校验 设计如下： // 校验字段 const checkFieldArr = ['groupBuy', 'actualPrice', 'adjustPrice', 'skuQuantity'] // 返回信息 const messages = { groupBuy (index) { return `表格第${index + 1}行团购信息有误，请重新选择！！！` }, actualPrice (index) { return `表格第${in
vue 字段校验
Tttrycatch的博客
10-24 204
【代码】vue 字段校验。
vue的rules表单验证
工作内容分享
07-25 389
中定义rules规则。
Vue使用rules进行表单验证
qq_31603875的博客
06-27 7578
在web开发中表单验证是经常遇到的，学习一下Vue提供表单验证方式，下面是vue使用了element框架的一个登录表单： <template> <div> <el-form label-position="left" label-width="0px" class="demo-ruleForm login-container" :model="...
Vue rules校验规则详解
一碗清深的博客
11-16 2704
当我们在开发Vue应用时，经常需要对表单进行校验，以确保用户输入的数据符合预期。Vue提供了一个强大的校验规则机制，通过定义rules规则，可以方便地对表单进行验证，并给出相应的错误提示。
vue中的rules表单校验规则使用方法 rules=“rules“_ rules=&quot；rules
2401_84141410的博客
04-16 756
trigger：触发事件 => 一般blur用于input、chang用于select,picker等；点击提交时，会先对表单的值进行校验判断，校验通过后，再进行后续操作。el-form-item 里面使用 prop 属性绑定规则。el-input 里面使用 v-model 绑定表单值。required：显示输入框为选填或必填项；pattern：正则表达式；message：提示信息；
vue如何使用rules对表单字段进行校验
weixin_30657541的博客
05-06 585
基于element-ui 1、在代码中，添加属性：:rule <el-form :model="form" :rules="rules" ref="form" label-width="150px"></el-form> 2.新开一个文件夹（validate.js）定义验证规则： 3.在页面(index.vue)中引入验证规则定义的文件，并在expo...
vue rules当个字段校验
08-09
在Vue中，我们可以使用Vue的官方插件vue-rules来进行字段校验。vue-rules通过定义规则和验证方法的方式来实现字段校验。 首先，我们需要在Vue的实例中导入vue-rules插件，并将其注册为全局插件。然后，我们可以在Vue组件的data选项中定义需要进行校验的字段，并给字段设置初始值。 接下来，我们可以在Vue组件的methods选项中定义校验方法。我们可以使用vue-rules提供的验证规则，比如required、length、pattern等来对字段进行校验。在校验方法中，我们可以通过调用vue-rules的验证方法，将需要校验的字段和验证规则作为参数传入。 当用户输入数据时，我们可以在需要验证的字段上监听对应的输入事件，并在事件处理函数中调用对应的校验方法。如果校验失败，我们可以通过给字段绑定一个错误信息的变量，在页面上展示错误信息。 除了在用户输入数据时进行即时校验，我们还可以在提交表单时对所有字段进行校验。我们可以在提交表单的方法中遍历所有需要校验的字段，并逐一调用相应的校验方法，最后根据校验结果来决定是否进行表单提交。 总的来说，使用vue-rules进行字段校验可以帮助我们方便地对用户输入的数据进行验证，并提供了丰富的验证规则来满足不同的校验需求。使用此插件可以有效地提高表单的数据正确性和用户体验。
评论 13
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值