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 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
javascript实现动态显示颜色块的报表效果
Apr 10 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
electron制作仿制qq聊天界面的示例代码
Nov 26 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
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
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php后台如何避免用户直接进入方法实例
2013/10/15 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
11行JS代码制作二维码生成功能
2018/03/09 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
[00:43]TI7不朽珍藏III——幽鬼不朽展示
2017/07/15 DOTA
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python取均匀不重复的随机数方式
2019/11/27 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
python 实现aes256加密
2020/11/27 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
北大研究生linux应用求职信
2013/10/29 职场文书
研究生自我鉴定范文
2013/10/30 职场文书
幼儿园秋游感想
2014/03/12 职场文书
诚信承诺书范文
2014/03/27 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
租车协议书范本2014
2014/11/17 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
运动会1000米加油稿
2015/07/21 职场文书
Python中三种花式打印的示例详解
2022/03/19 Python