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 动态将数字金额转化为中文大写金额
May 14 Javascript
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
js数组去重的N种方法(小结)
Jun 07 Javascript
详解如何使用webpack打包JS
Jun 21 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
layui复选框的全选与取消实现方法
Sep 02 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 实现进制相互转换
2016/04/07 PHP
js中关于new Object时传参的一些细节分析
2011/03/13 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
微信小程序 实战程序简易新闻的制作
2017/01/09 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
Vue.js项目模板搭建图文教程
2017/09/20 Javascript
详解plotly.js 绘图库入门使用教程
2018/02/23 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python cookbook(数据结构与算法)从任意长度的可迭代对象中分解元素操作示例
2018/02/13 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
详解Django admin高级用法
2019/11/06 Python
python中np是做什么的
2020/07/21 Python
allbeauty美国:英国在线美容店
2019/03/11 全球购物
Right-on官方网站:日本知名的休闲服装品牌
2019/07/12 全球购物
公司庆典邀请函范文
2014/01/13 职场文书
社区维稳工作方案
2014/06/06 职场文书
捐书倡议书
2014/08/29 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
放假通知格式
2015/04/14 职场文书
孔子观后感
2015/06/08 职场文书
2016高考寄语集锦
2015/12/04 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL