iview Form 表单验证小结

最新推荐文章于 2024-05-23 15:27:50 发布
最新推荐文章于 2024-05-23 15:27:50 发布
阅读量2.3w 收藏 15
点赞数 1
分类专栏： CSS Javascript Vue iView 文章标签： iView validate 表单验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_31231955/article/details/82344273
版权

手头的项目有一个需求是创建自定义表单模板，深入使用了iview的Form控件，踩了不少iview的坑，同时也锻炼了validate相关的能力。

  • 基本知识

这里写图片描述
Form由一些FomeItem组成，可以为Form设置rule来指定相关表单项的限制条件。
通过$ref 可以访问到 Form 组件，调用 validate 函数，即可获取相应的校验函数。iview中，Form验证是根据FormItem的prop属性来验证。
在编写校验函数前，首先需要了解表单验证相关知识，参看iview组件中使用的异步表单验证插件 async-validator

  • validate function(source, [options], callback)
    即function( 验证对象（必须）, 验证选项（可选）, 回调函数（必须）)
  • rule function(rule, value, callback, source, options)
  • type 验证类型的限制，默认为string，全类型type如图
    全类型type
    一个栗子：
const validateNameList = (rule, value, callb
最低0.47元/天 解锁文章
cicistream
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iview form清除校验状态的实现
10-16
主要介绍了iview form清除校验状态的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue+iview4实现添加配置功能，可多条添加，一条时候不可删除，多条可删除。另附加iview下拉框实现传多参功能，
Hzq88888的博客
03-19 373
<Form-Item label="配置政策：" prop="allocationPolicy" class="redTipForm"> <div style="display: flex;justify-content: space-between;align-items: center" v-for="(item,index) in formValidate.allocationPolicy" :key="index"> ...
uview1.0 u-form表单回显校验不通过
最新发布
weixin_47517731的博客
05-23 509
原因，u-form表单校验的类型默认为string，但是后端返回的是integer类型，导致无法通过校验。解决，既然后端返回的是整数形，那么我们就将校验规则的type改为整数型。提交到后端的数据，回显后不做任何修改无法通过表单校验。
iview input maxlength 最大输入长度 报错
weixin_40918145的博客
06-18 1668
iview input Invalid prop: type check failed for prop "maxlength". Expected Number, got String 1、代码如下 <Input v-model="formValidate.name" placeholder="最多40个字符" maxlength="40" show-word-limit clearable ></Input> 2、官网API如下 3、报错信息如下 4、修改方案
iview form rules添加校验问题
xiaowu0929的博客
01-16 503
然而，在多次测试后发现，这个this一直是第一次获取到的那个this，内部所有的值都没有跟据组件内的变化而变化，也就是说，validator第一次拿到this之后，就固化下来了。我不清楚是什么原因导致的，后来的解决方案是将validator函数写在js文件中，把原本作为对象引入的twoValidate修改为函数，在组件中通过call绑定this调用，目前测试下来没有发现问题。在formData中相应startTime符合条件的情况下，仍然提示‘结束时间不能小于开始时间’，代码如下图所示。
iview -- form表单验证
idomyway的博客
05-21 1481
前言     iview中from表单的验证默认只验证string类型，这就导致number、date、array等类型的from项不能进行验证      注意：Select from验证主要是看Select的值的类型 <template> <Form ref="formRef" :model="fo...
vue 表单验证由异步变更为同步
weixin_41431016的博客
07-08 2748
写前端项目时vue表单验证突然变成异步了，导致如果获取校验函数的返回值，应该是升级iview组件导致的，这里记录一下改为同步的一种写法 实现功能：表单中进行规则设置，当触发提交或者流程中的下一页时触发这些规则校验 表单 <Form ref="businessInfo" :model="businessInfo" :rules="businessInfoRule" :label-w...
iview 表单 验证
活在当下
03-30 1999
iView表单组件使用async-validator验证器对表单域中数据进行验证，给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。 完整的验证规则请参照开源项目 async-validator。 验证方法也支持 Promise。 当我们对表单中某个string类型的域设置为必填时，我们可以使用如下规则 {type: 'string' ,required:true,message:'不能为空'} 但是如果我们直接输入空格也会通过验证 如何
浅谈关于iview表单验证的问题
10-17
主要介绍了浅谈关于iview表单验证的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
iview同时验证多个表单问题总结
12-29
在上一篇文章中总结了iview表单验证的问题。其实有两种写法：在点击验证时，这样写时，注意在前面的方法中将要验证的form表单加进去。 <Form ref=addAreaForm :model=addAreaForm :rules=ruleValidate :label-...
iview Form表单校验自定义校验
qq_37496470的博客
05-13 1874
Form 组件基于 async-validator 实现的数据验证，给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。 下面是完整代码： <template> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <FormItem label="Name" prop=.
iview中form表单自定义校验事件
weixin_48674314的博客
10-30 1128
示例一： 这里校验输入的生成的验证码与输入的验证码是否一致。 1. 在form表单里定义一个校验对象。 verify就是校验对象 <Form ref="accountNumber" :label-width="180" :model="formValidate" :rules="verify"> <Row> <Col span="18"> <Form...
iView中Form表单的验证（自定义验证、动态增减项验证）
Alice_hhu的博客
07-02 5369
在使用 iView框架做后台管理系统重构，碰到一个能使用到多种验证场景的配置页面，记录一下各种验证方式 【页面】 【重点代码】 <template> <div style="max-height: 500px; overflow: scroll;"> <Form ref="createForm" :model="newConfig" :rules="ruleValidate" label-width="150"> <FormItem la
iview From表单清除校验状态
heerey525
11-05 4467
<Form ref="addOrUpdateInfoRef" :model="addOrUpdateInfo" :label-width="110" :rules="ruleValidate"> <FormItem label="投放时间" class="ivu-form-item-required"> <FormItem label="" prop="putInTime"> <DatePicker :disabled="addOrUpdat
iview 非空验证_记录 iView 的表单验证
weixin_32260275的博客
02-01 230
iview表单验证必要设置1. 给 Form 标签用 :model 绑定数据2. 给 Form 标签里面必须添加 ref , 用于最后提交获取 Form 表单的实例3. 给 Form 设置属性 rules :rules4. 给需要验证的每个 FormItem 设置属性 prop , 用于表单验证和绑定属性一致iview验证多个表单问题export default {methods:{this.$r...
关于iview表单验证的问题
热门推荐
Amanda_wmy的博客
01-10 3万+
关于iview表单验证的问题 iview表单验证的步骤： 第一步：给 Form 设置属性 rules :rules 第二步：同时给需要验证的每个 FormItem 设置属性 prop 指向对应字段即可 prop=”“ 第三步：注意：Form标签里面是 :model 第四步：注意：在Form标签里面必须添加 ref,相当于id,在此范围内的表单验证有效 第五步：在操作保存按钮时，添加方
iView表单验证
任重道远
06-07 1万+
首先对我是用的环境进行一下说明： vue-cli + iview； 安装好 iview 组件库，然后引入，具体就不再赘述，可以看我的另一篇博客； Form表单的使用： 绑定数据 // 接受数据的对象 data(){ return{ userInfo: { username: '', password: '', captcha: ''...
vue项目汇总，iview自定义验证器的问题
Autism、陌亡
01-26 1万+
在使用iview前端组件的过程中，有时候使用它自带的验证器往往不能满足我们项目中的需求，有时候就需要按照项目需求自定义，iview自带的form验证其实不错，但有些特殊的还是需要自己来实现一些特殊的或者复杂的验证器。
iview form 表单移除校验效果
05-13
iview form表单通过校验规则来确保用户输入数据的合法性。但是有时候我们需要移除某些校验规则来满足特定需求。 iview form表单提供了两种方法来移除校验规则，分别是通过表单ref属性和通过字段的prop属性。 通过表单ref属性移除校验规则，需要先获取表单对象，然后调用$refs.formName.removeRule()方法。其中，formName为表单的ref属性值，removeRule()方法中传入的参数为需要移除校验规则的字段的prop属性值。 实例如下： ```html <template> <Form :model="form" :rules="rules" ref="form"> <FormItem label="姓名" prop="name"> <Input v-model="form.name" /> </FormItem> <FormItem label="手机号" prop="phone"> <Input v-model="form.phone" /> </FormItem> <FormItem> <Button @click="removePhoneRule">移除手机号校验</Button> </FormItem> </Form> </template> <script> export default { data() { return { form: { name: '', phone: '' }, rules: { name: [{required: true, message: '请输入姓名', trigger: 'blur'}], phone: [{required: true, message: '请输入手机号', trigger: 'blur'}, {pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}] } } }, methods: { removePhoneRule() { this.$refs.form.removeRule('phone'); } } } </script> ``` 通过字段的prop属性移除校验规则，只需要在校验规则中将该字段的校验规则设置为一个空数组即可。 实例如下： ```html <template> <Form :model="form" :rules="rules"> <FormItem label="姓名" prop="name"> <Input v-model="form.name" /> </FormItem> <FormItem label="手机号" prop="phone"> <Input v-model="form.phone" /> </FormItem> <FormItem> <Button @click="removePhoneRule">移除手机号校验</Button> </FormItem> </Form> </template> <script> export default { data() { return { form: { name: '', phone: '' }, rules: { name: [{required: true, message: '请输入姓名', trigger: 'blur'}], phone: [{required: true, message: '请输入手机号', trigger: 'blur'}, {pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur'}] } } }, methods: { removePhoneRule() { this.rules.phone = []; } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值