layui输入框只允许输入中文且判断长度的例子


Posted in Javascript onSeptember 18, 2019

今天写项目遇到一个问题,在输入老师昵称的时候需要控制input输入框不能为空,且字符的长度有限制,英文字符不能超过20,中文不能超过10。输入课程简介的时候,textarea只能输入中文和中文标点,且长度不超过100。使用框架为:Thymeleaf + layui + shiro。

搜了很多资料没找到全的,现将具体实现展示如下:

[不为空的要求:]

layui输入框只允许输入中文且判断长度的例子

这个好解决,只要在代码中加入 lay-verify="required" 即可,这个在layui官方文档中就有,参考https://www.layui.com/doc/element/form.html

下面,咱们主要说长度的问题:

[效果]

layui输入框只允许输入中文且判断长度的例子

layui输入框只允许输入中文且判断长度的例子

解决方式:需要自己写自定义form.verify。因为layui中lay-verify:是表单验证的关键字

有以下值供选择:

required (必填项)

phone(手机号)

email(邮箱)

url(网址)

number(数字)

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>

layui输入框只允许输入中文且判断长度的例子

js代码:

//自定义验证规则

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个中文字';
   }
  }
 });
 });|

layui输入框只允许输入中文且判断长度的例子

注意:一定要写在form表单提交之前,否则不会起作用。

思路:计算文本内容每个字符的unicode编码和,中文是双字符,英文是单字符。计算出来后判断总和,然后将函数名付给input即lay-verify=“required|nlength”(nlength为自己编写的名字) 。

下面,咱们解决下一个问题,填写课程简介的时候,判断长度不能超200且只能好似中文和中文标点。

[效果要求:]

layui输入框只允许输入中文且判断长度的例子

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">(字符数控制在100汉字以内,且只能上传文字)</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;
 //自定义验证规则
 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个中文字';
   }
  }
 });|

layui输入框只允许输入中文且判断长度的例子

最后将值付给textarea,即lay-verify=“required|characters|clength”。

好的,现在就可以了(格式好难调,尴尬尴尬,,)

各位如果有其他更好的方式,欢迎追加哦,小妹在此多谢了,有问题之处,还望能提出来!

以上这篇layui输入框只允许输入中文且判断长度的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
微信小程序组件 marquee实例详解
Jun 23 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
Angular实现的table表格排序功能完整示例
Dec 22 Javascript
vue组件实践之可搜索下拉框功能
Nov 25 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
js基础语法与maven项目配置教程案例
Jul 15 Javascript
Vue Components 数字键盘的实现
Sep 18 #Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 #Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 #Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 #Javascript
Typescript的三种运行方式(小结)
Sep 18 #Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 #Javascript
layui的layedit富文本赋值方法
Sep 18 #Javascript
You might like
PHP 创建标签云函数代码
2010/05/26 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
2016/06/29 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
extjs图形绘制之饼图实现方法分析
2020/03/06 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
python快速查找算法应用实例
2014/09/26 Python
Python中的引用和拷贝浅析
2014/11/22 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python库matplotlib绘制坐标图
2019/10/18 Python
Python语法垃圾回收机制原理解析
2020/03/25 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
25岁生日感言
2014/01/13 职场文书
大学生先进事迹材料
2014/02/16 职场文书
安全责任协议书
2014/04/21 职场文书
治超工作实施方案
2014/05/04 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
2014年调度员工作总结
2014/11/19 职场文书
清洁工岗位职责
2015/02/13 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android