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

(0)

相关推荐

  • layui输入框中只允许输入整数的实现方法

    如下所示: <input class="layui-input" onkeyup="value=zhzs(this.value)" lay-verify="required|number" id="" name="" value="" maxlength="7"> //转化正整数 function zhzs(value){ value = value.re

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

    今天写项目遇到一个问题,在输入老师昵称的时候需要控制input输入框不能为空,且字符的长度有限制,英文字符不能超过20,中文不能超过10.输入课程简介的时候,textarea只能输入中文和中文标点,且长度不超过100.使用框架为:Thymeleaf + layui + shiro. 搜了很多资料没找到全的,现将具体实现展示如下: [不为空的要求:] 这个好解决,只要在代码中加入 lay-verify="required" 即可,这个在layui官方文档中就有,参考https://www

  • JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】

    本文实例讲述了JavaScript控制输入框中只能输入中文.数字和英文的方法.分享给大家供大家参考,具体如下: 1.问题背景: 遇到这样一个问题:有一个输入框,要求只能输入中文.数字和英文(即过滤特殊字符串) 2.JS代码: function checkUsername() { //正则表达式 var reg = new RegExp("^[A-Za-z0-9\u4e00-\u9fa5]+$"); //获取输入框中的值 var username = document.getElemen

  • Android金额输入框只允许输入小数点后两位效果

    一:要实现这个效果也不是很复杂,只需要设置输入框输入的字符类型.设置InputFilter.设置输入变化监听即可.下面直接来看代码吧-. 二:new 一个class extends AppCompatEditText并写上一个初始化函数 private void init() { //设置输入框允许输入的类型(正则) //对应的布局属性是--->android:digits="0123456789." setKeyListener(DigitsKeyListener.getIns

  • iOS UITextField、UITextView只限输入中文、英文、数字及实时限制字符个数的封装实现代码

    引言需求:(输入框限制输入多少字符) 1.一个字母.符号.数字相当于一个字符 2.一个汉字相当于两个字符 3.不能输入特殊字符 4.不能输入emoji表情 直接上代码 一.注册通知 [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(textFieldChange:) name:UITextFieldTextDidChangeNotification object:nil]; [[NSNotifica

  • 一条命令解决mac版本python IDLE不能输入中文问题

    安装完Python通常自动就有了一个简易的集成环境IDLE,但在mac上,无法在IDLE中使用中文. 通常故障有两种情况: 1.在IDLE中,中文输入法根本无法工作,不会弹出输入框,所有的输入都被当做英文对待. 这种情况是由于IDLE使用了Tkinter 图形库,Tkinter使用的依赖库Tcl/Tk,在macOS中已经有了一个较低的内置版本,这造成了中文无法输入的问题,解决办法可以重新安装使用高版本Tcl/Tk编译的python,在Homebrew下只需要一条命令: brew reinstal

  • VBS利用SendKeys输入中文字符的方法

    首先我们看一个输入字母的例子: 复制代码 代码如下: set s = WScript.CreateObject("WScript.Shell") app=s.Run ("C:\windows\notepad.exe") code="biweilun" WScript.Sleep 1000 s.AppActivate app s.SendKeys code Wscript.quit 这段vbs会SendKeys方法的朋友就知道,作用是打开一个记事本

  • 使用UITextField限制只可输入中,英文,数字的方法

    前言 本文主要介绍使用UITextField限制只可输入中,英文,数字,我们可以使用NSPredicate正则表达式可以过滤,下面看看详细的步骤方法 首先设置UItextField的代理 实现如下方法: - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string{ if ([self isInputRuleA

  • js实现文本框只允许输入数字并限制数字大小的方法

    本文实例讲述了js实现文本框只允许输入数字并限制数字大小的方法.分享给大家供大家参考.具体如下: 这是一个很个性的输入框特效,规定文本框只允许输入数字,如果你执意要输入其它的字符,则输入的字符将自动消失,除非你输入的是规定内的字符格式,并且对输入数字大小也有限制!为保证兼容性,请使用火狐浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-limit-num-codes/ 具体代码如下: <!DOCTYPE html PUB

  • Android控制文本输入框最多输入10个字符长度

    最近遇到一个需求是要求用户只能输入10个字符或者五位中文的数据,遇到这样的问题第一反应就是 android:maxLength="10"这个属性然而去测试发现中文也是十个.百度了一下发现setFilters这个方法,网上的例子是不管当前输入框是否有值,只要输入超出10个字符则不给输入框赋值,个人感觉用户体验不太好,应当根据当前输入框内的值来截取对应长度的字符填充. 代码如下: et_name = (EditText) findViewById(R.id.et_name); // 控制输

随机推荐