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插入样式实现代码
Feb 22 Javascript
jquery indexOf使用方法
Aug 19 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
JavaScript解八皇后问题的方法总结
Jun 12 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
Js面试算法详解
Apr 08 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邮件发送,php发送邮件的类
2011/03/24 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
vue 全局环境切换问题
2019/10/27 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
常见python正则用法的简单实例
2016/06/21 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
python 删除非空文件夹的实例
2018/04/26 Python
Python3.6基于正则实现的计算器示例【无优化简单注释版】
2018/06/14 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
解决python运行效率不高的问题
2020/07/20 Python
python urllib和urllib3知识点总结
2021/02/08 Python
html5实现移动端适配完美写法
2017/11/16 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/04/11 面试题
写给女生的道歉信
2014/01/08 职场文书
商场活动策划方案
2014/01/24 职场文书
公司合作协议书范本
2014/04/18 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
2016年学校“3.12”植树节活动总结
2016/03/16 职场文书
分享几个JavaScript运算符的使用技巧
2021/04/24 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL