今天寫項目遇到一個問題,在輸入老師昵稱的時候需要控制input輸入框不能為空,且字符的長度有限制,英文字符不能超過20,中文不能超過10。輸入課程簡介的時候,textarea只能輸入中文和中文標點,且長度不超過100。使用框架為:Thymeleaf + layui + shiro。
成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站10余年經(jīng)驗成就非凡,專業(yè)從事成都做網(wǎng)站、成都網(wǎng)站建設(shè),成都網(wǎng)頁設(shè)計,成都網(wǎng)頁制作,軟文發(fā)布平臺,廣告投放平臺等。10余年來已成功提供全面的成都網(wǎng)站建設(shè)方案,打造行業(yè)特色的成都網(wǎng)站建設(shè)案例,建站熱線:18982081108,我們期待您的來電!
搜了很多資料沒找到全的,現(xiàn)將具體實現(xiàn)展示如下:
[不為空的要求:]

這個好解決,只要在代碼中加入 lay-verify="required" 即可,這個在layui官方文檔中就有,參考https://www.layui.com/doc/element/form.html
下面,咱們主要說長度的問題:
[效果]


解決方式:需要自己寫自定義form.verify。因為layui中l(wèi)ay-verify:是表單驗證的關(guān)鍵字
有以下值供選擇:
required (必填項)
phone(手機號)
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個字符或者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" 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;
//自定義驗證規(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)容了,希望能給大家一個參考,也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站題目:layui輸入框只允許輸入中文且判斷長度的例子
當前路徑:http://www.chinadenli.net/article36/iphgsg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、網(wǎng)站策劃、網(wǎng)站收錄、定制網(wǎng)站、建站公司、電子商務(wù)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)