组件参数校验

最新推荐文章于 2023-06-17 15:19:20 发布
最新推荐文章于 2023-06-17 15:19:20 发布
阅读量144 收藏
点赞数
分类专栏： 前端网页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39872341/article/details/104642412
版权

父组件向子组件传值

在这里插入图片描述
在这里插入图片描述

约束传值为string型

在这里插入图片描述
在这里插入图片描述

约束传值为string和number

在这里插入图片描述
在这里插入图片描述

required 要求必须传值

在这里插入图片描述

default设置默认值

在这里插入图片描述

要求长度大于5

在这里插入图片描述

小小少年eason
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
组件参数校验与非props特性
07-11 74
父组件传递content="hello world"，子组件有权对其进行约束，或者说校验 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /...
我写了一套几乎无敌的参数校验组件！基于 SpEL 的参数校验组件「SpEL Validator」
最新发布
阿杆的博客
05-07 778
一个强大的 Java 参数校验包，基于 SpEL 实现，扩展自 javax.validation 包，几乎支持所有场景下的参数校验。
初识 Vue（16）---（组件参数校验与非Props特性）
姜皓的博客
07-28 867
组件参数校验与非Props特性 1.组件参数校验： 父组件向子组件传递内容，子组件可以对这些内容做一些约束，这种约束称为组件参数校验 示例：对传入数据 content 进行约束，必须为 string 类型数据 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &
组件参数校验与非Props特性
VVVZCS的博客
09-03 247
首先我们先正常显示一个hello world 发现可以正常显示，控制台也不会报错 那现在我们对父组件传递的content有一个类型要求，那么props里面就可以直接写一个对象，对象里面的key值就是我们传递的数据名，值就是类型名 那么，我现在把hello world改成123 页面也可以正常显示，而且也不报错 我们在content前面加一个冒号，他表示后面引号...
Vue 组件参数校验与非props特性的方法
10-17
本文将深入探讨Vue组件参数校验以及非props特性。 ### Vue组件参数校验 在Vue中，组件可以通过`props`选项来定义其可接收的参数。例如，如果子组件需要一个名为`count`的参数，并且期望它是字符串类型，可以这样...
自定义校验注解框架(validator)
04-18
综上所述，自定义校验注解框架"monkey-validator"可能包括了上述步骤的实现，提供了方便快捷的方式来创建和管理项目特定的参数校验规则。通过学习和使用这个框架，开发者可以更好地理解Java的注解机制以及如何构建...
Vue element-ui父组件控制子组件的表单校验操作
10-15
总的来说，Vue Element-UI的父组件控制子组件的表单校验操作主要是通过`ref`属性创建子组件引用，然后在父组件中调用子组件的校验方法来实现的。子组件则通过`el-form`和`el-form-item`的`prop`属性来设置验证规则，...
如何使用Spring Validation优雅地校验参数
08-18
幸运的是，Spring框架已经为我们提供了一套校验组件：validation，这套组件可以帮助我们实现优雅的参数校验。 Spring Validation是什么？ ------------------------- Spring Validation是Spring框架提供的一套...
12 Vue 组件参数校验与非 props 特性 用法汇总和案例
野路子云遇见不同的自己
10-23 258
12 Vue 组件参数校验与非 props 特性 用法汇总和案例
UI组件的表单校验
果果的博客
09-21 365
在开发中，表单校验是必不可少elementUI和iviewUI的表单校验都是类似的 目前我们开发大部分都用UI组件，下面来说一下element UI的表单校验。   1最简单的一种校验  2、官网提供的动态校验（具体看http://element-cn.eleme.io/#/zh-CN/component/form#form-biao-dan） 之前楼主用过iview的表单动态r...
java常用组件之校验 Validator
ghlat520的专栏
05-24 216
/* * Copyright (c) 2009 Skyon Technology Ltd. * All rights reserved. * * project: saps-util * create: 2009-8-17 下午03:11:13 * cvs: $Id: Validator.java,v 1.1 2010/06/07 03:23:59 dev_cvs Exp $ */package ...
vue多个组件校验
weixin_47093559的博客
06-17 672
vue同时校验多个子组件form表单
vue——组件参数校验与非Props特性
weixin_54362381的博客
08-23 631
组件参数校验与非Props特性 1、组件参数校验：父组件向子组件传递的数据，子组件有权对这些数据进行约束。 要进行约束的话，props就要是一个对象而不是数组，对象的键就是接收的参数的名字，对象的值是接收的参数需要满足的条件。 <div id="root"> <child :content="'hello world'"></child> </div> <script> Vue.component('child',{ //参数校验 //1、
vue element form 组件验证 父组件 验证子组件
Luckyzhoufangbing的博客
06-26 6314
场景：点击提交的时候，需要验证三个子组件（图片来源于网络） 实现： 父组件：使用Promise 以及Promise.all <template> <div class='order-book'> <!-- 共有属性 --> <PublicAttr ref='public'></PublicAttr> ...
vue 组件的参数校验props
qq_37550440的博客
02-12 598
props特性：在dom 不显示属性msg（自定义） 非props特性：在dom中会显示属性 父组件home <template> <div> <h1>home组件</h1> <!-- 没有加v-bind 传的值永远是字符串 --> <!-- <child msg='123'></child> --> <child1 :msg=
分组参数校验
技术人员
01-03 572
element表单校验多个组件以及校验不确定个数组件的校验方法
xt_XiTu的博客
06-12 888
由于需求实在太**，只能把一个大表单分成多个子组件、孙组件甚至重孙组件再去校验，而且其中孙组件还是不确定个数的，(；′⌒`)，用到了element的表单校验以及Promise.all 1、首先在各个组件页面写好能主动触发的校验方法，我是统一都写成一个方法名 各个页面区别主要是，最底层的重孙组件只按照正常的校验写就行，其他上级组件的方法中需要根据下级组件返回结果确定promise出去的结果 重孙组件 validateData() { // 校验 return new Promise((resolve, r
element form自定义校验在子组件用
09-06
在Element UI中，可以通过自定义校验规则来实现对组件输入内容进行校验。对于子组件，也可以使用Element UI的自定义校验功能来实现。 首先，我们需要在父组件中创建一个自定义校验的方法，该方法会作为参数传递给子组件。例如，在父组件中创建一个名为"validateForm"的方法： ``` methods: { validateForm(rule, value, callback) { // 自定义校验规则 // 如果校验通过，调用 callback() 方法，传递一个 undefined 作为参数 // 如果校验不通过，调用 callback(new Error('校验不通过的提示信息')) } } ``` 接下来，在父组件中使用子组件时，可以通过传递自定义校验方法给子组件的prop来实现自定义校验功能。例如： ``` <template> <div> <ChildComponent :validate="validateForm"></ChildComponent> </div> </template> ``` 在子组件中，可以通过props接收父组件传递过来的自定义校验方法： ``` props: { validate: { type: Function, required: true } } ``` 然后，在子组件相关的表单元素中，通过调用父组件传递过来的自定义校验方法来实现校验。例如，在子组件的模板中的 `<el-form-item>` 组件中使用自定义校验方法： ``` <el-form-item prop="字段名" :rules="[{ validator: validate }]"> <el-input v-model="data"></el-input> </el-form-item> ``` 这样，当输入内容发生变化时，将会调用父组件传递的自定义校验方法，实现对子组件的校验功能。 以上就是在Element UI中，如何在子组件中使用自定义校验的方法实现校验的介绍。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值