在项目中,经常会遇到,对文本框进行校验。

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 文本框,对中文长度校验的更多相关文章

  1. HTML input 文本框输入中文逗号自动转换为英文逗号

    input 标签中增加 onkeyup.onafterpaste 属性: <input type="text"placeholder="中文逗号自动转换为英文逗号& ...

  2. 我的插件のinput文本框实现宽度自适应

    先来最后结果:DEMO 介绍一下如何让一个文本框的宽度能够随着文本框中的内容的宽度增长而增长,也就是能够实现宽度自适应效果. 代码实例如下: <!DOCTYPE html> <htm ...

  3. jQuery限制文本框的输入长度

    jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () { $(document).on("keypress", ".txt-val ...

  4. jQuery实现限制文本框的输入长度

    jQuery限制文本框输入,包含粘贴. //限制文本框的输入长度 $(function () {  $(document).on("keypress", ".txt-va ...

  5. input文本框设置和移除默认值

    input文本框设置和移除默认值 这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: ...

  6. HTML input文本框设置和移除默认值

    这里想实现的效果是:设置和移除文本框默认值,如下图鼠标放到文本框中的时候,灰字消失. 1.可以用简单的方式,就是给input文本框加上onfocus属性,如下代码: <input id=&quo ...

  7. input 文本框和 img 验证码对齐问题

    input 文本框和 img 验证码对齐问题 在网页制作中,常将 input 和 img 放在同一行,img标签总是比input高出一个头,非常难看. CCS实现input和img水平对齐的方法 同时 ...

  8. 捕获input 文本框内容改变的事件(onchange,onblur,onPropertyChange比较)

    input 文本框内容改变,可以使用onchange或者onblur来判断,但onchange是在文本内容改变,然后失去焦点的时发生,onblur是在失去焦点时发生,不会自己去判断. 如: <i ...

  9. chrome下input文本框自动填充背景问题解决

    chrome下input文本框会自动填充背景,只需要给文本框加一个样式即可解决问题 input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px ...

  10. 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js

    做了个限制文本框最大输入长度的jquery插件,效果图(共2个文本框,限制最多10个字符): 功能:当超出设置的最大字符长度后,会截断字符串.更改当前元素的css(会在1秒后还原css).支持长度超出 ...

随机推荐

  1. jdbc(MySQL)

    1.连接数据库 2.使用配置文件 3.启用连接池 4.事务 JDBC WHAT? 用于执行 SQL 语句的 Java API WHY? 不需要了解每一种数据库连接操作方式 HOW? 加载驱动.获取连接 ...

  2. LeetCode 7 Reverse Integer & int

    Reverse Integer 想用余10直接算,没想到 -123%10 是 7, 原因 -123-(-123//10*10) r=a-n*[a/n] 以上,r是余数,a是被除数,n是除数. 唯一不同 ...

  3. 4、申请开发(Development)证书和描述文件

    开发(Development)证书用于测试环境下使用,可以直接安装到手机上(不用提交到Appstore),但一个描述文件最多只能绑定100台设备(因此通过这种证书正式发布应用是行不通的). 申请开发( ...

  4. Mac技巧之苹果电脑Mac OS X系统自带的鼠标所在点颜色RGB值查看工具:数码测色计

    转自http://www.mac52ipod.cn/post/show-mouse-point-rgb-color-by-apple-mac-os-x-tool.php

  5. 1.App爬取相关库的安装(安装Charles及手机端证书安装配置)

    一.官网下载Charles安装包: https://www.charlesproxy.com/download1.下载对应版本 我这里下载的是 win 64 bit (下载完解压,双击打开charle ...

  6. svn tree confflect

    同事提交了一些文件,我尝试更新那个目录, 却总是无法更新到他的提交, 一直都是工作空间的内容.而且资源管理器的目录图标显示, 出现变动(就是右上角有个红色的那种). 难道同事没有提交成功吗? 检查sv ...

  7. Jenkins 之邮件配置

    Jenkins 之邮件配置其实还是有些麻烦的,坑比较多,一不小心就...我是走了很多弯路的. 这里记录下来,希望大家以后不要重蹈覆辙: 我测试过,这里的 Extended E-mail Notific ...

  8. HTTP协议之认证

    认证方式有: basic ntlm digest

  9. API / DOM

    浏览器特性 当控制台报错时,IE9会停止执行JS.当打开控制台时会执行后续JS ------------------------------------------------------------ ...

  10. 20165304《Java程序设计》第七周学习总结

    教材学习内容总结 第11章 JDBC与MySQL数据库 MySQL数据库管理系统 MySQL数据库管理系统,简称MySQL,是世界上最流行的开源数据库管理系统,其社区版(MySQL Community ...