今天写项目遇到一个问题,在输入老师昵称的时候需要控制输入输入框不能为空,且字符的长度有限制,英文字符不能超过20中文不能超过10。输入课程简介的时候,textarea只能输入中文和中文标点,且长度不超过100年。使用框架为:Thymeleaf + layui + shiro。
搜了很多资料没找到全的,现将具体实现展示如下:
(不为空的要求:]
这个好解决,只要在代码中加入lay-verify=皉equired”即可,这个在layui官方文档中就有,参考https://www.layui.com/doc/element/form.html
下面,咱们主要说长度的问题:
[效果)
需要自己写自定义form.verify。因为layui中lay-verify:是表单验证的关键字
<强>有以下值供选择:
要求(必填项)
电话(手机号)
电子邮件(邮箱)
url(网址)
数(数字)
日期(日期)
身份(身份证)
自定义值
没有符合要求的值,所以需要我们使用自定义值的方法
[代码如下:]
html代码如下:
& lt;标签类=" layui-form-label "祝辞老师昵称:& lt;/label>
& lt; div class=" layui-input-block layui-width31em”比;
& lt;输入id="用户名" name="用户名"占位符=扒胧淙腙浅啤袄?發ayui-input”
自动完成=肮乇铡北?
& lt;跨度祝辞(20个字符或者10个中文字)& lt;/span>
& lt;/div>
js代码:
//自定义验证规则
form.verify ({
clength:功能(价值){
var我,总和;
金额=0;
(i=0; i< value.length;我+ +){
如果((value.charCodeAt (i)在=0),,(value.charCodeAt(我)& lt;=255))
和=和+ 1;
其他的
和=和+ 2;
}
如果(祝辞总和;200){
返回“老师简介最多只能200个字符或者100个中文字”;
}
},
nlength:功能(价值){
var我,总和;
金额=0;
(i=0; i< value.length;我+ +){
如果((value.charCodeAt (i)在=0),,(value.charCodeAt(我)& lt;=255))
和=和+ 1;
其他的
和=和+ 2;
}
如果(祝辞总和;20){
返回“老师昵称最多只能20个字符或者10个中文字”;
}
}
}）;
});|
之前
注意:一定要写在表单表单提交之前,否则不会起作用。
计算文本内容每个字符的unicode编码和,中文是双字符,英文是单字符。计算出来后判断总和,然后将函数名付给输入即lay-verify=靶枰獆 nlength”(nlength为自己编写的名字)。
下面,咱们解决下一个问题,填写课程简介的时候,判断长度不能超200且只能好似中文和中文标点。
[效果要求:]
html代码:
& lt;标签类=" layui-form-label "祝辞课程介绍:& lt;/label>
& lt; div类=發ayui-input-block”比;
& lt; textarea类=發ayui-textarea”lay-verify="需要" name=澳谌荨闭嘉环?扒胧淙肟纬探樯堋?
th:文本=" $ {swCourse.content} "祝辞& lt;/textarea> & lt;跨度祝辞(字符数控制在100年汉字以内,且只能上传文字)& lt;/span>
& lt;/div>
& lt;/div> |
js代码
layui。使用([“层”,“jquery”,“形式”,“上传”、“laytpl”),函数(){
var=layui.jquery美元;
var层=layui.layer;
var laytpl=layui.laytpl;
var=layui形式。形式,上传=layui.upload;//自定义验证规则
form.verify ({
长度:功能(价值){
如果(价值。长度比;20){
返回的课程名称最多只能20个字”;
}
},
人物:函数(v) {
var numasc=0;
var charasc=0;
var otherasc=0;
(var=0;我& lt;v.length;我+ +){
var asciiNumber=v。substr(我,1).charCodeAt ();
如果(asciiNumber祝辞=48,,asciiNumber & lt;=57) {
numasc +=1;
}
如果(asciiNumber祝辞=65,,asciiNumber & lt;=90) | | (asciiNumber祝辞=97,,asciiNumber & lt;=122)) {
charasc +=1;
}
如果(asciiNumber祝辞=33,,asciiNumber & lt;=47) | | (asciiNumber祝辞=58,,asciiNumber & lt;=64) | | (asciiNumber祝辞=91,,asciiNumber & lt;=96) | | (asciiNumber祝辞=123,,asciiNumber & lt;=126)) {
otherasc +=1;
}
}
如果(numasc比;0 | | charasc> 0 | | otherasc> 0) {
返回“只能输入中文”;
}
},
clength:功能(价值){
var我,总和;
金额=0;
(i=0; i< value.length;我+ +){
如果((value.charCodeAt (i)在=0),,(value.charCodeAt(我)& lt;=255)) {
和=和+ 1;
其他}{
和=和+ 2;
}
}
如果(祝辞总和;200){
返回的课程介绍最多只能输入100个中文字”;
}
}
});|
