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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
JS 判断代码全收集
Apr 28 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
Jun 24 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
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
php采集时被封ip的解决方法
2010/08/29 PHP
php preg_filter执行一个正则表达式搜索和替换
2012/02/27 PHP
php计算整个目录大小的方法
2015/06/19 PHP
不错的asp中显示新闻的功能
2006/10/13 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
JavaScript判断变量是否为undefined的两种写法区别
2013/12/04 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
Highcharts入门之简介
2016/08/02 Javascript
nodejs开发——express路由与中间件
2017/03/24 NodeJs
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
require.js中的define函数详解
2017/07/10 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
python Celery定时任务的示例
2018/03/13 Python
python 常见字符串与函数的用法详解
2018/11/23 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
华为慧通面试题
2012/09/11 面试题
数据库专业英语
2012/11/30 面试题
实习期自我鉴定
2013/10/11 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
小区门卫管理制度
2014/01/29 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
校运会通讯稿
2015/07/18 职场文书
吃通javascript正则表达式
2021/04/21 Javascript
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
Python使用Web框架Flask开发项目
2022/06/01 Python