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 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
BootStrap selectpicker
Jun 20 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
JS中数据结构与算法---排序算法(Sort Algorithm)实例详解
Jun 17 Javascript
bootstrap Table实现合并相同行
Jul 19 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
WordPress中自定义后台管理界面配色方案的小技巧
2015/12/29 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
PHP实现百度人脸识别
2019/05/06 PHP
关于laravel模板中生成URL的几种模式总结
2019/10/18 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
JavaScript中的其他对象
2008/01/16 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
vue-router传递参数的几种方式实例详解
2018/11/13 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python计算字符宽度的方法
2016/06/14 Python
python3 cvs将数据读取为字典的方法
2018/12/22 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
生产部主管岗位职责
2014/01/06 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
医学生求职信
2014/07/01 职场文书
领导干部保密承诺书
2014/08/30 职场文书
社区党员公开承诺书
2014/08/30 职场文书
收款委托书范本
2014/09/11 职场文书
销售人员管理制度
2015/08/06 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
MySQL深度分页(千万级数据量如何快速分页)
2021/07/25 MySQL
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB