【复习】如何在Vue和React中实现表单值校验和搜索功能。下面总结一下我在使用vue和react实现这些功能时踩过的坑。表单验证和搜索功能的实现Formverification表单验证需求很常见,比如:匹配某些规则(企业税号格式验证、phonenumber(手机号码)验证、身份证验证...)、限制条件关于内容长度,输入字符类型的限制等。Vue中的实现:使用输入事件处理输入框的值。在Vue中,处理中文时要特别注意input和keyup事件的选择,选择input事件。陷阱:在输入输入时触发事件时,input事件和keyup事件在性能上没有区别。值改变时触发input,松开键盘时触发keyup。当鼠标离开输入中文未选中内容时,不会触发keyup事件,但会触发input事件。下面的例子限制输入框的字符数不超过32个:限制字符数的代码(中文2个,英文1个):limitLength(e){constinput=e.targetconstvalue=input.valueconstsplit=value.split('')constmap=split.map((s,i)=>{returnvalue.charCodeAt(i)>=0&&value.charCodeAt(i)<=128?1:2})letn=0constcharLength=map.length>0&&map.reduce((accumulator,currentValue,index)=>{constcount=accumulator+currentValueif(count===31||count===32){n=index}if(count>32){this.name=split.slice(0,n+1).join('')//this.$emit("setUserName",split.slice(0,n+1).join(''));}返回计数})},keyup事件效果鼠标离开时不触发回调函数(输入中文拼音时字符数超过32仍可显示)input事件效果鼠标离开时触发回调函数。Vue中实现带有校经验的FormInput输入框组件:正面说明:在使用vue用来实现回车换行等功能的keyup事件,体验更好this.content+=`\n`letel=this.$el.querySelector('.input-textarea')el.scrollTop=el.scrollHeight-el.clientHeight}},校验和搜索并存React中的实现:需要封装原生的compositionstart/compositionend事件React中的输入表单是没有输入事件的,那么如何实现像Vue中的输入事件一样处理中文输入的效果呢?FormInput业务组件:limitLength(value,maxWordsCount){returnvalue&&value.length>maxWordsCount?value.slice(0,+maxWordsCount):值;},//查询前先取有效值filterInputValue=async(v:any)=>{consttarget=v.currentTarget||v.targetletarr=[]letval=target.value//this.setState({isShowOptions:true})awaitthis.props.onHandleChange(val)//更新父组件值if(val){val=val.toString().trim()val=this.limitLength(val,6)arr=val.match(/^[\u4e00-\u9fa5]+(\d+)?$/)}if(arr&&Object.prototype.toString.call(arr)=='[objectArray]'&&arr.length){val=arr[0]}else{val=''}awaitthis.props.onHandleChange(val)//更新父组件值this.searchValue(val)//再查询}React版自定义输入表input字段组件,封装compositionstart/compositionend:import*asReactfrom'react'importPropTypesfrom'prop-types'import'./input-field.less'//检测是否是chrome//constisChrome=!!window.chrome&&!!window.chrome.webstoreconstnoop=()=>{}interfaceInputField{isOnComposition:Boolean,emittedInput:Boolean,}classInputFieldextendsReact.PureComponent
