layui輸入框只允許輸入中文且判斷長度的例子
今天寫項目遇到一個問題,在輸入老師昵稱的時候需要控制input輸入框不能為空,且字符的長度有限制,英文字符不能超過20,中文不能超過10。輸入課程簡介的時候,textarea只能輸入中文和中文標點,且長度不超過100。使用框架為:Thymeleaf + layui + shiro。
搜了很多資料沒找到全的,現(xiàn)將具體實現(xiàn)展示如下:
[不為空的要求:]
這個好解決,只要在代碼中加入 lay-verify="required" 即可,這個在layui官方文檔中就有,參考https://www.layui.com/doc/element/form.html
下面,咱們主要說長度的問題:
[效果]
解決方式:需要自己寫自定義form.verify。因為layui中l(wèi)ay-verify:是表單驗證的關鍵字
有以下值供選擇:
required (必填項)
phone(手機號)
email(郵箱)
url(網(wǎng)址)
number(數(shù)字)
date(日期)
identity(身份證)
自定義值
沒有符合要求的值,所以需要我們使用自定義值的方法
[代碼如下:]
html代碼如下:
<label class="layui-form-label">老師昵稱:</label> <div class="layui-input-block layui-width21em"> <input id="userName" name="userName" placeholder="請輸入昵稱" class="layui-input" autocomplete="off"> <span style="color:red">(20個字符或者10個中文字)</span> </div>
js代碼:
//自定義驗證規(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個字符或者100個中文字'; } }, 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個字符或者10個中文字'; } } }); });|
注意:一定要寫在form表單提交之前,否則不會起作用。
思路:計算文本內(nèi)容每個字符的unicode編碼和,中文是雙字符,英文是單字符。計算出來后判斷總和,然后將函數(shù)名付給input即lay-verify=“required|nlength”(nlength為自己編寫的名字) 。
下面,咱們解決下一個問題,填寫課程簡介的時候,判斷長度不能超200且只能好似中文和中文標點。
[效果要求:]
html代碼:
<label class="layui-form-label">課程介紹:</label> <div class="layui-input-block"> <textarea class="layui-textarea" style="height:200px;width:800px" lay-verify="required" name="content" placeholder="請輸入課程介紹" th:text="${swCourse.content}"></textarea><span style="color:red">(字符數(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; //自定義驗證規(guī)則 form.verify({ length: function (value) { if(value.length > 20){ return '課程名稱最多只能20個字'; } }, 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個中文字'; } } });|
最后將值付給textarea,即lay-verify=“required|characters|clength”。
好的,現(xiàn)在就可以了(格式好難調(diào),尷尬尷尬,,)
各位如果有其他更好的方式,歡迎追加哦,小妹在此多謝了,有問題之處,還望能提出來!
以上這篇layui輸入框只允許輸入中文且判斷長度的例子就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
實例分析Array.from(arr)與[...arr]到底有何不同
這篇文章通過實例主要給大家分析介紹了關于Array.from(arr)與[...arr]到底有何不同的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用js具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-04-04IE9+已經(jīng)不對document.createElement向下兼容的解決方法
這篇文章主要介紹了IE9+已經(jīng)不對document.createElement向下兼容的解決方法,需要的朋友可以參考下2015-09-09Javascript數(shù)組的?splice?方法詳細介紹
這篇文章主要介紹了Javascript數(shù)組的splice方法詳細介紹,splice方法通過刪除或替換現(xiàn)有元素或者原地添加新的元素來修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容。此方法會改變原數(shù)組2022-09-09