layui輸入框只允許輸入中文且判斷長度的例子

發(fā)布時(shí)間：2020-09-06 18:58:04 來源：腳本之家閱讀：376 作者：suyan_ll1992 欄目：web開發(fā)

今天寫項(xiàng)目遇到一個(gè)問題，在輸入老師昵稱的時(shí)候需要控制input輸入框不能為空，且字符的長度有限制，英文字符不能超過20，中文不能超過10。輸入課程簡介的時(shí)候，textarea只能輸入中文和中文標(biāo)點(diǎn)，且長度不超過100。使用框架為：Thymeleaf + layui + shiro。

搜了很多資料沒找到全的，現(xiàn)將具體實(shí)現(xiàn)展示如下：

[不為空的要求：]

這個(gè)好解決，只要在代碼中加入 lay-verify="required" 即可，這個(gè)在layui官方文檔中就有，參考https://www.layui.com/doc/element/form.html

下面，咱們主要說長度的問題：

[效果]

layui輸入框只允許輸入中文且判斷長度的例子

解決方式：需要自己寫自定義form.verify。因?yàn)閘ayui中l(wèi)ay-verify：是表單驗(yàn)證的關(guān)鍵字

有以下值供選擇：

required (必填項(xiàng))

phone（手機(jī)號）

email（郵箱）

url（網(wǎng)址）

number（數(shù)字）

date（日期）

identity(身份證)

自定義值

沒有符合要求的值，所以需要我們使用自定義值的方法

[代碼如下：]

html代碼如下：

<label class="layui-form-label">老師昵稱：</label>
<div class="layui-input-block layui-width31em">
 <input id="userName" name="userName" placeholder="請輸入昵稱" class="layui-input"
 autocomplete="off">
 <span >(20個(gè)字符或者10個(gè)中文字)</span>
</div>

layui輸入框只允許輸入中文且判斷長度的例子

js代碼：

//自定義驗(yàn)證規(guī)則


 form.verify({
 clength: function (value) {
   var i,sum; 
  sum=0; 
  for(i=0;i<value.length;i++){ 
  if ((value.charCodeAt(i)>=0) && (value.charCodeAt(i)<=255)) 
   sum=sum+1; 
  else 
   sum=sum+2; 
  } 
   if (sum > 200) {
    return '老師簡介最多只能200個(gè)字符或者100個(gè)中文字';
   }
  },
  nlength: function (value) {
  var i,sum; 
  sum=0; 
  for(i=0;i<value.length;i++){ 
  if ((value.charCodeAt(i)>=0) && (value.charCodeAt(i)<=255)) 
   sum=sum+1; 
  else 
   sum=sum+2; 
  } 
   if (sum > 20) {
    return '老師昵稱最多只能20個(gè)字符或者10個(gè)中文字';
   }
  }
 });
 });|

layui輸入框只允許輸入中文且判斷長度的例子

注意：一定要寫在form表單提交之前，否則不會起作用。

思路：計(jì)算文本內(nèi)容每個(gè)字符的unicode編碼和，中文是雙字符，英文是單字符。計(jì)算出來后判斷總和，然后將函數(shù)名付給input即lay-verify=“required|nlength”（nlength為自己編寫的名字）。

下面，咱們解決下一個(gè)問題，填寫課程簡介的時(shí)候，判斷長度不能超200且只能好似中文和中文標(biāo)點(diǎn)。

[效果要求:]

layui輸入框只允許輸入中文且判斷長度的例子

html代碼：

 <label class="layui-form-label">課程介紹：</label>
 <div class="layui-input-block">
 <textarea class="layui-textarea"  lay-verify="required" name="content" placeholder="請輸入課程介紹"
 th:text="${swCourse.content}"></textarea><span >(字符數(shù)控制在100漢字以內(nèi)，且只能上傳文字)</span>
 </div>
 </div>|

js代碼

layui.use([ ‘layer', ‘jquery', ‘form', ‘upload', ‘laytpl' ], function() {
 var $ = layui.jquery;
 var layer = layui.layer;
 var laytpl = layui.laytpl;
 var form = layui.form, upload = layui.upload;
 //自定義驗(yàn)證規(guī)則
 form.verify({
 length: function (value) {
   if(value.length > 20){
   return '課程名稱最多只能20個(gè)字';
   }
  },
  characters:function(v){
   var numasc = 0;
    var charasc = 0;
    var otherasc = 0;
  for (var i = 0; i < v.length; i++) {
     var asciiNumber = v.substr(i, 1).charCodeAt();
     if (asciiNumber >= 48 && asciiNumber <= 57) {
      numasc += 1;
     }
     if ((asciiNumber >= 65 && asciiNumber <= 90)||(asciiNumber >= 97 && asciiNumber <= 122)) {
      charasc += 1;
     } 
     if ((asciiNumber >= 33 && asciiNumber <= 47)||(asciiNumber >= 58 && asciiNumber <= 64)||(asciiNumber >= 91 && asciiNumber <= 96)||(asciiNumber >= 123 && asciiNumber <= 126)) {
      otherasc += 1;
     }
    }
  if(numasc > 0 || charasc>0 || otherasc>0) {
     return "只能輸入中文";
    }
  } ,
 clength: function (value) {
   var i,sum; 
  sum=0; 
  for(i=0;i<value.length;i++){ 
  if ((value.charCodeAt(i)>=0) && (value.charCodeAt(i)<=255)){ 
   sum=sum+1; 
  }else{
   sum=sum+2; 
  }
  } 
   if (sum > 200) {
    return '課程介紹最多只能輸入100個(gè)中文字';
   }
  }
 });|

layui輸入框只允許輸入中文且判斷長度的例子

最后將值付給textarea，即lay-verify=“required|characters|clength”。

好的，現(xiàn)在就可以了（格式好難調(diào)，尷尬尷尬，，）

各位如果有其他更好的方式，歡迎追加哦，小妹在此多謝了，有問題之處，還望能提出來！

以上這篇layui輸入框只允許輸入中文且判斷長度的例子就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

layui輸入框只允許輸入中文且判斷長度的例子

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