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 相关文章推荐
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
json原理分析及实例介绍
Nov 29 Javascript
javascript 数组操作详解
Jan 29 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 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面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
php中file_exists函数使用详解
2015/05/08 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
bootstrap自定义样式之bootstrap实现侧边导航栏功能
2018/09/10 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
Python实现将罗马数字转换成普通阿拉伯数字的方法
2017/04/19 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
python 如何在测试中使用 Mock
2021/03/01 Python
几个解决兼容IE6\7\8不支持html5标签的几个方法
2013/01/07 HTML / CSS
HTML5 Canvas锯齿图代码实例
2014/04/10 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
比利时买床:Beter Bed
2017/12/06 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
美德好少年事迹材料
2014/01/19 职场文书
电子商务专业求职信
2014/07/10 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android