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中实现暂停的几篇文章
Mar 04 Javascript
用jscript启动sqlserver
Jun 21 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 Javascript
ES6 Promise对象概念与用法分析
Apr 01 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
AngularJS中filter的使用实例详解
Aug 25 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
vue实现购物车的小练习
Dec 21 Vue.js
详解Node.js如何处理ES6模块
May 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
Yii2配置Nginx伪静态的方法
2017/05/05 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
CSS3,HTML5和jQuery搜索框集锦
2014/12/02 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
2016/03/11 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
护理个人求职信范文
2014/01/08 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
5s标语大全
2014/06/23 职场文书
基层党员对照检查材料
2014/08/25 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
出纳岗位职责范本
2015/03/31 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang