ayui輸入框只允許輸入中文且判斷長度的例子
阿新 • • 發佈：2021-12-25
layui輸入框只允許輸入中文且判斷長度的例子
今天小編就為大家分享一篇layui輸入框只允許輸入中文且判斷長度的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧 今天寫專案遇到一個問題，在輸入老師暱稱的時候需要控制input輸入框不能為空，且字元的長度有限制，英文字元不能超過20，中文不能超過10。輸入課程簡介的時候，textarea只能輸入中文和中文標點，且長度不超過100。使用框架為：Thymeleaf + layui + shiro。搜了很多資料沒找到全的，現將具體實現展示如下：
[不為空的要求：]
這個好解決，只要在程式碼中加入 lay-verify="required" 即可，這個在layui官方文件中就有，參考 https://www.layui.com/doc/element/form.html
下面，咱們主要說長度的問題：
[效果]
解決方式：需要自己寫自定義form.verify。因為layui中lay-verify：是表單驗證的關鍵字
有以下值供選擇：
required (必填項)
phone（手機號）
email（郵箱）
url（網址）
number（數字）
date（日期）
identity(身份證)
自定義值
沒有符合要求的值，所以需要我們使用自定義值的方法
[程式碼如下：]
html程式碼如下：
| 1 2 3 4 5 6 |
<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程式碼：
//自定義驗證規則
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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表單提交之前，否則不會起作用。
思路：計算文字內容每個字元的unicode編碼和，中文是雙字元，英文是單字元。計算出來後判斷總和，然後將函式名付給input即lay-verify=“required|nlength”（nlength為自己編寫的名字） 。
下面，咱們解決下一個問題，填寫課程簡介的時候，判斷長度不能超200且只能好似中文和中文標點。
[效果要求:]
html程式碼：
| 1 2 3 4 5 6 |
<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">(字元數控制在100漢字以內，且只能上傳文字)</span>
</div>
</div>|
|
js程式碼
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
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;
//自定義驗證規則
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”。
好的，現在就可以了（格式好難調，尷尬尷尬，，）
各位如果有其他更好的方式，歡迎追加哦，小妹在此多謝了，有問題之處，還望能提出來！
以上這篇layui輸入框只允許輸入中文且判斷長度的例子就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援指令碼之家。