JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】


Posted in Javascript onMarch 03, 2017

本文实例讲述了JavaScript控制输入框中只能输入中文、数字和英文的方法。分享给大家供大家参考,具体如下:

1、问题背景:

遇到这样一个问题:有一个输入框,要求只能输入中文、数字和英文(即过滤特殊字符串)

2、JS代码:

function checkUsername()
{
 //正则表达式
 var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
 //获取输入框中的值
 var username = document.getElementById("username").value.trim();
 //判断输入框中有内容
 if(!reg.test(username))
 {
 alert("请输入中文、数字和英文!");
 //输入非法字符,清空输入框
 $("#username").val("");
 }
}

3、页面HTML代码:

<input type="text" id="username" onblur="checkUsername()"/>

完整实例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" >
function checkUsername()
{
 //正则表达式
 var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$");
 //获取输入框中的值
 var username = document.getElementById("username").value.trim();
 //判断输入框中有内容
 if(!reg.test(username))
 {
 alert("请输入中文、数字和英文!");
 //输入非法字符,清空输入框
 $("#username").val("");
 }
}
</script>
</head>
<body>
<input type="text" id="username" onblur="checkUsername()"/>
</body>
</html>

运行效果图如下:

 JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】

Javascript 相关文章推荐
Javascript 布尔型分析
Dec 22 Javascript
Dojo 学习要点
Sep 03 Javascript
js图片自动切换效果处理代码
May 07 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
微信小程序 保留小数(toFixed)详细介绍
Nov 16 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
vue结合Echarts实现点击高亮效果的示例
Mar 17 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
Element Collapse 折叠面板的使用方法
Jul 26 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 #Javascript
JavaScript数组迭代方法
Mar 03 #Javascript
vue.js的提示组件
Mar 02 #Javascript
js实现功能比较全面的全选和多选
Mar 02 #Javascript
jQuery实现三级联动效果
Mar 02 #Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 #Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 #Javascript
You might like
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
tp5(thinkPHP5)框架连接数据库的方法示例
2018/12/24 PHP
PHP 7.4 新语法之箭头函数实例详解
2019/05/09 PHP
一些常用的Javascript函数
2006/12/22 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
python中requests模块的使用方法
2015/04/08 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
django使用admin站点上传图片的实例
2019/07/28 Python
Python遍历字典方式就实例详解
2019/12/28 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
高校十八大报告感想
2014/01/27 职场文书
投标承诺书怎么写
2014/05/24 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2014年财政局工作总结
2014/12/09 职场文书
庆六一开幕词
2015/01/29 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
OpenStack虚拟机快照和增量备份实现方法
2022/04/04 Servers