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 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
JavaScript面向对象之Prototypes和继承
Jul 12 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
Jan 03 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
Aug 17 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
浅谈Vue数据响应
Nov 05 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
原生js+canvas实现贪吃蛇效果
Aug 02 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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获取远程文件的内容和大小
2015/11/03 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
javascript History对象原理解析
2020/02/17 Javascript
跟老齐学Python之开始真正编程
2014/09/12 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
基于python实现ROC曲线绘制广场解析
2020/06/28 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
什么是java序列化,如何实现java序列化
2012/11/14 面试题
公司委托书格式
2014/08/01 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书
离婚律师函范本
2015/05/27 职场文书
实施意见格式范本
2015/06/05 职场文书
保护环境建议书作文300字
2015/09/14 职场文书
教师外出学习心得体会
2016/01/18 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技