element子组件中的校验_Salesforce LWC学习(十六) Validity 在form中的使用浅谈
本篇参考:
https://developer.salesforce.com/docs/component-library/bundle/lightning-input/documentation
https://www.lightningdesignsystem.com/components/input/#Error
当我们在前端有表单操作或者有大量的输入性条件作为搜索条件情况下, 通常会有一些校验,比如非空校验,类型校验等等。针对salesforce lwc也好或者是aura也好,通常有以下情况的前端校验。
badInput:用来判断当前的输入内容是否是一个合法的值;
patternMismatch:用来判断当前输入内容是否符合指定模式;
rangeOverflow:针对数字相关的类型判断输入内容是否值过大超过了默认的最大值;
rangeUnderflow:针对数字相关的类型判断输入内容是否值过小小于默认的最小值;
stepMismatch:针对数字相关的类型,我们在输入框使用上或者下按钮以后,可以根据step设置的值进行相关的输入框内容的加或者减,当我们自己改的最终的值不符合step设定,会报错stepMismatch;
tooLong:指定value的长度是否超过当前设定的maxlength;
tooShort:指定value的长度是否小于当前设定的minlength;
typeMismatch:针对url或者email类型的变量,用来判断当前输入的value类型是否匹配;
valueMissing:针对必填字段没有填值情况下会报错这种类型错误。
当表单中校验出现这种情况时,会展示相关的默认的错误提示信息。
badInput
: Enter a valid value.patternMismatch
: Your entry does not match the allowed pattern.rangeOverflow
: The number is too high.rangeUnderflow
: The number is too low.stepMismatch
: Your entry isn't a valid increment.tooLong
: Your entry is too long.tooShort
: Your entry is too short.typeMismatch
: You have entered an invalid format.valueMissing
: Complete this field.
下图我们恐怕很熟悉了,经常看到类似当输入框不满足情况的默认的展示信息。通过下图可以更好的了解上面的一部分信息。
上面截图中的标红的效果展示即为本篇讲的validity,validity的使用可以使用户在大量的入力操作部分不满足情况下可以进行更好的定位,达到更好的用户体验。
标红操作的css实现样式可以查看上方的参考链接。我们本篇考虑的更多是如何使用。
在form表单中的入力选择的标签大部分都内置了checkValidity / reportValidity / setCustomValidity或者类似函数。比如 input / combobox等等标签。checkValidity用于验证当前的表单的元素是否符合要求,reportValidity用于在checkValidity基础上进行效果展示。如果当前元素符合要求,错误信息清除并且return true;如果当前元素不符合要求,则展示错误信息并且return false。
let allValid = [...this.template.querySelectorAll('lightning-input')] .reduce((validSoFar, inputFields) => { inputFields.reportValidity(); return validSoFar && inputFields.checkValidity(); }, true);
我们对上面的代码进行分析:
通过querySelectorAll获取到当前组件中 lightning-input;
对每一个 lightning-input元素使用reportValidity方法进行校验,如果当前元素符合要求,则返回true,如果不符合要求,返回false并且元素根据错误的类型展示错误的默认信息;
通过checkValidity来确认当前元素是否符合,符合返回true,不符合返回false。
需要注意的是,当form表单提交的时候,如果页面中有不符合的元素,并不会阻断你的表单提交。所以我们在页面提交以前如果看到了上面类似的提示不要掉以轻心,需要在save以前进行check,成功走save逻辑,不成功需要返回并且reportValidity()。
通过上面的demo中,我们可以看到使用querySelectorAll来遍历所有lightning-input元素进行reportValidity和checkValidity,这种方式只能遍历到当前component中的所有元素。如果组件包含了子组件,子组件中包含了 input等类似元素,并不能对子组件中的进行校验。以一个demo进行试验。
testSonInputComponent.html:仅用于展示一个输入框
<template> <lightning-input label="test son" required>lightning-input>template>
testParentInputComponent.html:引入testSonInputComponent并且在放一个input组件
<template> <lightning-layout multiple-rows="true"> <lightning-layout-item size="6"> <lightning-input label="test parent" type="text" required>lightning-input><br/> lightning-layout-item> <lightning-layout-item size="6"> <c-test-son-input-component>c-test-son-input-component> lightning-layout-item> <lightning-layout-item> <lightning-button label="validity" onclick={checkInputValidity}>lightning-button> lightning-layout-item> lightning-layout>template>
testParentInputComponent.js:遍历所有的input标签,进行reportValidity操作。
import { LightningElement } from 'lwc';
export default class TestParentInputComponent extends LightningElement { checkInputValidity() { let allValid = [...this.template.querySelectorAll('lightning-input')] .reduce((validSoFar, inputFields) => { inputFields.reportValidity(); return validSoFar && inputFields.checkValidity(); }, true); console.log('result : ' + allValid); }}
效果展示:当标签都没有输入情况下,只会校验到当前组件中的标签,子组件标签不会被校验到。
如果想要校验到,目前想到的方法为父组件调用子组件的方法,可以将相关子组件的校验功能弥补,但是无法将checkValidity的结果传递过来。如果想要查看allValid,只能在父组件根据是否有值,然后手动设置allValid变量。代码简单修改如下:
testInputSonComponent.js:对方法进行api标签声明,只有声明以后父组件才可以调用。
import { LightningElement, api } from 'lwc';
export default class TestSonInputComponent extends LightningElement { @api checkInputValidity() { let allValid = [...this.template.querySelectorAll('lightning-input')] .reduce((validSoFar, inputFields) => { inputFields.reportValidity(); return validSoFar && inputFields.checkValidity(); }, true); }}
testInputParentComponent.js:通过querySelector获取到子组件,然后调用子组件方法即可。
import { LightningElement } from 'lwc';
export default class TestParentInputComponent extends LightningElement { checkInputValidity() { let allValid = [...this.template.querySelectorAll('lightning-input')] .reduce((validSoFar, inputFields) => { inputFields.reportValidity(); return validSoFar && inputFields.checkValidity(); }, true);
this.template.querySelector('c-test-son-input-component').checkInputValidity(); console.log('result : ' + allValid); }}
效果展示:
此种方式的一个最大的问题是子组件的validity的结果并无法传递给父组件。项目中是根据子组件的值是否为空在父组件中校验然后设置allValid的值,除此以外没有想到好的方法,熟悉的小伙伴可以给出更好的方案。
除了标准的提示信息以外,lwc给我们提供了一个自定义error message的方法,即setCustomValidity。此方法在很多方法中均有类似的方法,用于当标准的提示信息不满足需求的时候或者自定义的一些校验想要展示自定义的提示信息情况下,使用的方案。当使用setCustomValidity,结合reportValidity即可展示自定义的error场景提示了。
对代码继续改造。当输入框内容不到2个字符进行自定义提示。
import { LightningElement } from 'lwc';
export default class TestParentInputComponent extends LightningElement { checkInputValidity() { let allValid = [...this.template.querySelectorAll('lightning-input')] .reduce((validSoFar, inputFields) => {
if(inputFields.value.length 2) { console.log('execute'); inputFields.setCustomValidity('输入的长度应该超过2'); } inputFields.reportValidity(); return validSoFar && inputFields.checkValidity(); }, true);
this.template.querySelector('c-test-son-input-component').checkInputValidity();
console.log('result : ' + allValid); }}
结果展示:
总结:篇中简单的介绍了Validity的简单实用,针对子组件如何更好的适应还没有特别好的方案,有好想法的朋友留言。篇中有不懂的欢迎留言,有错误的欢迎指出。
element子组件中的校验_Salesforce LWC学习(十六) Validity 在form中的使用浅谈相关推荐
- form必填默认校验_Salesforce LWC学习(十六) Validity 在form中的使用浅谈
本篇参考: https://developer.salesforce.com/docs/component-library/bundle/lightning-input/documentation h ...
- 【Microsoft Azure 的1024种玩法】二十六. 在Azure VM中手动部署Windows Admin Center管理平台
[简介] Windows Admin Center是微软开发的一套可以部署在本地基于浏览器的GUI的工具集平台,其平台可用于管理Windows相关服务器和PC机器,我们可以利用Windows Admi ...
- 【SQL开发实战技巧】系列(十六):数据仓库中时间类型操作(初级)日、月、年、时、分、秒之差及时间间隔计算
系列文章目录 [SQL开发实战技巧]系列(一):关于SQL不得不说的那些事 [SQL开发实战技巧]系列(二):简单单表查询 [SQL开发实战技巧]系列(三):SQL排序的那些事 [SQL开发实战技巧] ...
- 计算机知识对于老师的帮助,感念师恩·每日之星 | 帮助学生打通计算机专业学习的“任督”二脉——记第十六届“我心目中的好老师”、计算机科学与技术学院黄秋波老师...
[编者按]教师是立校之本,师德是教育之魂,在东华校园里,每年的"我心目中的好老师"评选.青年教师讲课竞赛等活动,都会涌现出一批深受学生爱戴的老师,在2016年教师节来临之际,在这个 ...
- vue+element 子组件调用父组件失败
项目中遇到vue子组件调用父组件的方法,我写的是this.$emit('search');但是没有成功,查了下说有三种子组件调用父组件的方式: 第一种方法是直接在子组件中通过this.$parent. ...
- element子组件向父组件传值
1.子组件通过$emit向父组件传一个方法 userAdd(){this.$emit('pageJump',666)} 2.父组件通过router-view组件接收子组件传递过来的值 <rout ...
- 机器学习中的数学——距离定义(十六):豪斯多夫距离(Hausdorff Distance)
分类目录:<机器学习中的数学>总目录 相关文章: · 距离定义:基础知识 · 距离定义(一):欧几里得距离(Euclidean Distance) · 距离定义(二):曼哈顿距离(Manh ...
- Salesforce LWC学习(二) helloWorld程序在VSCode中的实现
上一篇我们简单的描述了一下Salesforce DX的配置以及CLI的简单功能使用,此篇主要简单描述一下LWC如何实现helloWorld以及LWC开发时应该注意的一些规范. 做国内项目的同学直观的感 ...
- vue操作dom_vue源码全面解析(四十六)源码中操作DOM的方法集合
// 查找节点是否存在,如果不存在新建一个div元素返回function query (el) { if (typeof el === 'string') { var selected = docum ...
最新文章
- python-数据类型之列表
- yum安装nginx+PHP+Mysql
- JavaSE-21 字符编码简介
- stm32 usb 虚拟串口 相同_为什么说你要学习USB?(一)
- linux中操作数据库的使用命令记录
- 解决XP中CPU占用率过高问题, 关了445这个端口(ZT)
- 何凯明 Single Image Haze Removal Using Dark Channel Prior
- 内存映射之fixmap(early_fixmap_init)
- Atitit r2017 r5 doc list on home ntpc.docx 驱动器 D 中的卷是 p2soft 卷的序列号是 9AD0-D3C8 D:\ati\r2017 v4 r
- Linux下opendir、readdir使用小结
- kotlin数组和集合
- 模拟退火算法求解超市布局问题
- 票务公司加价将儿童机票售成年人赚取差价
- yolov5m.pt triton部署
- ANC主动降噪蓝牙耳机南A2测评:日常通勤降噪亲民之选!
- docker下载及vulhub靶场
- 浅谈程序员的行业选择---程序人生
- 【Pytorch】第 5 章 :解决多臂老虎机问题
- 蓝桥杯_横向打印二叉树
- Storm部分:Storm Grouping -- 数据流分组(各种数据分发策略的练习)【Java版纯代码】
热门文章
- 银行大数据风控平台的建设要点与应用
- UI标签库专题十三:JEECG智能开发平台 ckfinder(ckfinder插件标签)
- select 条件字段,数字类型加1
- 2018 CVPR GAN 相关论文
- GitHub建立个人网站(二)
- 记录hive sql报错,return code1和return code2解决方法
- 如何评判在线直播源码优劣?视频直播软件开发经验之谈
- “双十一”Guitar Pro 带你高姿态过光棍节
- Centos 6.4部署DNS服务器
- 博客园客户端UAP开发随笔 -- 适配不同尺寸的屏幕