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 相关文章推荐
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
微信小程序canvas分享海报功能
Oct 31 Javascript
如何封装Vue Element的table表格组件
Feb 06 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
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
2016/02/26 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
2017/08/14 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
Element Input组件分析小结
2018/10/11 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
python 运算符 供重载参考
2009/06/11 Python
分享Python文本生成二维码实例
2016/01/06 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
对Python实现累加函数的方法详解
2019/01/23 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
夜大毕业生自我评价分享
2013/11/10 职场文书
运动会跳远广播稿
2014/02/04 职场文书
小学生元旦感言
2014/02/26 职场文书
单位消防安全责任书
2014/07/23 职场文书
起诉书格式范文
2015/05/20 职场文书
职工培训工作总结
2015/08/10 职场文书
小学生大队委竞选稿
2015/11/20 职场文书
光之国的四大叛徒:第一贝利亚导致宇宙毁灭,赛文奥特曼在榜
2022/03/18 日漫
详解如何使用Nginx解决跨域问题
2022/05/06 Servers
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers