Uniapp小程序 表单校验数组类型数据（推荐使用uni扩展组件）

已于 2023-07-27 17:27:19 修改
阅读量551 收藏 1
点赞数 1
分类专栏： uni小程序 文章标签： uni-app 小程序 前端
于 2023-07-27 17:25:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52510500/article/details/131964880
版权

1. 定义表单所需数据

 2. 重点！！！：<uni-forms-item>绑定name属性和rules属性

     注意点：表单内容绑定值！！！（这里不使用列表渲染的item）

 3. 实现效果

 

BelieveTom、
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
vue（element）、uniapp常用的几种表单校验
Change!
10-22 3537
这里采用element中的rules，也可以通过手动判断实现 1.输入框/下拉选不能为空 name:[{ required: true, message: '不能为空',trigger: 'blur' }], sex:[{ required: true, message: '不能为空',trigger: 'change' }], 2.手机号： phone:[ { required: true, message: '不能为空',trigger: 'blur' }, { pattern: "^[1][
uni-app table表格
10-26
uni-app 表格示例 no-bad-table
uniapp+uview开发app时动态校验表单保姆式教程
最新发布
m0_67058130的博客
04-26 604
uniapp+uview开发app时动态校验表单保姆式教程
uni-app android js判断数值是否是数组
weixin_44659286的博客
11-07 325
判断是否是数组有的方法不适用，如instanceof。
uniapp之表单校验
一步一个脚印，踏实努力，向着目标前进
07-15 6548
在插件中，你可以使用属性来定义自定义的校验规则。rulevalue和callback。rule是当前校验规则的对象，包含了校验的条件和错误提示信息。value是要校验的字段的值。callback是一个回调函数，用于通知校验结果。如果校验通过，可以调用callback()；如果校验不通过，可以调用callback(new Error('错误信息'))。if(value!callback(new Error('自定义字段必须为 "custom"'));
uni-app 关于表单校验的一个特殊用法,看看你了解吗?
YM_010530的博客
09-28 502
身份证号区分性别, 确认密码
uniapp的表单校验方式整理
low666的博客
06-28 2398
这里我使用的模板为： uniapp本身自带表单校验的js文件，代码写的很简洁，也是比较全面的 应用代码： 第二种： uni-forms也带表单的校验，相较于第一种的话，校验的种类就不是很全了，可以自己传入校验规则进行校验，提示样式更加鲜明，只能说各利弊了。 代码比较多这里就不粘贴了。 没有找到手机号对应的校验方式，自己用的又比较多，所以手动在代码里面添加了 非常的便捷也可以在使用的时候添加自己的校验方式：
微信小程序实现表单校验功能
08-29
"微信小程序实现表单校验功能" 微信小程序实现表单校验...微信小程序实现表单校验功能需要考虑到组件化、非组件化、样式统一、校验规则等多方面的因素，通过合理的设计和实现，才能实现一个高效、灵活的表单校验功能。
基于uniapp微信小程序我的钱包页面
03-26
- **Recharge**和**Withdrawal**：这两部分可能涉及到表单提交，可以使用`uni-forms`、`uni-input`等组件，同时处理表单验证和提交逻辑。 5. **网络请求**：uniapp提供了uni.request接口，用于与服务器进行数据...
vue elementUI 表单校验功能之数组多层嵌套
12-08
Element UI的`el-form`组件提供了一套强大的表单验证机制，使得前端开发者能够方便地实现数据校验。然而，在处理复杂的数据结构，特别是涉及到数组和多层嵌套时，表单校验可能会变得相当棘手。本篇文章将详细介绍...
微信小程序简单实现form表单获取输入数据功能示例
08-28
微信小程序作为当前最流行的移动应用程序之一，其开发技术日益成熟，开发者可以使用微信小程序来快速构建各种类型的应用程序。其中，form表单是最常用的交互方式之一，微信小程序也提供了对form表单的支持。本文将...
微信小程序之表单校验
03-29
但是，作为一个非简单静态页面，有着较多用户交互的小程序，表单校验又是一个非常常用的功能：登录、注册、新增、编辑… 总而言之：表单组件的多样性 X 校验规则的多样性 = 复杂的公共业务 这么棘手的问题我们怎么来...
uniapp 表单使用Uview校验 包括城市选择器
04-08
城市选择器city.js
小程序表单校验WxValidate
08-10
该插件是参考 jQuery Validate 封装的，为小程序表单提供了一套常用的验证规则，包括手机号码、电子邮件验证等等，同时提供了添加自定义校验方法，让表单验证变得更简单。
微信小程序实现注册登录功能(表单校验、错误提示)
10-15
主要介绍了微信小程序 实现注册、登录功能(表单校验、错误提示),本文通过代码给大家详细介绍，需要的朋友可以参考下
基于uniapp的表白墙小程序源码.zip
05-18
在【描述】中提到的"表白墙小程序"，就是使用uniapp的这些特性，构建了一个互动性强、用户体验良好的小程序应用。 源码中的`star-love-letter-mini-main`目录很可能是整个项目的主目录，其中可能包含以下几个关键...
关于uni-app中uni-forms表单验证时“多级结构对象数据”如何做数据校验的解决方案
weixin_43403746的博客
03-02 3533
使用“动态表单校验”来解决uni-app中“多级结构对象数据”的校验问题，
uni-app，uni-table表格操作
a_靖的博客
04-17 9847
使用uni-ui UI框架实现表格加分页功能，uni-table 和uni-pagination 组件的使用示例加完整代码。
uniapp,页面跳转传参，参数为数组
ChenMoJie_的博客
12-07 1514
传： 接收：
uni-forms表单校验数组
05-14
如果你想在 uni-forms 表单中校验多个字段，可以使用一个数组来指定这些字段。具体来说，你可以在 `uni-forms` 组件中使用 `:rules` 属性来指定表单校验规则，并将校验规则数组传递给该属性。 例如，如果你想校验一个包含名字、邮箱和密码字段的表单，可以使用以下代码： ```html <uni-forms :rules="formRules"> <uni-form-item label="Name" prop="name"> <uni-input v-model="form.name"></uni-input> </uni-form-item> <uni-form-item label="Email" prop="email"> <uni-input v-model="form.email"></uni-input> </uni-form-item> <uni-form-item label="Password" prop="password"> <uni-input type="password" v-model="form.password"></uni-input> </uni-form-item> </uni-forms> ``` 在这里，我们指定了一个包含三个元素的校验规则数组 `formRules`，每个元素对应一个字段。例如，对于名字字段，我们指定了一个 `required` 规则，对于邮箱字段，我们指定了一个 `required` 和 `email` 规则，对于密码字段，我们指定了一个 `required` 和 `minLength` 规则。 ```javascript data() { return { form: { name: '', email: '', password: '' }, formRules: [ { required: true, message: 'Please enter your name', trigger: 'blur' }, { required: true, message: 'Please enter your email', trigger: 'blur' }, { required: true, min: 6, message: 'Password length must be at least 6 characters', trigger: 'blur' } ] } } ``` 这样，当用户提交表单时，`uni-forms` 组件会自动对这三个字段进行校验，并在校验失败时显示相应的错误信息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值