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 相关文章推荐
script标签的 charset 属性使用说明
Dec 04 Javascript
在JavaScript的正则表达式中使用exec()方法
Jun 16 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
JAVA中截取字符串substring用法详解
Apr 14 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
微信小程序实现分页加载效果
Nov 19 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
WordPress中is_singular()函数简介
2015/02/05 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
laravel-admin的多级联动方法
2019/09/30 PHP
laravel实现上传图片并在页面显示的例子
2019/10/14 PHP
学习ExtJS form布局
2009/10/08 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
微信小程序button标签open-type属性原理解析
2020/01/21 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
Python中的CURL PycURL使用例子
2014/06/01 Python
pytorch 在网络中添加可训练参数,修改预训练权重文件的方法
2019/08/17 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
台湾家适得:Homeget
2019/02/11 全球购物
电子技术专业中专生的自我评价
2013/12/17 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
拉歌口号大全
2014/06/13 职场文书
新员工试用期自我评价
2015/03/10 职场文书
2015年学校管理工作总结
2015/07/20 职场文书