iview中的Form表单校验

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

#iview

本文介绍了一个使用iview UI框架的表单校验示例，展示了如何在一个Modal弹窗中实现表单输入的即时校验。通过Form组件结合InputNumber控件，实现了对‘期望频率’字段的有效性检查，确保用户输入符合预设范围。

iview Form表单检验

<Modal
      class='frequency-box'
      v-model="isShowModel"
      :title="data.name"
      :loading="loading"
      @on-ok="ok"
      @on-cancel="cancel">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
        <FormItem label="当前频率:">
          <InputNumber :v-model="formValidate.data" disabled/>Hz
        </FormItem>
        <FormItem label="期望频率:" prop="expectData">
          <InputNumber v-model="formValidate.expectData" placeholder="30 ~ 60" @on-focus="inputFocus"/>Hz
        </FormItem>
      </Form>
    </Modal>

在校验中

ok () {
      this.$refs.formValidate.validate((valid) => {
        this.loading = true
        if (valid) {
          this.$Message.success('Success!')
          this.isShowModel = false
        } else {
          this.loading = false
          this.$nextTick(() => {
            this.loading = true
          })
          this.$Message.error('Fail!')
        }
      })
    },
vue中iview组件实现表单数据的动态校验
aaa123aaasqw的博客
05-11 1619
【代码】vue中iview组件实现表单数据的动态校验。
iviewui表单验证新手教程
最新发布
行思理的博客
12-27 998
指示type要使用的验证器。string：必须是string类型，默认类型number：必须是number类型boolean：必须是boolean类型method：必须是function类型regexp：必须是的实例RegExp或创建新的时不会产生异常的字符串RegExpinteger：必须是number整数类型float：必须是number浮点数类型array：必须是由数组object：必须是object且不是enum：值必须存在于enum中date：值必须为Date类型url：必须是。
iView中Form表单的验证（自定义验证、动态增减项验证）
Alice_hhu的博客
07-02 5947
在使用 iView框架做后台管理系统重构，碰到一个能使用到多种验证场景的配置页面，记录一下各种验证方式 【页面】 【重点代码】 <template> <div style="max-height: 500px; overflow: scroll;"> <Form ref="createForm" :model="newConfig" :rules="ruleValidate" label-width="150"> <FormItem la
iView中表单(动态)Form的校验
k0933的博客
11-17 3108
iview 动态表单校验
iview form表单校验
干脆来碗面的博客
10-30 536
iview form表单校验 input校验时限制最多字数以及最小字数 ruleValidate: { refund_reason: [ { required: true, message: '请输入退费原因', trigger: 'blur' }, { type: 'string', min: 1,max:20, message: '退费原因不可为空,最...
iview form清除校验状态的实现
10-16
在进行前端表单设计和开发时，经常需要对表单的校验状态进行管理。特别是在具有动态表单功能的应用...对于使用iview框架的前端开发者来说，这些知识点非常有价值，有助于在开发过程中更加灵活地处理表单校验相关问题。
Iview Select Form表单校验 Vue2项目 踩过的坑
zerlinda0913的博客
05-31 340
官方文档写得不详细，开发项目的时候在select中踩了好多坑， 业务需求，需要拿option循环数组3个值，这时候怎么办，只看到官网提供绑定的label与value，只有两个值，我还要拿个值怎么办？绑定一个tag 业务需求在一个数组中每个元素对象的下拉列表要变化，怎么把v-for循环遍历的东西传进去，并且拿到on-select事件中绑定的值了？ 这样就可以 然后select数据回显的问题，v-model的值绑定的是option中绑定的value值 ......
iview同时验证多个表单问题总结
12-29
其实有两种写法：在点击验证时，这样写时，注意在前面的方法中将要验证的form表单加进去。 <Form ref=addAreaForm :model=addAreaForm :rules=ruleValidate :label-width=120></Form> //点击确认按钮 &...
iview 表单 验证
活在当下
03-30 2140
iView表单组件使用async-validator验证器对表单域中数据进行验证，给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。 完整的验证规则请参照开源项目 async-validator。 验证方法也支持 Promise。 当我们对表单中某个string类型的域设置为必填时，我们可以使用如下规则 {type: 'string' ,required:true,message:'不能为空'} 但是如果我们直接输入空格也会通过验证 如何
正则表达式-实例集
逸只猫の博客
08-21 532
验证数字的正则表达式集 描述 正则表达式 验证数字 ^[0-9]*$ 验证n位的数字 ^\d{n}$ 验证至少n位数字 ^\d{n,}$ 验证m-n位的数字 ^\d{m,n}$ 验证零和非零开头的数字 ^(0 验证有两位小数的正实数 ^[0-9]+(.[0-9]{2})?$ 验证有1-3位小数的正实数 ^[0-9]+(.[0-9]{1,3
iview Form表单校验自定义校验
qq_37496470的博客
05-13 2066
Form 组件基于 async-validator 实现的数据验证，给 Form 设置属性 rules，同时给需要验证的 FormItem 设置属性 prop 指向对应字段即可。 下面是完整代码： <template> <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> <FormItem label="Name" prop=.
记录 iView 的表单验证
weixin_34050427的博客
05-09 168
iview表单验证必要设置 1. 给 Form 标签用 :model 绑定数据 2. 给 Form 标签里面必须添加 ref , 用于最后提交获取 Form 表单的实例 3. 给 Form 设置属性 rules :rules 4. 给需要验证的每个 FormItem 设置属性 prop , 用于表单验证和绑定属性一致 复制代码 iview验证多个表单问题 <template...
props传值的数据验证（类型、默认值、validator、自定义构造函数）
爱代码的小海的博客
09-27 1549
1.props校验 <template> <div> <!-- 自定义构造函数较为特殊，其他传参暂时忽略 --> <!-- 正常传参 --> <my-components :propsG='person'></my-components> <!-- 非正常传参 控制台报错 --> <my-components :propsG='12'></my
IVIEW Form 表单验证
小菜的博客
11-25 810
下面的代码是简单的，不会报错，可以运行下，看看结果 <template> <Form :model="qwe" :rules="zxc"> <FormItem prop="vvv"> <!-- 我用了 rules 中那个具体的属性 --> <Select v-model="qwe.vvv"> <!-- 有了要验证的属性，必有要有！ --> <Option value="beijing"&
iview中的form表单进行多层嵌套对象的校验
sunqy1995的博客
04-27 4934
iview的form表单校验 iview是常用的vue的ui组件，其中实现了许多的功能，其中一个最常用的还是表单功能，iview自带了表单的校验功能，在保存的时候通过调用validate方法就可以进行表达校验。 将form中绑定的值放在model上面，将每个需要进行校验的规则写在rules中 在form-item的prop上写上相应的键值 在需要校验的时候调用validate方法进行规则校验 ...
iview中form表单自定义校验事件
weixin_48674314的博客
10-30 1357
示例一： 这里校验输入的生成的验证码与输入的验证码是否一致。 1. 在form表单里定义一个校验对象。 verify就是校验对象 <Form ref="accountNumber" :label-width="180" :model="formValidate" :rules="verify"> <Row> <Col span="18"> <Form...
Vue iview form表单验证失效
qq_45094682的博客
09-20 3259
当Form表单添加rules格式校验时，我们一般会采取默认iview form表单校验，这导致一些数字类型(number)的数据验证失效
竞争神经网络 python_用python解决kaggles奔驰环保竞争
weixin_26719331的博客
08-19 589
竞争神经网络 python 介绍 (Introduction) In this part, we’ll do most of the work for this competition: We’ll come up with a good validation technique, we’ll hyperparameter tune a Random Forest, and we’ll also ...
iview Form 表单验证小结
热门推荐
cicistream
09-19 2万+
手头的项目有一个需求是创建自定义表单模板，深入使用了iview的Form控件，踩了不少iview的坑，同时也锻炼了validate相关的能力。 基本知识 Form由一些FomeItem组成，可以为Form设置rule来指定相关表单项的限制条件。 通过$ref 可以访问到 Form 组件，调用 validate 函数，即可获取相应的校验函数。iview中，Form验证是根据FormI...
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> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值