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 相关文章推荐
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
jQuery实现图片局部放大镜效果
Mar 17 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
jquery 动态合并单元格的实现方法
Aug 26 Javascript
Javascript动画效果(3)
Oct 11 Javascript
Angular 常用指令实例总结整理
Dec 13 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
微信小程序 网络通信实现详解
Jul 23 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 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
图书管理程序(二)
2006/10/09 PHP
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
js 表格隔行颜色
2009/12/02 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
自己使用js/jquery写的一个定制对话框控件
2014/05/02 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
JavaScript 作用域实例分析
2019/10/02 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
2020/04/11 Javascript
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
极简的Python入门指引
2015/04/01 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
Python中print和return的作用及区别解析
2019/05/05 Python
python3 深浅copy对比详解
2019/08/12 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
写好求职信第一句话的技巧
2013/10/26 职场文书
人事部经理岗位职责
2014/03/07 职场文书
关于环保的建议书400字
2014/03/12 职场文书
回复函格式及范文
2015/07/14 职场文书
2016年校长新年寄语
2015/08/17 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL