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 相关文章推荐
document.documentElement的一些使用技巧
Apr 18 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
Aug 12 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
Apr 12 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 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实现Soap通讯的方法
2014/11/03 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
JavaScript版代码高亮
2006/06/26 Javascript
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
javascript中的altKey 和 Event属性大全
2015/11/06 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
[01:09:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第一场 6.2
2018/06/04 DOTA
Eclipse + Python 的安装与配置流程
2013/03/05 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Python常见字典内建函数用法示例
2018/05/14 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
python自定义函数def的应用详解
2020/06/03 Python
html5与css3小应用
2013/04/03 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
中英文自我评价常用句型
2013/12/19 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
工作建议书范文
2014/05/13 职场文书
学校就业推荐信范文
2014/05/19 职场文书
党员先进性教育整改措施
2014/09/18 职场文书
户外拓展训练感想
2015/08/07 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
MySQL创建表操作命令分享
2022/03/25 MySQL
Android中的Launch Mode详情
2022/06/05 Java/Android