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

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. Java第一次上机实验源代码

    小学生计算题: package 第一次上机实验_; import java.util.*; public class 小学计算题 { public static void main(String[] ...

  2. sql语句基础(一)

    数据库基本操作  创建数据库  CREATE DATABASE database-nam 2.  删除数据库 drop database dbname 3. 备份sql server --- 创建 备 ...

  3. uiautomator 代码记录 : BT发送测试

    package rom; import java.lang.*; import java.util.Random; import java.io.File; import com.android.ui ...

  4. spring boot js 文件引用 单引问题。

    首页 index.html 访问首页空白 . F12 控制台看页面元素布局.发现有两个body 标签 ,而且 </head> 标红. 各种检查....好像是没有问题. 但就是访问空白.去掉 ...

  5. uva-519-拼图

    给你N*M个碎片,问能否用他们拼成一个矩形,矩形的边缘要全是F,除外界边缘的边要么是I,要么O,不能是F1.碎片会重复出现,所以同样的碎片在同一个位置,如果已经不能放,直接跳过就行2.矩形的边缘要全是 ...

  6. 50.纯 CSS 创作一个永动的牛顿摆

    原文地址:https://segmentfault.com/a/1190000015270808#articleHeader0 感想: 动画效果 + ::before + 2D转换 HTML code ...

  7. Maven运行的方式

    1.运行父工程(父工程将各个子模块聚合到一起) 2.直接运行子模块(Web工程)

  8. centos限制用户使用部分命令

    参考网:https://access.redhat.com/solutions/65822# 环境 Red Hat Enterprise Linux 5 Red Hat Enterprise Linu ...

  9. Centos 7 下创建LVM流程

    https://www.cnblogs.com/ssslinppp/p/5853312.html

  10. 机器学习实战之朴素贝叶斯进行文档分类(Python 代码版)

    贝叶斯是搞概率论的.学术圈上有个贝叶斯学派.看起来吊吊的.关于贝叶斯是个啥网上有很多资料.想必读者基本都明了.我这里只简单概括下:贝叶斯分类其实就是基于先验概率的基础上的一种分类法,核心公式就是条件概 ...