中input标签赋值_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的简单实用,针对子组件如何更好的适应还没有特别好的方案,有好想法的朋友留言。篇中有不懂的欢迎留言,有错误的欢迎指出。
中input标签赋值_Salesforce LWC学习(十六) Validity 在form中的使用浅谈相关推荐
- element子组件中的校验_Salesforce LWC学习(十六) Validity 在form中的使用浅谈
本篇参考: https://developer.salesforce.com/docs/component-library/bundle/lightning-input/documentation h ...
- form必填默认校验_Salesforce LWC学习(十六) Validity 在form中的使用浅谈
本篇参考: https://developer.salesforce.com/docs/component-library/bundle/lightning-input/documentation h ...
- 中input标签赋值_Java程序员:Spring MVC JSP表单标签示例
Spring MVC的表单标签为Java程序员提供了许多额外的支持.例如数据绑定,允许自动设置数据并从Java对象中检索数据. 从2.0版本开始,Spring提供了一组全面的数据绑定感知标记,用于在使 ...
- IOS系统中input标签获取焦点页面会放大的问题
IOS系统中input标签获取焦点页面会放大的问题 在iOS系统中打开网页,input框输入时,输入框获取焦点的时候页面会放大,如果没有经过设置,页面放大之后就不会自动还原.使内容撑开浏览器,底部产生 ...
- jquery改变html元素的样式,给input标签赋值,onclick中文传参问题等
一.前言 最近又是用jquery比较多,很多东西都忘记了.一边使用一边学习吧,这边记录一下. 二.Jquery改变html的样式 $('#tanchuang').css('display','bloc ...
- Web学习第三天——HTML中input标签常用属性、框架集、内嵌框架
第三天HTML中input标签常用属性.框架集.内嵌框架 一.input标签常用属性 表单数据提交特点: (一).文本框(text) (二).密码框(password) (三).单选按钮(radio) ...
- js jquery给input标签赋值、取值
js jquery给input标签赋值.取值 html代码 赋值 取值 html代码 <input type="text" id="name"/> ...
- HTML5/HTML中input标签用法解读
HTML5/HTML中<input>标签用法解读 OK!今天博主为小伙伴们介绍的内容是HTML5/HTML中<input>标签的用法,,, ,emmm图文并茂哦! 喜欢博主的粉 ...
- Easyui中input标签设置只读
Easyui中input标签设置只读 直接在input标签中设置属性:readonly="readonly". 具体例子: <input class="easyui ...
- 计算机知识对于老师的帮助,感念师恩·每日之星 | 帮助学生打通计算机专业学习的“任督”二脉——记第十六届“我心目中的好老师”、计算机科学与技术学院黄秋波老师...
[编者按]教师是立校之本,师德是教育之魂,在东华校园里,每年的"我心目中的好老师"评选.青年教师讲课竞赛等活动,都会涌现出一批深受学生爱戴的老师,在2016年教师节来临之际,在这个 ...
最新文章
- javascript检测浏览器精简版
- python怎么使用int四舍五入_python中如何取整数
- java异常详细讲解_java异常的讲解
- 【供参考】2021 中国一流大学名单(30 所)和中国大学综合实力 700 强出炉!
- 【unity3d--初始学习五--c#脚本对xml文件的创建和解析】
- 2019-05-18 操作系统概论
- 找出数列中个数大于总数一半的元素(编程之美2.3)
- 【百度网盘】老罗android开发视频教程[压缩后3.63G]
- 期末总结(持续更新)
- 《21天学通Java(第7版)》—— 1.10 练习
- 萤火虫小程序_成都以北2h的森林小镇!养在深闺的萤火虫、穿行山间的火车,在这露营解锁夏天的小秘密...
- WIN7安装.Net Framework 4报错的解决方法
- x86汇编_间接寻址-间接操作数_笔记_11
- AD20的一些基本操作
- vim下区块的复制与黏贴
- 派森学python_2019 年 1月 26 日 随笔档案 - 派森学python - 博客园
- java redis使用卡死_注意!Redis使用不当可能导致应用卡死
- 计算机毕业设计JSPMjava平台购物系统
- 计算机二级ppt乒乓球答案,2017年9月计算机二级VB临考测试题及答案
- c语言调用c 接口方法,C++调用C接口的实现示例
热门文章
- linux 内核usb,Linux 内核示例程序 usb_skeleton.c 详解
- 【转】Element-UI中上传的action地址相对问题
- 大咖说:Java的2017年小惊喜和2018年大展望
- CentOS 6.5安装YouCompleteMe使用vim C/C++语法自动补全
- 百度地图API学习之路(1)
- 2.3Word2003段落设置1
- 学用NHibernate(一)
- vue生成静态html文件_是否可以将Vue.js模板编译为静态HTML和CSS文件?
- plsql登录空白框_王者荣耀空白居中以及重复名的教程[含软件]
- 二叉搜索树 最近共同祖先 c++_Task 14. 树:236. 二叉树的最近公共祖先