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 相关文章推荐
javascripit实现密码强度检测代码分享
Dec 12 Javascript
JS 获取浏览器和屏幕宽高等信息代码
Mar 31 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
json传值以及ajax接收详解
May 24 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
JavaScript实现两个数组的交集
Mar 25 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使用多个进程同时控制文件读写示例
2014/02/28 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
php多进程应用场景实例详解
2019/07/22 PHP
prototype1.4中文手册
2006/09/22 Javascript
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
理解javascript async的用法
2017/08/22 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
postman自定义函数实现 时间函数的思路详解
2019/04/17 Javascript
对layui中的onevent 和event的使用详解
2019/09/06 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
精确查找PHP WEBSHELL木马的方法(1)
2011/04/12 Python
基于Python的Post请求数据爬取的方法详解
2019/06/14 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
践行党的群众路线心得体会
2014/11/05 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
班级管理经验交流材料
2015/11/02 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
Mysql binlog日志文件过大的解决
2021/10/05 MySQL