element-ui 表单验证的问题

最新推荐文章于 2024-06-20 15:19:29 发布
原创 最新推荐文章于 2024-06-20 15:19:29 发布 · 1.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#element-ui

本文探讨了在项目中遇到的表单验证问题，特别是在切换发放规则时的验证信息显示异常。通过watch发放规则状态并在切换时清除验证，解决了‘请输入金额’的验证信息残留问题。

最近在做的项目有表单验证的问题，因为有切换显示

，

当我选择发放规则为固定金额时，没有输入金额，有提示信息，单击切换发放规则，出现如下图

全部商品下方会出现“请输入金额的验证信息”

解决办法：当切换的时候去watch发放规则的状态，然后清除验证

"formData.distributeMainRule":function(n,o) {
     this.$refs.editForm.clearValidate(["distributeGoodsRule","distributeAmount","goods"]);
 },

 

详解element-ui中表单验证的三种方式
10-16
在使用Element-UI开发时，表单验证是必不可少的功能之一，它可以帮助我们保证用户输入的数据是正确和有效的。本文将详细介绍Element-UI中表单验证的三种常用方式，并通过示例代码进行说明。 首先，Element-UI提供的...
详解element-ui 表单校验 Rules 配置 常用黑科技
12-28
指示type要使用的验证器。可识别的类型值为： string：类型必须为string。type 默认是 string // 校验 string: [ {type: 'string', message: `请输入字符串`, trigger: 'blur'} ] 测试字段 prop=string> <el v-...
vue elementUI 自定义电话验证
qq_42897782的博客
12-06 680
data() { var checkPhone = (rule, value, callback) => { if (!value) { return callback(new Error("手机号不能为空")); } else { const reg = /^1[3|4|5|7|8][0-9]\d{8}$/; console.log(r...
element-ui自定义手机号的验证
weixin_42349568的博客
06-21 818
实现： data() { var checkphone = (rule, value, callback) => { // let phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/; if (value === "") { callback(new Error("请输入手机号")); } else if (!this.isCellPhone(value)) { //
Vue+Element ui中常用表单验证----手机号、座机、传真、邮箱、身份证号、数字和带小数点的数字
L-seeker-Q的博客
08-16 1万+
情景：最近为前端form表单提交时需要验证一下几种特殊的输入数据格式进行验证，在此记录一下。 一：正则 1.手机号： const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;//11位手机号 2.座机和传真： const reg = /^(\d{3,4}-)?\d{7,8}$/;//座机和传真格式是一样的：区号-号码 3.邮箱： const reg = /...
element-ui 表单的验证不生效可能有以下几种原因：
最新发布
qq_70036866的博客
06-20 4502
表单组件没有加入到 el-form 中：element-ui 的表单验证是基于 el-form 组件的，如果没有将表单字段的组件包裹在 el-form 中，验证规则也不会生效。在自定义校验规则中，需要通过调用 callback 函数来返回验证结果，如果验证通过，则调用 callback()，否则调用 callback(new Error('错误信息'))。这里的 rules 属性中的 key 值需要与 form 对象中的字段名一致，否则验证规则不会生效。
element-ui手机号校验
qq_45791799的博客
11-02 1874
data() { var validatorPhone = function (rule, value, callback) { if (value === '') { callback(new Error('手机号不能为空')) } else if (!/^1\d{10}$/.test(value)) { callback(new Error('手机号格式错误')) } else { callback()
精选资源
element-ui.rar element-ui核心库压缩包
12-20
这段代码展示了如何创建一个包含两个输入字段的表单，并使用 Element UI 的表单验证功能。当点击“提交”按钮时，会调用 `submitForm` 方法，如果表单验证通过，会显示提示信息。 总的来说，Element UI 是 Vue.js ...
精选资源
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
使用element-ui +Vue 解决 table 里包含表单验证的问题
09-16
本文将详细介绍如何使用Element-UI和Vue.js来解决在表格中包含表单验证的问题。 首先，我们需要理解Element-UI的表单验证机制。`el-form`组件是表单的基础，它通过`:model`属性绑定数据模型，并通过`:rules`属性...
vue+element-ui中的表单验证（电话等等）
weixin_30402085的博客
11-30 910
1. 2. 3. ============================================================上代码============================= ===>本页面的vue源码： <template> <div> <el-form :model="ruleForm" :rules="r...
elementui校验手机号
资深Bug开发大师
05-13 2359
【代码】elementui校验手机号。
elementUI表单验证遇到的问题
Leeyy
03-07 1102
属性：<el-input v-model="addForm.dutyTime" style="width: 60%" :disabled="true"></el-input>关键在prop这个属性，表单域没写prop属性，像是我能干出来的事，每次隔很久不干活就会忘记一些属性的作用，老想删除 （见不得一点冗余代码，bushi）b.借鉴前面的代码片段，改为 { required: true, message: "请输入质保期", trigger: "blur" },（无用）
element i18n 切换语言 表单验证提示不更新
凡尘
10-18 945
element 切换语言 表单验证提示不更新
Element-UI中的表单验证
热门推荐
yhang0802的博客
07-03 1万+
Element-UI中的表单验证
Element UI 中表单元素的验证机制
小海前端
12-08 2248
文章目录前言一、Element UI中表单元素的验证规则二、async-validator 的验证规则1、required2、type3、enum4、message5、trigger6、min、max7、len8、pattern9、validator三、两个官网案例总结 前言 Element UI 框架中的表单验证使用 async-validator（异步校验）第三方库实现，该库在 GitHub 的地址是 https://github.com/yiminghe/async-validator，至今在 Git
【vue2】使用elementUI进行表单验证实操
YQCC1的博客
12-09 4504
UI与Vant组件库的导入、注册、使用方法。
element-ui 表单校验，el-select校验失效问题
m0_66899315的博客
04-29 1万+
element-ui 表单校验，el-select遇到了校验失效问题，有值的情况下，校验规则并没有对应消失
elementUI的表单验证注意事项
qq_43537814的博客
07-17 197
elementUI的表单验证注意事项 el-form :model="dynamicValidateForm" 中的 :model指定要验证的对象， this.$refs[formName].resetFields();//对表单进行重置 对表单进行正则验证 rules: { ref: [ { required: true, message: "请输入编号", trigger: "blur" }, { min: 1, max: 11, messa
element-ui表单验证
10-17
element-ui提供了一套表单验证的方案，可以通过设置rules属性来实现。具体步骤如下： 1. 在表单元素上设置prop属性，该属性值为表单元素的字段名。 2. 在表单元素上设置rules属性，该属性值为一个数组，数组中每个元素都是一个验证规则对象。 3. 验证规则对象包含两个属性：validator和message。validator是一个函数，用于验证表单元素的值是否符合规则；message是一个字符串，用于在验证失败时显示错误信息。 例如，验证一个输入框中的值是否为数字： ``` <el-form-item label="数字"> <el-input v-model="number" prop="number" :rules="[{ validator: validateNumber, message: '请输入数字' }]"></el-input> </el-form-item> ``` 其中，validateNumber函数的实现如下： ``` methods: { validateNumber(rule, value, callback) { if (!value) { callback(new Error('请输入数字')); } else if (!/^\d+$/.test(value)) { callback(new Error('请输入整数')); } else { callback(); } } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值