js正则校验特殊的不可见字符的具体实现

 更新时间:2024年06月25日 11:10:19   作者:Charonmomo  
用户可能从Excel或者其他地方直接复制粘贴,这时候提交到后端会导致获取的用户输入中包含一些特殊的不可见字符,本文主要介绍了js正则校验特殊的不可见字符的具体实现,具有一定的参考价值,感兴趣的可以了解一下

背景

表单的输入框,用户可能从Excel或者其他地方直接复制粘贴,这时候提交到后端会导致获取的用户输入中包含一些特殊的不可见字符,比如tab键或者制表符等,这时需要在前端对用户输入做一些检验,检查是否存在不可见字符。

方法

ASCII 编码中第 0~31 个字符(开头的 32 个字符)以及第 127
个字符(最后一个字符)都是不可见的(无法显示),但是它们都具有一些特殊功能,所以称为控制字符( Control
Character)或者功能码(Function Code)。

ASCII 码关键部分的信息如下图:

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意这里 0~31 及127字符 是控制字符(不可见字符),我们可以在正则中通过校验是否包含这些字符的16进制来判断是否含有特殊字符。

关于这些控制字符的详细含义可以参考:ASCII控制字符的解释

完整的 ASCII 码表:

在这里插入图片描述

校验

在线正则校验工具:正则表达式在线测试

一串简单的测试文本:

ABC1823中文0456def$%#?.            mMo

1. 校验是否含有特殊的不可见字符
只要有一个不可见字符就会报错

[\x00-\x1F\x7F]

注意这里是两个0,采用 \x0-\x1F\x7F 这种格式是错误的,没法进行正常的校验。

在这里插入图片描述

2. 检验是否含有不可见字符

[^\x00-\x1F\x7F]+

注意这里 ^ 的位置不要写在外面,外面表示以什么开头

在这里插入图片描述

代码

import React,{useState} from "react";
import {Input,message} from "antd";

const RegTestInput = function(){
	
	const testValue = (e) => {
		const { value } = e.target;
		if(value) {
			const reg = /[\x00-\x1f\x7f]/
			if(reg.test(value)){
				message.error("不允许包含特殊字符")
			}
		}
	}
	
	return (
		<div>
			<Input onChange={testValue} />
		</div>
	)
}

到此这篇关于js正则校验特殊的不可见字符的文章就介绍到这了,更多相关js正则校验不可见字符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家! 

相关文章

  • 怎么在下面的HTML里调用数组cs[]的值

    怎么在下面的HTML里调用数组cs[]的值

    怎么在下面的HTML里调用数组cs[]的值...
    2007-01-01
  • 微信小程序音乐播放器开发

    微信小程序音乐播放器开发

    这篇文章主要为大家详细介绍了微信小程序音乐播放器开发,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • JavaScript基于对象去除数组重复项的方法

    JavaScript基于对象去除数组重复项的方法

    这篇文章主要介绍了JavaScript基于对象去除数组重复项的方法,结合实例形式分析了javascript数组去重的操作步骤与具体实现技巧,需要的朋友可以参考下
    2016-10-10
  • JavaScript 管道运算符及工作原理

    JavaScript 管道运算符及工作原理

    这篇文章主要介绍了JavaScript 管道运算符,管道运算符为我们的代码添加了大量上下文,并简化了操作,以便以后可以扩展它们,本文结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • JavaScript动态检测密码强度原理及实现方法详解

    JavaScript动态检测密码强度原理及实现方法详解

    这篇文章主要介绍了JavaScript动态检测密码强度原理及实现方法,结合具体实例形式详细分析了javascript针对输入字符串密码强度检测的原理与相关判断操作技巧,需要的朋友可以参考下
    2019-06-06
  • 详解nuxt 微信公众号支付遇到的问题与解决

    详解nuxt 微信公众号支付遇到的问题与解决

    这篇文章主要介绍了详解nuxt 微信公众号支付遇到的问题与解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • js随机生成字母数字组合的字符串 随机动画数字

    js随机生成字母数字组合的字符串 随机动画数字

    本篇文章给大家分享的js随机生成字母数字组合的字符串,js随机生成动画数字,包括常用的产生随机数的用法,需要的朋友可以参考下
    2015-09-09
  • 原生js实现拼图效果

    原生js实现拼图效果

    这篇文章主要为大家详细介绍了原生js实现拼图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • js实现登录验证码

    js实现登录验证码

    本文主要介绍了js实现登录验证码的方法,代码简洁明了,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • jsonp跨域获取百度联想词的方法分析

    jsonp跨域获取百度联想词的方法分析

    这篇文章主要介绍了jsonp跨域获取百度联想词的方法,结合实例形式分析了jsonp的原理及跨域获取百度联想词的相关操作技巧,需要的朋友可以参考下
    2019-05-05

最新评论