2. 程式人生 > >JS校驗textarea輸入框中是否包含中文

JS校驗textarea輸入框中是否包含中文

阿新 • • 發佈：2019-02-09

寫在前面

下面html程式碼可以直接在菜鳥教程的網站去執行,比較方便快捷,省時省力.

程式碼功能描述

判斷你的輸入中有沒有漢字,直接上程式碼吧,文章最後在說說其中遇到的問題.

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>JS校驗字元中是否有中文</title>
  </head>

  <head>
    <script>function judgeChinese(obj, spanid)
 
 {

        var str = obj.value;
        var strArray = str.split("");

        var haveChinese = false;
        var i;
        for (i = 0; i < strArray.length; i++) {
          if (isChinese(strArray[i])) {
            haveChinese = true;
            break;
          }
        }
        if (haveChinese) {
          document.getElementById(spanid).innerHTML = "有中文!"
 
;
        } else {
          document.getElementById(spanid).innerHTML = "沒有中文!";
        }

      }

      function isChinese(c) {
        var specialChar = "[email protected]#$%^&*()_+{}:\"<>?-=[];',./'vwxyz";
        var index = specialChar.indexOf(c);
        if (index > -1) {
          return
 
 false;
        } else {
          var re = /[^u4e00-u9fa5]/;
          return re.test(c);
        }

      }</script>
  </head>

  <body>輸入文字:
    <textarea id="fname" onchange="judgeChinese(this,'spanId')"></textarea>
    <span id="spanId" style="color:red;">有漢字嗎?</span>
    <p>當你離開輸入框後，函式將被觸發，將判斷你的輸入中是否有漢字。</p>
  </body>

</html>

總結

字串分成陣列

JS程式碼var arr = str.split(""),比如str=”abcd”時,arr=[‘a’,’b’,’c’,’d’].str中的漢字也當成作為一個字元.split()的其他用法就不說了,具體參考菜鳥教程JavaScript|split.

遍歷陣列

用for迴圈來做.這裡發現了兩種方法:
方法一:

for(var i = 0; i < arr.length; i++){
    arr[i];
}

方法二:

var i;
for(i in arr){
    arr[i];
}

方法二比較類似java的foreach迴圈,但是我用的時候出了問題,就是當陣列完了,但是迴圈還沒有停.所以我的程式碼採用了方法一做遍歷.
對for迴圈還感興趣的,可以看看菜鳥教程中的for

判斷某串中是否有某個字元

這裡介紹三個函式.
str.match(var regexp)返回值是陣列,會返回str中的所有符合正則的字元段陣列集合.
str.indexOf(var c)返回第一次出現c的位置,沒有返回-1.
str.lastIndexOf(var c)返回最後一次出現c的位置,沒有返回-1.

關於正則匹配中文漢字

網上的教程都是這一個正則就解決問題了var re = /[^u4e00-u9fa5]/;但是我在測試的時候幾個問題.
1.英文的星號* 冒號: 引號” 引號’等符號也會在re.test(xxx);時返回true.
2.英文字母 vwxyz5個字元也會返回true.
這兩個關於字元編碼的問題我現在也沒有搞懂,然後就用了上面那種折中的辦法.(如果這倆個問題不存在的話,也就不用先把字元分成陣列在挨個校驗了).

相關推薦

JS校驗textarea輸入框中是否包含中文

寫在前面 下面html程式碼可以直接在菜鳥教程的網站去執行,比較方便快捷,省時省力. 程式碼功能描述 判斷你的輸入中有沒有漢字,直接上程式碼吧,文章最後在說說其中遇到的問題. <!DOCTYPE html> <html>

input只輸入數字和js校驗是否輸入框只有數字以及游標放輸入框時，輸入框裡內容消失

