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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
统计jQuery中各字符串出现次数的工具
May 03 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
vscode 调试 node.js的方法步骤
Sep 15 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
如何利用js在两个html窗口间通信
Apr 27 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无法访问远程mysql的问题分析及解决
2013/05/16 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
PHP 芝麻信用接入的注意事项
2016/12/01 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
2017/01/23 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
Vue.js中的图片引用路径的方式
2017/07/28 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
JavaScript事件对象深入详解
2018/12/30 Javascript
vue实现搜索功能
2019/05/28 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
python中argparse模块用法实例详解
2015/06/03 Python
Python列表推导式与生成器表达式用法示例
2018/02/08 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Python实现代码块儿折叠
2020/04/15 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
C#的几个面试问题
2016/05/22 面试题
消防器材管理制度
2014/01/28 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript