首页 | 编程 | Java

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

2018年11月30日 作者：suyan_ll1992原文

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

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

[不为空的要求：]

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

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输入框只允许输入中文且判断长度的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持来客网。

相关链接