JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】

本文实例讲述了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>

运行效果图如下：

PS：这里再为大家提供2款非常方便的正则表达式工具供大家参考使用：

JavaScript正则表达式在线测试工具：
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具：
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金) 两位小数

    第一: 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= "if(! /^d+$/.test(this.value)){alert('只能整数');this.value='';}" /> 如果不是整数就直接alert 第二: 限制是两位的小数 <input type = "text" name= "price&quo

  • JS验证input输入框（字母，数字，符号，中文）

    只能输入英文 <input type="text" onkeyup="value=value.replace(/[^a-zA-Z]/g,'')"> 只能输入英文 <input type="text" onkeyup="value=value.replace(/[^\a-\z\A-\Z]/g,'')" onkeydown="fncKeyStop(event)" onpaste="r

  • JS获得多个同name 的input输入框的值的实现方法

    先看下基于JS代码实现input密码输入框输入密码变黑点密文.具体代码如下所示: html代码 <form id="login-form" method="post" onsubmit="return checkForm()"> 输入密码<input type="password" id="input-password"> <input type="hidden&qu

  • Js制作点击输入框时默认文字消失的效果

    为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢?从用户体验的角度出发,简化用户使用步骤,让用户用得更方便就是提高了易用性,例如当鼠标悬浮在输入框时改变输入框颜色.自动选中输入框中的默认文字,或者点击输入框时自动清除默认内容等等. 这个效果听起来复杂,其实做起来却很简单,只要一小段javascript代码即可解决.下?面介绍一下几种效果的代码: 1.点击输入框选中内容的Html代码: <form id="form1"

  • JavaScript仿支付宝6位数字密码输入框

    JavaScript仿支付宝6位数字密码输入框

    前几天,项目有个功能和某宝购物支付密码的输入框有点类似,就自己写了这篇博文,权当总结笔记吧. 啰嗦半天了,直接上代码: 结构层: <div> <div>请在下方输入6位数字</div> <div class="ipt-box-nick"> <input type="tel" maxlength="6" class="ipt-real-nick"/> <div c

  • JS解决移动web开发手机输入框弹出的问题

    在移动web开发中和pc端不同的是,手机的输入是软键盘,这样就会有个问题,那就是当有输入的时候,键盘弹起来,整个页面难免会发生变化 1.页面提高背景会出现不够用的现象, 解决方法,在body中设置背景图,即便是页面抬升了,背景也依旧存在, 2.底部用fix布局 这个问题会使得页面提升而底部的fix也跟着提升,遮盖住相应的页面,这个有两种解决方法 一.是页面页相应的提高,页面变化多少我们让上面的页面滚动多少, $('input').bind('click',function(e){ var $th

  • js监听input输入框值的实时变化实例

    1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo

  • js格式化输入框内金额、银行卡号

    js格式化输入框内金额、银行卡号

    我们在项目中经常遇到需要格式化的金额数和银行卡号,一般我们常见的有两种表现形式:输入框内格式化和输入框外格式化.这里我主要把我在项目中遇到的输入框内部格式化的,代码亮出来,框外的格式化相对简单一点. 页面代码: <div class="wrap"> <input type="text" id="bankCard" placeholder="输入银行卡号"> </div> <div cl

  • JS实现身份证输入框的输入效果

    JS实现身份证输入框的输入效果

    实现如图所示的输入效果: 实现这种效果,比较简单的一种方式就是给一个input添加一个背景图片,然后通过设置字间距来达到效果. 代码: html: <input type="text" maxlength="8" class="idInput" onkeyup='this.value=this.value.replace(/\D/gi,"")'> css: .idInput{ width: 24.95rem; he

  • JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】

    JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】

    本文实例讲述了JavaScript控制输入框中只能输入中文.数字和英文的方法.分享给大家供大家参考,具体如下: 1.问题背景: 遇到这样一个问题:有一个输入框,要求只能输入中文.数字和英文(即过滤特殊字符串) 2.JS代码: function checkUsername() { //正则表达式 var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$"); //获取输入框中的值 var username = document.getElemen

  • js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码

    JS 控制文本框只能输入数字 <input onkeyup="value=value.replace(/[^0-9]/g,'')"onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')"> JS 控制文本框只能输入数字.小数点 <inputonkeyup="value=value.repl

  • JS验证 只能输入小数点,数字,负数的实现方法

    如下所示: <script language="JavaScript" type="text/javascript"> function clearNoNum(event, obj) { //响应鼠标事件,允许左右方向键移动 event = window.event || event; if (event.keyCode == 37 | event.keyCode == 39) { return; } var t = obj.value.charAt(0

  • js限制input标签中只能输入中文

    方法很简单,这里就不多BB了,直接奉上示例 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>只能输入中文</title> </head> <body> <input type="text" id="text"

  • jQuery控制文本框只能输入数字和字母及使用方法

    在公司开发WinForm项目时,发现公司自主研发的textbox控件非常强大,可以实现"只能输入数字"."只能输入字母"和"只能输入数字和字母"的三种输入限制,这样就可以精确控制用户输入的内容范围,让"用户永远没有办法输入限定的内容范围之外的其他内容",也就是"用户即使想犯错误也没有机会",这种限制控件输入的方式给了我很大的启发,如果在web项目中也能做到这样的精确控制,那么就可以避免因为一些非法输入而造成

  • layui输入框只允许输入中文且判断长度的例子

    今天写项目遇到一个问题,在输入老师昵称的时候需要控制input输入框不能为空,且字符的长度有限制,英文字符不能超过20,中文不能超过10.输入课程简介的时候,textarea只能输入中文和中文标点,且长度不超过100.使用框架为:Thymeleaf + layui + shiro. 搜了很多资料没找到全的,现将具体实现展示如下: [不为空的要求:] 这个好解决,只要在代码中加入 lay-verify="required" 即可,这个在layui官方文档中就有,参考https://www

  • js限制文本框只能输入中文的方法

    js限制文本框只能输入中文的方法

    本文实例讲述了js限制文本框只能输入中文的方法.分享给大家供大家参考.具体如下: 让文本框只能输入中文的方法及代码,如果你不小心输入了英文,它会自动倒回去,清空你的输入,直至你输入了中文它可会继续,很有意思,也很实用,当注册一些资料的时候可以来提升输入的准确度. 运行效果如下图所示: 具体代码如下: <html> <head> <title>让一个文本框只能输入汉字的方法</title> <meta http-equiv="Content-T

  • javascript 控制input只允许输入的各种指定内容

    1.只允许输入数字 <input name="username" type="text" onkeyup="value=this.value.replace(/\D+/g,'')"> 2.只允许输入英文字母.数字和下划线(以下二种方法实现) <input name="username" type="text" style="ime-mode:disabled">

  • js控制输入框获得和失去焦点时状态显示的方法

    本文实例讲述了js控制输入框获得和失去焦点时状态显示的方法.分享给大家供大家参考.具体实现方法如下: <!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"&

  • Java中关于控制台读取数字或字符串的方法

    Java中,int a = System.in.read();此句读取的是一个字符,然后返回的是对应字符的ASCII, 例如,控制台输入123,只读取一个字符1,对应的ASCII为49,则输出49,输入abc则读取a,对应的ASCII是97,则输出97: Scanner sc = new Scanner(System.in) int n = sc.nextInt();从控制台读取一个数. String c = sc.next();//从控制台读取字符串 以上就是小编为大家带来的Java中关于控制

随机推荐