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