广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何实现JavaScript控制输入框中只能输入中文、数字和英文
  • 869
分享到

如何实现JavaScript控制输入框中只能输入中文、数字和英文

2024-04-02 19:04:59 869人浏览 薄情痞子
摘要

这篇文章主要介绍如何实现javascript控制输入框中只能输入中文、数字和英文,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:1、问题背景:遇到这样一个问题:有一个输入框,

这篇文章主要介绍如何实现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控制输入框中只能输入中文、数字和英文”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: 如何实现JavaScript控制输入框中只能输入中文、数字和英文

本文链接: https://www.lsjlt.com/news/77003.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何实现JavaScript控制输入框中只能输入中文、数字和英文
    这篇文章主要介绍如何实现JavaScript控制输入框中只能输入中文、数字和英文,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:1、问题背景:遇到这样一个问题:有一个输入框,...
    99+
    2022-10-19
  • js如何实现限制输入框只能输入数字
    这篇文章主要介绍了js如何实现限制输入框只能输入数字,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。例子:html代码<input ty...
    99+
    2022-10-19
  • winform文本框只能输入数字如何解决
    要使WinForm文本框只能输入数字,可以使用以下方法之一:1. 使用KeyPress事件:在文本框的KeyPress事件中,检查按...
    99+
    2023-09-29
    winform
  • Angularjs中如何验证input输入框只能输入数字和小数点
    这篇文章主要为大家展示了“Angularjs中如何验证input输入框只能输入数字和小数点”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Angularjs中如何...
    99+
    2022-10-19
  • layui如何实现输入框中只允许输入整数
    小编给大家分享一下layui如何实现输入框中只允许输入整数,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如下所示:<inp...
    99+
    2022-10-19
  • 如何设置html文本框input只能输入数字和小数点
    小编给大家分享一下如何设置html文本框input只能输入数字和小数点,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 限制ht...
    99+
    2022-10-19
  • javascript如何设置文本框不能输入数字
    本篇内容介绍了“javascript如何设置文本框不能输入数字”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2022-10-19
  • jquery如何限制文本框中输入的字符数量
    本篇内容介绍了“jquery如何限制文本框中输入的字符数量”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!在jQuery中,我们可以使用att...
    99+
    2023-07-05
  • 如何实现CentOS和ssh支持中文输入
    本篇内容介绍了“如何实现CentOS和ssh支持中文输入”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Linux支持中文,修改/etc/sy...
    99+
    2023-06-10
  • 如何使用CSS实现让同一行文字和输入框对齐
    小编给大家分享一下如何使用CSS实现让同一行文字和输入框对齐,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!代码如下:<!-...
    99+
    2022-10-19
  • jquery如何实现输入框数字的增加和减少功能
    本篇内容主要讲解“jquery如何实现输入框数字的增加和减少功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery如何实现输入框数字的增加和减少功能”吧!代码实现:首先,需要引入jque...
    99+
    2023-07-05
  • JavaScriptr中如何实现输入框字数实时统计更新
    这篇文章主要为大家展示了“JavaScriptr中如何实现输入框字数实时统计更新”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScriptr中如何实现输...
    99+
    2022-10-19
  • 如何在CSS中使用placeholder-shown伪类实现输入框浮动文字效果
    如何在CSS中使用placeholder-shown伪类实现输入框浮动文字效果?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。浮动的文字标签当我们处理输入框时,会想方设法提供...
    99+
    2023-06-08
  • 微信小程序开发中如何实现input空间输入文字
    这篇“微信小程序开发中如何实现input空间输入文字”文章,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要参考一下,对于“微信小程序开发中如何实现input空间输入文字”,小编整理了以下知识点,请大家跟着小编的步伐一...
    99+
    2023-06-26
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作