input只輸入數字和js校驗是否輸入框只有數字以及游標放輸入框時，輸入框裡內容消失 input框只能輸入數字： 1 onkeyup="value=value.replace(/[^\d]/g,'')" js校驗是否是純數字 1 if(isNaN(bankAccountNo)){ 2

js統計input/textarea輸入框輸入字數

如果你在實現“統計input、textarea文字框輸入字數”中遇到問題，閱讀本文或許可以幫助你解決這個棘手的問題！ 手機頁面開發，要統計textareal文字框輸入字數，使用onkeyup雖然可以監聽到輸入框的文字字數變化，但在iphone下有個問題：

JS實時監聽輸入框中的內容

    有時候我們需要實時監聽輸入框中值得變化，這裡得實時監聽是指當我們獲取到輸入框焦點，並在其中鍵入字元的時候，我們可以監聽到當每次鍵入字元後，獲取輸入框中的內容。如下圖 當在上邊的輸入框中每次輸

JS校驗銀行卡號、輸入卡號時放大效果

比較 left for 取出 abs focusout htm length rep 一、(校驗格式) function CheckBankNo(t_bankno) { 　　var bankno = $.trim(t_bankno); 　　if(bankno == ""

js響應id事件和獲取input輸入框中class值、id的值

js響應id事件：記得要在外面多加一個$(function(){ ... });$(function(){ $("#publish").click(function(){ //通過class獲

html js 校驗文字框 設定span顏色字型

1.給span設定提示文字 ,設定文字大小，字型顏色 <span style="font-size:18px;"><input type="text" id="name" id="n

js 給textarea輸入框內容自動新增換行符

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html;

獲取textarea文本框所選字符光標位置索引，以及選中的文本值；textarea高度自適應，隨著內容增加高度增加；獲取輸入框中的光標位置

creat substring ons osi 內容 poi name range init 獲取textarea文本框所選字符光標位置索引，以及選中的文本值 　　　　　　　　$.fn.selection = function () {

實時顯示從file輸入框中打開的圖片C:fakepath路徑問題

webkit ins alt container dom clas ref 元素 filters html代碼: <input id="file_upload" type="file" /> <div class="image_container"

前端判斷輸入框中是數字的正則表達式

ble itl title log input his pos 不同 utf-8 工作中有不同的判斷要求，一般是判斷輸入框是正整數或者是正的小數，但是有的判斷還要加能輸入空也就是不輸入，這就是現在要解決的問題。 var tt=/^(?:(?!0)\d*|0)(?:\.

表單輸入框中如何改變光標的顏色而文字顏色不變

效果 caret 如何改變 info 紅色 圖片 css 分享 mage 如圖所示，要想改變光標顏色，可以通過css的caret-color來設置 input { caret-color: red; } 顯示效果，鼠標點擊輸入框之後，光標顏色

input輸入框中的光標大小顯示不一致的解決方法

12px 字體 height size 文字 padding 輸入框 我們 解決方法 chrome瀏覽器對光標高度的設置原則為，當沒有內容的時候光標的高度=input的line-height的值，當有內容時，光標從input的頂端到文字的底部 input輸入框中的光標大小顯

Python3 tkinter基礎 Entry get 點擊按鈕 將輸入框中文字輸出到控制臺

char 一件事 進行 gui 思維 inf 思想 col pycharm ? python : 3.7.0 OS : Ubuntu 18.04.1 LTS

03 React快速入門（三）——實現從一個輸入框中新增完資料後此輸入框內容清除的功能

功能描述：       我們在一個輸入框輸入內容，然後點選新增按鈕，此輸入框的內容就會新增到頁面上，但是此輸入框中還存在上次輸入的內容，我們想在每次輸入新增完成之後，此輸入框中的內容就會清除，如圖：      

js校驗引數是否為空以及校驗url格式

/**   * 校驗欄位是否為URL  * message為提示語關鍵字  */ function isURL(param,message,allowNull) {// 驗證url     var strRegex = "^((h

swing輸入框內容即時同步到其他輸入框中

當swing面板中有很多密碼輸入框，有時需要填寫一個其他的可以即時同步。而swing面板不同於HTML頁面，需要新增事件監聽事件addKeyListener（）來進行同步。下面是簡單的原理實現。 import java.awt.GridLayout; import jav

js 校驗 btc eth 地址

prime code 支持 limit komodo example ria meta there NPM 安裝 npm install wallet-address-validator Browser <script src="wallet-address

textarea文字框中游標置於行首

1. js部分  <script language="javascript">

js獲取select下拉框中的值

現在有一id為userType的下拉框，怎麼獲取選中的值： 1 使用者型別: 2 <select name="type" id="userType"> 3 <option value="0">請選擇</option> 4 <option v