TDesign表单rules通过函数 实现复杂逻辑验证输入内容

最新推荐文章于 2024-01-18 11:50:22 发布
最新推荐文章于 2024-01-18 11:50:22 发布
阅读量1k 收藏
点赞数
文章标签： tdesign
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966674/article/details/132579755
版权

Element ui 中 我们可以通过validator 绑定函数来验证一些不在表单model中的值 又或者处理一下比较复杂的判断逻辑
在这里插入图片描述
TDesign也有validator 但比较直观的说 没有Element那么好用
在这里插入图片描述
这里 我们给validator绑定了我们自己的checkAge函数
这个函数中 只有一个参数 value 而且 如果你的v-model绑定的值不在表单data绑定的对象中 这个value拿到的会是undefined

好在 我们在函数中可以直接通过 this拿到响应式数据
就比如这里 我们判断this.imageValue 是不是等于空字符串
然后这里 你直接在函数中 返回 true 表示验证通过 返回false 表示验证失败
验证失败 他会输出你message中绑定的内容
就没有Element ui中的这个callback处理提示了
如果你想判断多个逻辑 就只能写多个了
在这里插入图片描述
老实说 很直观的没有Element ui好用

瑞晟技术服务中心-耿瑞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序开发中的表单提交与数据验证
2401_85258012的博客
06-22 337
在开发过程中，我们需要设计表单，让用户输入相关信息，并且对用户输入的数据进行验证，确保数据的正确性和完整性。本文将从表单设计、数据验证、错误提示等方面详细介绍微信小程序开发中的表单提交与数据验证。通过合适的表单设计、数据验证和错误提示，可以提高用户的输入体验，并且确保数据的正确性和完整性。函数用于验证表单数据，它遍历了表单数据对象，根据验证规则进行验证。在用户输入完表单数据后，我们需要对输入的数据进行验证。下面以手机号验证为例，介绍数据验证的实现。当用户点击表单的提交按钮时，我们需要执行表单提交的操作。
【ant-design】表单validate验证名称重复
qq_43691733的博客
10-08 329
【代码】【ant-design】表单validate验证名称重复。
vue3 + tdesign 自定义校验规则
weixin_61578719的博客
11-08 464
select。
vue 项目antDesign动态表单添加校验案例
肖帅的博客
11-25 9417
vue 项目antDesign动态表单添加校验 如下图所示 1，在表单页面中，a-form-model-item 标签可嵌套 2，使用prop传值时使用form表单定义的字段 主要代码如下 <div class="form_area" v-for="(item, index) in form.domains" :key="index"> <a-form-model-item style="display: inline-block;text-align: le
tdesign的使用记录
最新发布
Anyuegogogo的博客
01-18 537
复杂表单校验
Ant Design 表单项校验方式
是秃子总会发光
12-22 3322
Ant Design 表单项校验方式
表单校验validate和validateField的使用及区别
weixin_45559449的博客
03-09 5827
在对表单进行校验时，只需要通过 rules 属性传入约定的验证规则，并将 FormItem 的 prop 属性设置为需校验的字段名即可。注意：表单项有几个，回调函数就会执行几次，执行顺序为数组书写顺序，每次返回对应表单项的校验结果。使用 validateField 对某个表单项进行校验，当回调函数返回值valid 为空（‘’）时，表示校验通过，不为空时表示校验不通过。使用 validate 对整个表单进行校验，回调函数返回值valid 为true时代表校验通过，false代表校验不通过。
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能（函数防抖）
12-13
一、函数节流(throttle) **函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次**。有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效。 ### 1.如何...
angular 表单验证器验证的同时限制输入的实现
12-11
在Angular框架中，表单验证是确保用户输入符合特定规则的关键功能。...通过结合内置的`Validators`和自定义验证器，我们可以灵活地构建复杂、健壮的表单验证机制，同时确保用户输入始终符合预期的格式。
JavaScript通过正则表达式实现表单验证电话号码
12-01
总的来说，通过理解正则表达式的工作原理以及如何在JavaScript中使用它们，我们可以创建强大的表单验证功能，确保用户输入的电话号码符合预期的格式。对于更复杂的应用场景，可能需要结合其他验证库或服务来进一步...
PHP开发中常用的三个表单验证函数使用小结
12-18
这个函数适用于验证表单数据，尤其是检查输入是否为空或无效。但需要注意的是，当需要检查的变量可能为0时，如年龄等，`empty()`可能会误判，因为它会将0视为空值。 3. `is_numeric()`： `is_numeric()` 用于检测...
通过正则表达式实现表单验证是否为中文
09-04
在实际应用中，这个函数可以集成到表单验证的逻辑中，例如： ```html 提交 document.getElementById('myForm').addEventListener('submit', function(e) { e.preventDefault(); // 阻止默认的表单提交行为...
微信小程序表单验证方式
qq_45121945的博客
04-14 7457
因微信小程序上没有自带表单验证,为了实现和vue的组件库类似于的表单验证,这个时候我们就需要借鉴一个文件WxValidate表单验证的js插件,以下只是做个列子,需要更多验证请往官网文档查看 插件下载地址及官方文档：https://github.com/skyvow/wx-extend 具体的WxValidate.js文件的位置在wx-extend/src/assets/plugins/wx-validate/WxValidate.js 1.文件的复制 首先要把WxValidate.js复制到微信.
表单 自定义校验 函数
pengboran的博客
10-27 436
对于复杂表单类型，如表单对象嵌套一个对象 1.创建 rules.js 文件 let common = { checkRules(params, rules) { //表单校验 for (let key in rules) { let arr = rules[key] for (let i = 0; i < arr.length; i++) { let rule = arr[i], val = params[key] === 0 ? '0' : params[key]
策略模式+科里化封装表单校验函数生成rules
Suk__的博客
11-03 110
因为表单的校验的逻辑是可以复用的,所以可以把校验的逻辑都抽取出来,然后用柯里化去调用,传入校验的策略名和校验的错误信息,返回validator给rules的自定义校验函数。
Ant Design表单的使用
Mr-yang的随笔
08-11 2181
文章目录一、基本介绍二、this.props.form 属性提供的 API1、getFieldDecorator2、getFieldValue3、setFieldsValue4、validateFields三、格式限制验证1、输入框不能为空限制2、输入框字符限制3、自定义校验4、whitespace空格报错5、pattern正则验证 一、基本介绍 虽然 react 没有内置的表单验证逻辑，但是我们可以使用 react 组件库 AntDesign 中的表单组件 Form 来实现这一需求。 具体地， A
讲一讲Vue+Ant Design表单验证
极客神殿
12-12 8247
Form和FormModel都具有数据收集、校验和提交功能，区别就在于是否支持双向绑定式的校验功能，如果使用FormModel，Ant Design版本需要1.5.0+。在中，提供FormModel表单组件，且支持v-model数据绑定，同时可以校验和提交功能的表单。在官方还提供用来异步校验表单。基本用法包括定义一个descriptor，将其分配给一个schema，并将要验证的对象和一个回调函数传递给schema的validatename : {} });
标题关于antd design 的表单数据提交（React框架）
cjcora的博客
06-13 2023
** 标题关于antd design 的表单数据提交（React框架）** 1.简单方式： 将提交按钮放在form表单内部，htmlType写为‘submit’。Form组件有onFinish属性可以获取此表单的value。具体操作如下： 此时可以将value值打印出来 2.当button在Modal组件时 这是我一直有疑惑的地方，因为Modal里面嵌套Form是一种常见用法，此时button在Modal的footer里面。不能通过onFinish获取。 之前尝试通过ref获取值，但是始终失败。后
antd组件库form表单加了rules验证后输入内容也提示
05-24
是的，Antd组件库的Form表单组件提供了rules验证功能，该功能可以在用户输入内容时进行实时验证，并在输入框下方提示错误信息。如果您希望在用户输入内容之后才进行验证，可以使用Form的submit方法来触发验证，而不是使用实时验证。例如： ```jsx import { Form, Input, Button } from 'antd'; const Demo = () => { const onFinish = (values) => { console.log('Success:', values); }; const onFinishFailed = (errorInfo) => { console.log('Failed:', errorInfo); }; return ( <Form name="basic" initialValues={{ remember: true }} onFinish={onFinish} onFinishFailed={onFinishFailed} > <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username!' }]} > <Input /> </Form.Item> <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]} > <Input.Password /> </Form.Item> <Form.Item> <Button type="primary" htmlType="submit"> Submit </Button> </Form.Item> </Form> ); }; ``` 在上面的例子中，Form组件的onFinish和onFinishFailed方法分别在表单提交成功和失败时被调用。如果您希望在用户提交表单之前进行验证，您可以在onFinish方法中手动触发表单验证，如下所示： ```jsx const onFinish = (values) => { form .validateFields() .then(() => { console.log('Success:', values); }) .catch((errorInfo) => { console.log('Failed:', errorInfo); }); }; ``` 这将使Form组件在提交表单之前进行验证，并根据验证结果调用相应的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值