小程序input密码输入框限制只能输入数字,大小写字母,@!._的使用

news/2024/7/20 1:43:25 标签: 小程序, javascript
  • 小程序input密码输入框限制只能输入数字,大小写字母,@!._的使用
  • 最近写小程序修改密码功能时,需要限制密码只能输入数字,英文字母,特定的符号。
  • 因为小程序的input调起的手机键盘是可以输入表情之类的特殊符号的,所以这里做下限制
  <view class="old">
        <view class="text">旧密码</view>
        <input placeholder="输入旧密码" class="oldInput" value="{{oldpwd}}"  password="{{!oldShow}}" type="text" maxlength="18" bind:input="onChange" bind:blur="onBlur"></input>
        <image src="../../../images/open.png" class="oldpassword" bind:tap="traggleShow" wx:if="{{!oldShow}}" />
        <image src="../../../images/close.png" class="closepassword" bind:tap="traggleShow" wx:if="{{oldShow}}" />
    </view>

  data: {
    oldShow: false,
    oldpwd: "",
  },
traggleShow() {
    this.setData({
      oldShow: !this.data.oldShow
    })
  },
 onBlur(e) {
    // replace(/[^\w_]/g,'')
    // let oldpwd = e.detail.value.replace(/\s/g, "");
    // oldpwd = oldpwd.replace(/[`~!@#$%^&*()_+=<>?:"{}|·~!@#¥%……&*()——+={}|《》?:“”【】、;‘’,。、]/g, '')
    let oldpwd = e.detail.value.replace(/[^\w_@.!]/g,'');
    this.setData({
      oldpwd,
    })
  },
  onChange(e) {
    let oldpwd = e.detail.value.replace(/[^\w_@.!]/g,'');
    this.setData({
      oldpwd,
    })
  },
  • 此时输入空格以及特殊字符是输入不上的

http://www.niftyadmin.cn/n/1162001.html

相关文章

注意: 如果你使用的是zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加:source ~/.bash_profile

问题&#xff1a;Mac搭建Flutter环境环境是使用iTerm终端来操作&#xff0c;每次进入都要输入source ~/.bash_profile 不然就找不到flutter doctor 解决&#xff1a;修改配置文件&#xff0c;后期重新打开都不需要重新输入source ~/.bash_profile命令 终端运行&#xff1a;op…

Dart文件运行 run code报错 :/bin/sh: dart: command not found

vscode中直接执行run code报以下错误原因:dart的环境变量在终端配置文件中未设置 运行open ~/.zshrc #dart export DART_HOME/Users/XXXXXX/Work/Download/flutter/bin/cache/dart-sdk/bin export PATH"${DART_HOME}:${PATH}"将/Users/XXXXXX/Work/Download还成自己…

Dart语法学习(1)

学习flutter之前需要对Dart语法进行了解 1.main() 程序开始执行函数&#xff0c;该函数是特定的、必须的、顶级函数 //入口方法,要执行的方法都得写在这个里面 // 第一种定义方式 // main(){ // print(你好,dart);//打印 // }// 第二种定义方式 // void代表是main方法没有…

Object.assign()---合并对象属性

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 const target { a: 1 };const source1 { b: 2 }; const source2 { c: 3 };Object.assign(target, source1, source2); target // {a:1, b:2, c:3}语法 Object.assign(t…

小程序三元表达式的嵌套

style style"height:{{isShow? : processList.length > 3 ? 200rpx: }}"class class"process-list content {{isShow ? on : processList.length > 3 ? :on}}"

flutter学习(1)

1.main()和runApp() lib/main.dart—入口文件 void main(){ runApp(MyApp()) } //简写 void main&#xff08;&#xff09;>runApp(MyApp())main 方法是dart的入口方法 runApp方法是flutter的入口方法 MyApp是自定义的一个组件(flutter中所有的组件都是类) 2.material.da…

flutter学习(2)

1.列表组件–前后加图标ListView Flutter 中我们可以通过 ListView 来定义 列表项&#xff0c;支持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表有一下 分类&#xff1a; 1、垂直列表 2、垂直图文列表 3、水平列表 4、动态列表 5、矩阵式列表 import …

flutter学习(3)-GridView组件

1.GridView组件 GridView一般实现商品列表ListView一般实现新闻列表 2.GridView.count循环数据 import package:flutter/material.dart; import res/data.dart;void main() {runApp(MyApp()); }class MyApp extends StatelessWidget {overrideWidget build(BuildContext con…