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简化JavaScript开发分析
Feb 19 Javascript
javascript date格式化示例
Sep 25 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
JS在浏览器中解析Base64编码图像
Feb 09 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 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将数据导入到Foxmail的实现代码
2010/09/05 PHP
解析阿里云ubuntu12.04环境下配置Apache+PHP+PHPmyadmin+MYsql
2013/06/26 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
PHP二维数组分页2种实现方法解析
2020/07/09 PHP
整理一些JavaScript的IE和火狐的兼容性注意事项
2011/03/17 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
2019/09/16 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
js实现网页随机验证码
2020/10/19 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
Python实现拼接多张图片的方法
2014/12/01 Python
python中while循环语句用法简单实例
2015/05/07 Python
python如何让类支持比较运算
2018/03/20 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
pytorch 模型可视化的例子
2019/08/17 Python
如何用python 操作zookeeper
2020/12/28 Python
linux面试题参考答案(4)
2013/01/28 面试题
食堂个人先进事迹
2014/01/22 职场文书
喝酒检查书范文
2014/02/23 职场文书
水电站项目建议书
2014/05/12 职场文书
数学教研活动总结
2014/07/02 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
爱心捐助活动总结
2015/05/09 职场文书
追悼会悼词大全
2015/06/23 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书