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 prototype截取字符串函数
Apr 01 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 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
coreseek 搜索英文的问题详解
2013/06/08 PHP
php权重计算方法代码分享
2014/01/09 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
基于yaf框架和uploadify插件,做的一个导入excel文件,查看并保存数据的功能
2017/01/24 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
jQuery的DOM操作之删除节点示例
2014/01/03 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
python语言中with as的用法使用详解
2018/02/23 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
利用CSS3实现动态的二级三级菜单效果实例源码
2017/01/04 HTML / CSS
西班牙香水和化妆品购物网站:Arenal Perfumerías
2019/03/01 全球购物
2014年计算机专业个人自我评价
2014/01/19 职场文书
中学生自我鉴定
2014/02/04 职场文书
环境工程专业自荐信
2014/03/03 职场文书
销售会计岗位职责
2014/03/15 职场文书
学生个人自我鉴定
2014/03/26 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
2015高中教师个人工作总结
2015/07/21 职场文书
关于拾金不昧的感谢信(五篇)
2019/10/18 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS