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打印网页部分内容的脚本
Nov 17 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
jQuery select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
javascript实现无法关闭的弹框
Nov 27 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
ES6 fetch函数与后台交互实现
Nov 14 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
微信小程序实现时间进度条功能
Nov 17 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 文章中的远程图片采集到本地的代码
2009/07/30 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
2017/05/22 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
python分布式环境下的限流器的示例
2017/10/26 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
Python list运算操作代码实例解析
2020/01/20 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
大数据分析用java还是Python
2020/07/06 Python
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
经典c++面试题六
2012/01/18 面试题
一夜的工作教学反思
2014/02/08 职场文书
数学国培研修感言
2014/02/13 职场文书
鲜花方阵解说词
2014/02/13 职场文书
员工评语范文
2014/12/31 职场文书
参观邀请函范文
2015/02/02 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
公司出差管理制度范本
2015/08/05 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
TS 类型收窄教程示例详解
2022/09/23 Javascript