Vue项目里面 表单的正则验证和表单验证(两种验证方式)

已于 2022-05-20 21:08:26 修改
阅读量1k 收藏
点赞数 1
分类专栏： 笔记 文章标签： vue.js elementui 前端
于 2022-05-20 20:17:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57262819/article/details/124889781
版权

在这里插入图片描述

{validator:     函数名        ,trigger:   'blur'}

这个和之前的函数定义不一样 ,但是data里面也可以定义函数
const samePwd = 一个函数
其实很值钱没什么区别

一般情况下 ,表单有两种校验的方式
第一种: 在这里插入图片描述
红框里面会存在正则的校验 也就是每一个输入框都有自己的校验规则
在这里插入图片描述

第二种: 在大多数情况下 第一种已经可以 但是为了防止 部分用户转空子 会存在第二种校验的方式
也就是再点击注册按钮的时候触发
在这里插入图片描述
这是ui组件库 自己已经封装好 的验证方法
在这里插入图片描述

Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
vue+elementui项目封装form表单公共正则验证
名人卷耶
09-25 1057
前期准备：在项目下创建一个工具包文件夹util，文件夹下创建一个formValidation.js文件 1、formValidation.js 文件 let tel = /^1(3|4|5|7|8|9)\d{9}$/; //手机号码 let name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/; //姓名 let FormValidate = (function() { function FormValidate() {} FormValidate.F.
vue+element表单校验封装
coder__wang的博客
11-08 1974
vue+elementui技术栈的小伙伴们，在平时项目里，特别是OA项目，会大量用到表单以及表单校验。经常会处理一些必填项，对它们是否有值的判断显得有些繁琐和臃肿，本文将封装方法，解决该问题。 最近业务中频繁增加必填项，之前的常规做法就是在提交、修改或者其他操作之前，判断必填项是否填写，做个拦截： 在每一个操作之前加上这些必填项的验证，如果有少量的必填项，可以这样处理，但是有大量必填项的时候，代码就会显得非常冗余。 现在尝试将抽出来形成方法，在提交、修改等操作之前调用该方法，.
vue2以及vue3基于el-table实现表格正则校验功能
最新发布
weixin_53339757的博客
08-01 834
vue2以及vue3基于el-table实现表格正则校验功能
前端利器 · 一文读懂 Vue Element UI VeeValidate 全局 表单验证 封装 （详细教程）
Bnana博客
04-04 2844
前端利器 一文读懂 Vue Element UI VeeValidate 全局 表单验证 封装 （详细教程 Vue 表单验证 Vue Element UI 表单 验证 Veevalidate 表单验证 表单验证解析 全局 表单验证封装 Vue 表单清空 Veevaliate 表单清空 veevalidate 3.2.5 veevalidate 自定义表单验证 Element UI 和 VeeValidate 表单验证对比 veevalidate 常用表单验证规则 一篇读懂 veevalidate 使用方法
elementui 按钮 表单_vue elementui form表单验证
weixin_39636857的博客
12-19 413
最近我们公司将前端框架由easyui 改为 vue+elementui 。自学vue两周 就开始了爬坑之路。业余时间给大家分享一下心得，技术新手加上第一次分享(小激动)，有什么不足的地方欢迎大家指正，多多交流才能共同进步！1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ，基于此封装了一些 可复用的代码。2.分析 vue给了我们不一样的前端代码体验 element ui 给我们一套功能...
vue+elementUI正则验证封装
余白x的博客
02-18 1114
正则表达式封装 validator.js export default { /** * 数字验证 */ isNumber(rule, value, callback) { if (!value) { //当使用时没有定义text则非空验证默认提示请输入 callback(new Error(rule.text ? rule.text : '请输入')); } else { // cons
Vue快速实现通用表单验证的方法
10-15
Vue.js 是一款流行的前端框架，尤其适用...在前后端分离的项目中，前端负责更多的业务逻辑和用户体验，因此掌握有效的表单验证技巧至关重要。通过合理的设计和适当的抽象，我们可以构建出高效、易维护的表单验证系统。
vue+elementUI实现表单和图片上传及验证功能示例
10-17
在现代的前端开发中，表单提交和图片上传是常见的交互形式，而Vue.js作为一种渐进式JavaScript框架，配合Element UI这一基于Vue 2.0的桌面端组件库，可以便捷地搭建出美观且功能强大的界面。 ### Vue + Element UI ...
vue.js表单密码强度验证代码
06-24
Vue.js，作为一个流行的JavaScript框架，提供了强大的数据绑定和响应式特性，使得构建动态交互的表单变得简单。本教程将深入探讨如何在Vue.js中实现一个密码强度验证功能，确保用户设定的密码达到一定的安全标准。 ...
vue form check 表单验证的实现代码
10-17
Vue Form Check 是一个基于 Vue.js 的表单验证插件，它提供了一种简单的方式来校验用户在表单中输入的数据。下面将详细解释如何在 Vue 应用中使用 Vue Form Check 进行表单验证。 首先，为了使用 Vue Form Check，...
vue封装 element-ui form表单验证 正则匹配手机号 自定义校验表格内容
weixin_55103282的博客
10-18 312
在methods:中写： //检查手机号 isCellPhone(val) { if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) { return false; } else { return true; } }, 需要验证手机写的是 element框架中prop="phone"验证规则 <el-form-item label="手机号" prop="phone"&g
vue中通用正则验证
qq_41781984的博客
12-11 1552
新建utils文件，在此文件下新建validate.js /* 是否手机号码 */ export function validatePhone (rule, value, callback) { const reg = /^[1][3,4,5,7,8,9][0-9]{9}$/ if (value == '' || value == undefined || value == null) {...
Vue表单校验与正则表达式
c_x_m的博客
08-29 1425
Vue表单校验与正则表达式
VUE项目中如何进行表单校验
热门推荐
m0_57524265的博客
05-29 1万+
本文主要讲解Form 表单的必填项校验、正则验证、自定义校验规则和兜底校验
vue项目中登录注册模块表单校验规则（使用element表单组件）
编程小白的博客
10-10 174
【代码】vue项目中登录注册模块表单校验规则（使用element表单组件）
vue+elementui 表单验证封装
qq_42882723的博客
07-21 472
el-form-item.js function getPropByPath(obj, path, strict) { let tempObj = obj path = path.replace(/\[(\w+)\]/g, '.$1') path = path.replace(/^\./, '') let keyArr = path.split('.') let i = 0 for (let len = keyArr.length; i < len - 1; ++i) {
Vue（二）--- 表单验证
m0_46104664的博客
05-13 4073
Vue中表单数据的验证方法 <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="50px" class="demo-loginForm"> <el-form-item label="账号" prop="userAccount"> <el-input type="text" v-model="loginForm.userAccou
Vue表单提交正则表达式验证使用案例
hkl_Forever的博客
07-22 905
7、属性 validator 为自定义校验器，示例校验器为 validateXxxNo。自定义校验器对象必须写在 表单使用验证规则对象 前面(上面)，否则可能会无法引用。6、属性 min、max 输入字符最小、最大长度限制。1、sendRules 是表单使用的验证规则对象。2、定义表单中用到的实例、变量、交互dto等。2、属性 xxxNo 是具体校验那个属性字段。3、属性 required 非空校验。4、属性 message 提示字样。5、属性 trigger 触发事件。1、表单布局及变量定义。
Vue项目中vee-validator表单验证教程与国际化配置
vee-validator提供了一种灵活的规则设置方式，开发者可以根据实际需要定义验证规则，例如必填验证、格式验证、正则表达式验证等。这些规则可以在`validatorRule.js`中编写，然后在需要的地方引用，如在表单字段上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值