首页 > 编程语言 >uniapp微信小程序如何处理input输入空格问题?

uniapp微信小程序如何处理input输入空格问题?

时间:2023-10-05 18:04:06浏览次数:110  
标签:uniapp obj trimVal 处理 微信 propName input property 属性

第一种方法用input组件自带的@input事件

使用@input事件 绑定变量用trim修剪掉前端和末尾的空格后用replace替换空格为空 把处理过的值赋给自己

<input type="text" class="" v-model="certNo" placeholder="请输入您的证书编号" @blur="certNo = certNo.trim().replace(/\s+/g,'')">

第二种方法用函数处理

obj: {
  name: '',//姓名
  cardId: ''//身份证号
},
certNo: '',//证书编号

如果您想支持类似this.trimVal(this, 'obj.name');this.trimVal('certNo')这样只传递属性名的方式,可以对trtNo')方法进行改进,使其可以处理不同类型的参数。

例如,可以增加一个参数context,表示要进行字符串处理的对象(可能是组件实例或其他对象)。同时,还可以通过判断property参数是否包含.符号来确定是直接处理属性,还是需要拆分属性路径后再处理。

示例代码如下:

this.trimVal(this, 'obj.name');
this.trimVal(this, 'certNo');
trimVal(context, property) {
  let obj, propName;
  if (property.includes('.')) {
    // 如果包含.符号,则说明需要处理嵌套属性
    const props = property.split('.');
    propName = props.pop();
    obj = props.reduce((o, p) => o[p], context);
  } else {
    // 否则直接处理对象的属性
    propName = property;
    obj = context;
  }

  // 获取属性值
  let value = obj[propName];
  // 去掉空格
  let newValue = value.trim().replace(' ', '');
  // 赋值给属性
  obj[propName] = newValue;
}

这样就可以同时支持处理嵌套属性和直接处理属性名的情况了。

标签:uniapp,obj,trimVal,处理,微信,propName,input,property,属性
From: https://blog.51cto.com/u_15694202/7715767

相关文章

  • uniapp项目实践总结(二十七)苹果应用商店上架教程
    导语:之前介绍了如何打包一个苹果安装包文件,如果想要上架苹果ios应用商店,那么就来这里学习一下方法吧。目录准备材料上架步骤审核事项准备材料基本信息构建版本:需要一个ipa格式安装包;logo:你应用的logo图标;应用名称:名称经过审核后才会显示在AppStore中;应用......
  • springboot+Uniapp+redis开发的AI医疗智能导诊系统源码
    AI+医疗的智能导诊系统源码 自主版权 支持二开一、什么是智能导诊系统?智能导诊系统是一种基于人工智能和大数据技术开发的医疗辅助软件,它能够通过对患者的症状、病史等信息进行计算分析,快速推荐科室和医生。通过简单的描述自身症状,系统即可找到最适合的科室,实现线上高效挂号,线下......
  • uniapp高度相关计算
    获取屏幕高度uni.getSystemInfo()获取状态栏高度uni.getSystemInfo()高度计算rpx转化onLoad(){ uni.getSystemInfo({ success:function(res){ console.log(res.screenHeight);//屏幕高度注意这里获得的高度宽度都是px需要转换rpx ......
  • vue 数据data-uniapp
    data属性data必须声明为返回一个初始数据对象的函数(注意函数内返回的数据对象不要直接引用函数外的对象);否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据。 //正确用法,使用函数返回对象 data(){ return{ title:'Hello' } } //错误写法,会导致再次......
  • mybatis出现错误 java lang NumberFormatException:For input string:A1
    使用mybatis,当使用map传参并且在iftest判断时使用map中所传的参数时,可能会产生如题的报错,具体报错信息见下图:分析这个错误,自己调试也找过度娘,“坚信”自己代码并没问题,但是问题始终无法解决。最后在一个帖子看到说iftest判断时,传入的参数跟匹配的值类型必须一致,于是调整了自己代......
  • Better Input:VSCode插件开发指南
    更好的阅读体验?0.准备工作先安装(更新)node.js和nmpnode更新去Node.js官网下载最新版本,然后重新安装在原来的安装路径下(第一次下载可只进行第三步)node-v查看当前版本是否是最新版本wherenode查看之前的安装路径去Node.js官网下载LTS版本执行node-v查看现......
  • 小程序 | 微信小程序使用空格占位符无效解决方法 | 前端
    小程序|微信小程序使用空格占位符无效解决方法|前端问题描述最近在写微信小程序时,想给文本添加空格,尝试使用键盘空格、标签加空格、HTML的&nbsp;等等都没有效果,最后在微信小程序官方文档中找到了解决办法解决方法查阅官方相关文档介绍微信小程序官方文档uniapp官方......
  • pyqt5-QInputDialog输入对话框组件
    1、介绍QInputDialog输入对话框,提供了五种输入模式,进行快捷的输入交互。对话框打开时,无论是否设置parent,都不能操作其它窗口返回tuple类型,索引1为bool类型,为True表示点击Ok按钮关闭对话框,为False则是点击Cancle按钮或窗口右上角关闭按钮调用方法时,必须设置相关的必要参数。但......
  • uniapp中的三种组件
    uni-app中的模板——<template>: 第一类:内置组件/原生组件——无需导入直接使用 view、text、image、button、input 第二类:扩展组件(uni-ui组件库)——先下载再使用 uni-rate、uni-number-box 第三类:自定义组件——先创建再使用 创建:components>zh-go-top>zh......
  • 微信小程序view中,英文和数字不换行
    因为是刚入坑,在边学边做,无意中突然发现这个bug!若是这种情况,只需要在css中加上word-break:break-all;word-break:normal|break-all|keep-all;值描述normal使用浏览器默认的换行规则。break-all允许在单词内换行。keep-all只能在半角空格或连字符处换行。......