input 文本框,对中文长度校验
在项目中,经常会遇到,对文本框进行校验。
eg. 要求姓名长度为20,中文为10,只能输入中英文。
<input maxlength="20" type="text" @blur="nameblur" v-model="name" placeholder="请输入姓名">
nameblur(e) {
let vm = this;
let userNameWrongAry = ['', '姓名输入有误,请重新输入', '请输入中文或者英文'];
function strLen(str) {
return (function (len) {
for (var i = 0; i < str.length; i++) {
var c = str.charAt(i);
if (/^[\u0000-\u00ff]$/.test(c)) //匹配双字节
{
len += 1;
} else {
len += 2;
}
}
return len;
})(0);
}
if (vm.name.trim() == '') {
weui.topTips(userNameWrongAry[0], {duration: 3000,});
return false;
}
if (strLen(vm.name.trim()) > 20) {
weui.topTips(userNameWrongAry[1], {duration: 3000,});
return false;
}
let parrent = /^[A-z\u4E00-\u9FA5\s]+$/g;
if (!parrent.test(vm.name.trim())) {
weui.topTips(userNameWrongAry[2], {duration: 3000,});
return false;
}
}
input 文本框,对中文长度校验的更多相关文章
- HTML input 文本框输入中文逗号自动转换为英文逗号
input 标签中增加 onkeyup.onafterpaste 属性: <input type="text"placeholder="中文逗号自动转换为英文逗号& ...
- 我的插件のinput文本框实现宽度自适应
先来最后结果:DEMO 介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <htm ...
- jQuery限制文本框的输入长度
jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () { $(document).on("keypress", ".txt-val ...
- jQuery实现限制文本框的输入长度
jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () { $(document).on("keypress", ".txt-va ...
- input文本框设置和移除默认值
input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...
- HTML input文本框设置和移除默认值
这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...
- input 文本框和 img 验证码对齐问题
input 文本框和 img 验证码对齐问题 在网页制作中,常将 input 和 img 放在同一行,img标签总是比input高出一个头,非常难看. CCS实现input和img水平对齐的方法 同时 ...
- 捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)
input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...
- chrome下input文本框自动填充背景问题解决
chrome下input文本框会自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px ...
- 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js
做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...
随机推荐
- 查看linux的IO占用
iotop -oPiostat -xm 1 iostat -d -x -kiostat -c top
- 超详细Redis数据库入门教程
[本教程目录] 1.redis是什么2.redis的作者何许人也3.谁在使用redis4.学会安装redis5.学会启动redis6.使用redis客户端7.redis数据结构 – 简介8.redis ...
- mysql数据库优化(二)
1.sql防止注入 https://www.cnblogs.com/sevck/p/6733702.html 结果: C:\Users\ASUS\kuaigong3.6.5\lib\site-pack ...
- (转)3款优秀的移动webAPP网站在线测试工具
原文:原文地址 目前适配各个终端的需求越来越强烈呢?比如我们APP项目上线之后,需要一个宣传推广专题页,这个页面当然最好是采取响应式布局来完成.因为需要来推广和下载我们的APP. 无论用户是电脑打开, ...
- 在eclipse中安装go编辑器阅读fabric代码
参考资料 由于fabric采用go语言编写,故需要安装go环境. 安装要求: Java VM version 8 or later. Eclipse 4.6 (Neon) or later. 1. J ...
- 【转】 C#操作FTP
代码不要忘记引入命名空间using System.Net;using System.IO;下面的几个步骤包括了使用FtpWebRequest类实现ftp功能的一般过程1.创建一个FtpWebReque ...
- Elasticsearch5.5.2安装和启动遇到哪些问题
最近学习Elasticsearch,顺便记录下操作步骤,供日后参考 安装环境 CentOS release 6.6 1.因Elasticsearch是基于java写的,所以它的运行环境中需要java的 ...
- 【Excel】绘图案例_常见复合图:簇状图+堆积图+折线图
前言 最近有朋友让我帮忙用excel画图,老实说我很讨厌用excel画图,点来点去,复杂一些还不能复用,非常繁琐.当然,入门也很简单.需求时不同城市.不同产品的2016和2017销量及环比数据,这应该 ...
- 33. 完全卸载oracle11g步骤
完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->Oracle - OraHome ...
- Ubuntu系统tensorflow安装问题及解决
su root ps:如果你没有改过root密码,sudo passwd 然后输入你的账户密码,然后设置你的root密码 在root权限下执行pip install --upgrade pip 更 ...