javascript限制用户只能输汉字中文的方法

2023年5月19日下午8:14 • JavaScript

要限制用户只能输入汉字中文，可以在JavaScript中使用正则表达式来检查用户输入的文本字符。以下是可以用来实现此目的的JavaScript代码：

// 使用正则表达式检查文本中是否包含非中文字符
function isChinese(str) {
  var regex = /^[\u4E00-\u9FA5]+$/;   // 匹配所有汉字
  return regex.test(str);
}

// 验证用户输入是否合法
function validateInput(input) {
  if (!isChinese(input)) {
    alert("请输入中文字符！");
    return false;
  }
  return true;
}

// 设置输入框的onkeypress事件，确保只能输入汉字中文
document.getElementById("myInput").onkeypress = function(e) {
  var event = e || window.event;
  var keyCode = event.keyCode || event.which;
  if (keyCode === 8 || keyCode === 46) {  // 允许回退和删除键
    return true;
  }
  var keyChar = String.fromCharCode(keyCode);
  return isChinese(keyChar);
};

在上面的代码中，isChinese()函数使用正则表达式来检查输入字符串是否只包含汉字中文（不允许数字、字母和标点符号等非中文字符）。如果用户名不符合要求，validateInput()函数会显示一个警告框并返回false，否则返回true。

最后，使用onkeypress事件来检测输入框中的键盘输入，并使用isChinese()函数来检查输入是否合法。如果输入合法，onkeypress事件处理程序返回true，否则返回false。这将防止用户输入非中文字符。

下面是两个示例：

示例一：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>只允许中文输入示例</title>
</head>
<body>
  <input type="text" id="myInput" placeholder="请输入中文">
  <button onclick="validate()">提交</button>
  <script>
    function isChinese(str) {
      var regex = /^[\u4E00-\u9FA5]+$/;   // 匹配所有汉字
      return regex.test(str);
    }
    function validateInput(input) {
      if (!isChinese(input)) {
        alert("请输入中文字符！");
        return false;
      }
      return true;
    }
    function validate() {
      var input = document.getElementById("myInput").value;
      if (validateInput(input)) {
        alert("输入合法！");
      }
    }
    document.getElementById("myInput").onkeypress = function(e) {
      var event = e || window.event;
      var keyCode = event.keyCode || event.which;
      if (keyCode === 8 || keyCode === 46) {  // 允许回退和删除键
        return true;
      }
      var keyChar = String.fromCharCode(keyCode);
      return isChinese(keyChar);
    };
  </script>
</body>
</html>

示例二：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>只允许中文输入示例</title>
  <style>
    .error {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <label for="myName">请输入您的姓名（中文字符）：</label>
  <input type="text" id="myName">
  <span id="error" class="error"></span>

  <script>
    function isChinese(str) {
      var regex = /^[\u4E00-\u9FA5]+$/;   // 匹配所有汉字
      return regex.test(str);
    }
    function validateInput(input) {
      if (!isChinese(input)) {
        return "只能输入中文字符！";
      }
      return "";
    }
    function validate() {
      var input = document.getElementById("myName").value;
      var error = document.getElementById("error");
      var errorMessage = validateInput(input);
      if (errorMessage.length > 0) {
        error.innerText = errorMessage;
      } else {
        error.innerText = "";
        alert("您的名字是：" + input);
      }
    }
    document.getElementById("myName").onkeypress = function(e) {
      var event = e || window.event;
      var keyCode = event.keyCode || event.which;
      if (keyCode === 8 || keyCode === 46) {  // 允许回退和删除键
        return true;
      }
      var keyChar = String.fromCharCode(keyCode);
      return isChinese(keyChar);
    };
  </script>
</body>
</html>

以上两个示例都呈现了一个输入框和一个提交按钮。第一个示例在提交之前验证了用户输入，而第二个示例在输入框旁边添加了一个错误消息标签，以显示验证错误消息。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript限制用户只能输汉字中文的方法 - Python技术站