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

 更新时间:2019年09月18日 14:45:46   作者:suyan_ll1992  
今天小编就为大家分享一篇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代码如下:

<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代码:

//自定义验证规则


 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代码:

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

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

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

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

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

相关文章

  • 实例分析Array.from(arr)与[...arr]到底有何不同

    实例分析Array.from(arr)与[...arr]到底有何不同

    这篇文章通过实例主要给大家分析介绍了关于Array.from(arr)与[...arr]到底有何不同的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-04-04
  • IE9+已经不对document.createElement向下兼容的解决方法

    IE9+已经不对document.createElement向下兼容的解决方法

    这篇文章主要介绍了IE9+已经不对document.createElement向下兼容的解决方法,需要的朋友可以参考下
    2015-09-09
  • javascript 精粹笔记

    javascript 精粹笔记

    javascript 精粹笔记,都是一些js下应用技巧之类,学习js的朋友可以简单的参考浏览下。
    2010-05-05
  • JS获取img图片原始尺寸高度与宽度的七种方式

    JS获取img图片原始尺寸高度与宽度的七种方式

    近期做项目由于每张图片加载的时候比例大小都不一样,加载图片时大部分图片会变形,导致图片展示效果非常差,所以我们可以获取图片的原始宽高,然后以等比例展示,效果会非常好,这篇文章主要给大家介绍了关于JS获取img图片原始尺寸高度与宽度的七种方式,需要的朋友可以参考下
    2022-11-11
  • 微信小程序实现简单计算器功能

    微信小程序实现简单计算器功能

    这篇文章主要为大家详细介绍了微信小程序实现简单计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • js时间戳格式化成日期格式的多种方法介绍

    js时间戳格式化成日期格式的多种方法介绍

    本篇文章主要介绍了js时间戳格式化成日期格式的多种方法介绍的资料,这里整理了详细的代码,有需要的小伙伴可以参考下。
    2017-02-02
  • JavaScript判断当前时间是在某个时间点之前/之后

    JavaScript判断当前时间是在某个时间点之前/之后

    本文主要介绍了JavaScript判断当前时间是在某个时间点之前/之后,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Javascript数组的 splice 方法详细介绍

    Javascript数组的 splice 方法详细介绍

    这篇文章主要介绍了Javascript数组的splice方法详细介绍,splice方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组
    2022-09-09
  • js实现磁性吸附的示例

    js实现磁性吸附的示例

    这篇文章主要介绍了js实现磁性吸附的示例,帮助大家更好的制作js特效,美化自己的网页,感兴趣的朋友可以了解下
    2020-10-10
  • JS严格模式原理与用法实例分析

    JS严格模式原理与用法实例分析

    这篇文章主要介绍了JS严格模式原理与用法,结合实例形式分析了JS严格模式基本概念、原理、用法及相关操作注意事项,需要的朋友可以参考下
    2020-04-04

最新评论