uniapp+uview1.0动态表单的校验问题

已于 2022-08-19 11:37:08 修改
阅读量1.4k 收藏 6
点赞数 1
文章标签： uni-app
于 2022-08-18 15:10:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_70953528/article/details/126406156
版权

动态新增联系人的输入框并进行动态校验.

实现效果如下图所示:

 主要代码:

1.修改u-form-Item中的部分代码

2.在使用的页面中prop的写法也有一点点不同

(1)在data中先写校验的内容

(2)点击添加联系人时,将校验的内容放在规则校验里

(3)页面中的prop的写法如下

 然后就可以正常校验啦~

盛夏西瓜汁
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Vue2.0表单校验组件vee-validate的使用详解
11-30
vee-validate使用教程 本文适合有一定Vue2.0基础的同学参考，根据项目的实际情况来使用，关于Vue的使用不做多余解释。本人也是一边学习一边使用，如果错误之处敬请批评指出* 一、安装 npm install vee-validate@next --save 注意：@next,不然是Vue1.0版本 bower install vee-validate#2.0.0-beta.13 --save 二、引用 import Vue from 'vue'; import VeeValidate from 'vee-validate'; Vue.use(VeeValidate); 组件
图文详解 表单的验证方式
01-08
HTML5的input元素验证方式包括：自动验证方式1．min属性和max属性2．step属性调用checkValidity()方法实现验证自定义提示信息设置不验证 自动验证方式 HTML5表单自动验证主要是通过表单元素的属性设置来实现的。在图文详解 新的input类型和属性一文中介绍的input元素公用属性required以及pattern，就是分别用来验证输入框是否为空以及输入信息是否符合设定正则表达式规则的。一旦input元素设置了自动验证相关的属性，在表单提交时就会自动对输入内容进行校验，并对有校验不通过的信息给出相应的错误提示信息。 除了上面介绍的required和pattern属性
uniapp + uView动态表单校验方案
最新发布
Ted_Fan的博客
04-07 563
找到文件:uni_modules\uview-ui\components\u-form\u-form.vue 然后修改源码,最近项目上有个功能,需要给动态的form表单添加异步校验,经多方资料查找与汇总,现把解决方案记录分享一下。本项目使用的技术栈是 uniapp,前端UI框架使用的是 uView。
uview框架u-form表单校验，rules校验对象中对象的值(解决 当form属性嵌套对象时未取到值的问题)
热门推荐
苦修的木鱼博客
03-03 1万+
解决：uview框架 form表单校验问题 当form属性嵌套对象时未取到值的问题
uniapp中UView中 u-form表单在v-for循环下如何进行表单校验
weixin_41463944的博客
09-01 3955
uniapp中UView中 u-form表单在v-for循环下如何进行表单校验
iview表单部分字段验证方式
qq_32143923的博客
06-22 983
iview表单部分字段验证方式单字段验证多字段验证 单字段验证 this.$refs[formName].validateField(item, (error) => { console.log(error) }) 多字段验证 const validateField = ['username','password'] Promise.all(validateField.map(field => { const promise = new Promise(
动态表单：VUE动态表单
08-13
基于vue+Iview实现动态表单组件，通过拖拽组件到面板即可实现一个表单。支持各个组件的动态隐藏显示，动态表格弹窗式维护。
uview下表单动态校验的问题
wxid_mtnujb6ipc0322的博客
04-19 1623
Uview下表单动态校验问题
uview 动态表单校验
kathysnow的博客
02-23 819
【代码】uview 动态表单校验。
解决uview下表单无法动态校验的问题
csdn_zuirenxiao的博客
11-02 1万+
关于uniapp插件uview表单动态校验的一个解决方案
uniapp+uview框架模板
12-03
uniapp+uview框架模板
uniapp+uview2精美静态界面
10-28
一款uniapp+uview2精美静态界面 可快速换取数据替换主题 交互切换等效果都已完成，一个十个界面
微信小程序(uniapp + uView)自定义导航栏
02-29
微信小程序(uniapp + uView)自定义导航栏
前端开发模板+基于uniapp和uview+悉地吧源码（含独立后端）+供前端开发学习
05-12
1，前端代码使用uniapp+uview构建，后端用的thinkphp开发！同时涵盖多端（APP，H5，小程序等） 2，功能主要有分类信息发布，朋友圈分享等，可以后台自行添加分类 3，可以前往微信小程序搜索“悉地吧”，体验各项...
uniapp+router+uview
11-21
uniapp+router+uview
vue中iview组件实现表单数据的动态校验
aaa123aaasqw的博客
05-11 1312
【代码】vue中iview组件实现表单数据的动态校验。
uniapp uview 动态表单验证
suimengfeiyang123的博客
10-21 1478
1.uform组件修改代码（u-form.vue） 2.vue 页面form表单批量验证
帮我写一个uview可以动态添加from表单并且是多表单有校验规则的
weixin_42610671的博客
02-09 401
好的，以下是一个使用 uView UI 框架写的 Vue 组件，实现了动态添加 from 表单，并且每个表单都有校验规则。 <template> <div> <u-formref="form" :model="formData" :rules="rules"> <u-form-item v-for="(item, i...
uview form自定义组件如何做表单验证
04-01
uview form组件提供了一些表单验证的方法，可以在组件上设置验证规则。 1. 设置验证规则 在form组件上设置rules属性，rules属性是一个数组，数组中每个对象表示一个表单项的验证规则。例如： ``` <template> <u-form :rules="rules"> <u-form-item label="姓名" prop="name"> <u-input v-model="form.name"></u-input> </u-form-item> <u-form-item label="年龄" prop="age"> <u-input v-model="form.age"></u-input> </u-form-item> </u-form> </template> <script> export default { data() { return { form: { name: '', age: '' }, rules: [ { prop: 'name', required: true, message: '请输入姓名' }, { prop: 'age', required: true, message: '请输入年龄' } ] } } } </script> ``` 上面代码中，设置了两个表单项的验证规则，分别是必填项验证。 2. 触发验证 在form组件上设置ref属性，可以通过ref属性获取form组件实例，然后调用实例的validate方法触发验证。 ``` <template> <u-form :rules="rules" ref="form"> <u-form-item label="姓名" prop="name"> <u-input v-model="form.name"></u-input> </u-form-item> <u-form-item label="年龄" prop="age"> <u-input v-model="form.age"></u-input> </u-form-item> <u-button type="primary" @click="submit">提交</u-button> </u-form> </template> <script> export default { data() { return { form: { name: '', age: '' }, rules: [ { prop: 'name', required: true, message: '请输入姓名' }, { prop: 'age', required: true, message: '请输入年龄' } ] } }, methods: { submit() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过，执行提交操作 } else { // 表单验证未通过，提示错误信息 } }) } } } </script> ``` 上面代码中，点击“提交”按钮时，调用submit方法，通过this.$refs.form.validate方法触发表单验证，验证通过后执行提交操作，验证未通过则提示错误信息。 3. 定制验证规则 除了设置默认的验证规则，也可以在表单项上设置自定义的验证规则。 ``` <template> <u-form :rules="rules" ref="form"> <u-form-item label="姓名" prop="name"> <u-input v-model="form.name"></u-input> </u-form-item> <u-form-item label="年龄" prop="age"> <u-input v-model="form.age"></u-input> </u-form-item> <u-button type="primary" @click="submit">提交</u-button> </u-form> </template> <script> export default { data() { return { form: { name: '', age: '' }, rules: [ { prop: 'name', validator: (rule, value, callback) => { if (!value || value.length < 2) { callback(new Error('姓名长度不能少于2个字符')) } else { callback() } } }, { prop: 'age', required: true, message: '请输入年龄' } ] } }, methods: { submit() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过，执行提交操作 } else { // 表单验证未通过，提示错误信息 } }) } } } </script> ``` 上面代码中，自定义了姓名表单项的验证规则，如果输入的姓名长度少于2个字符，会提示“姓名长度不能少于2个字符”的错误信息。自定义的验证规则需要在validator属性中设置，validator属性是一个函数，函数接收3个参数：验证规则对象、表单项的值、回调函数。当验证规则不符合时，调用回调函数并传入错误信息，否则不传入任何参数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值