欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > javascript >内容正文

javascript

html表单判断字符数,JS判断字符串长度,结合element el-input el-form 表单验证(英文占1个字符,中文汉字占2个字符)...

发布时间:2024/1/1 javascript 32 豆豆
生活随笔 收集整理的这篇文章主要介绍了 html表单判断字符数,JS判断字符串长度,结合element el-input el-form 表单验证(英文占1个字符,中文汉字占2个字符)... 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

首先看看判断字符串长度的几种方法(英文占1个字符,中文汉字占2个字符)

方法一:

function strlen(str) {

var len = 0;

for (var i = 0; i < str.length; i++) {

var c = str.charCodeAt(i);

//单字节加1

if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {

len++;

} else {

len += 2;

}

}

return len;

}

// strlen('adcd') //4

// strlen('adcd哈') //6

方法二:

function GetLength(str) {

var realLength = 0,

len = str.length,

charCode = -1;

for (var i = 0; i < len; i++) {

charCode = str.charCodeAt(i);

if (charCode >= 0 && charCode <= 128) realLength += 1;

else realLength += 2;

}

return realLength;

}

// GetLength('1234a') //5

// GetLength('我是谁') //6

方法三:

function GetLength(str) {

var l = str.length;

var blen = 0;

for (i = 0; i < l; i++) {

if ((str.charCodeAt(i) & 0xff00) != 0) {

blen++;

}

blen++;

}

return blen;

}

// GetLength('1234a') //5

// GetLength('我是谁') //6

上面三种方法都能返回字符串的长度,结合element的自带表单验证功能,就能做出好看又好用的验证啦。下面是使用element自定义验证实现提示输入要求的案列:

在线生成

export default {

data() {

//这里就是整个checkName啦,就是方法一的使用

var checkName = (rule, value, callback) => {

var len = 0;

for (var i=0; i

var c = value.charCodeAt(i);

//单字节加1

if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {

len++;

} else {

len+=2;

}

};

if ((len < 4 && len> 0) || len > 30) {

//重点重点,下面就是填写提示的文字

callback(new Error('名称长度为4-30个字符,一个中文字等于2个字符。'));

} else {

callback();

}

};

return {

form: {

projectname: '',

},

rules: {

projectname: [

//validator是自定义校验固定写法,我们只需填他的值(checkName)就好了, callback 必须被调用。

{validator: checkName,trigger: 'blur' }

]

},

};

},

methods: {

//为了容易理解我就没写多余的方法,通过trigger: 'blur'使得输入框失去焦点就触发事件,也就看得到效果了

}

}

说了这么多,来看看效果吧:

******这是3个字符的,不合条件******

******这是4个字符的,符合条件******

******这是3个字符的,不符合条件******

JS判断字符串长度的5个方法

这篇文章主要介绍了JS判断字符串长度的5个方法,并且区分中文和英文,需要的朋友可以参考下 目的:计算字符串长度(英文占1个字符,中文汉字占2个字符)   方法一:    代码如下: String.pr ...

JS判断字符串长度(中文长度为2,英文长度为1)

目的:计算字符串长度(英文占1个字符,中文汉字占2个字符) 方法一: String.prototype.gblen = function() { var len = 0; for (var i=0; ...

JS判断字符串长度的5个方法(区分中文和英文)

目的:计算字符串长度(英文占1个字符,中文汉字占2个字符) 方法一: 代码如下: String.prototype.gblen = function() {    var len = 0;    fo ...

JS判断字符串长度(英文占1个字符,中文汉字占2个字符)

//计算字符串长度(英文占1个字符,中文汉字占2个字符) 方法一: String.prototype.gblen = function() { var len = 0; for (var i=0; i ...

JS组件系列——Form表单验证神器: BootstrapValidator

前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

js——form表单验证

用js实现一个简易的表单验证 效果: 代码:

js校验form表单

html5 填表 表单 input output 与表单验证

1.     Js计算结果

总结

以上是生活随笔为你收集整理的html表单判断字符数,JS判断字符串长度,结合element el-input el-form 表单验证(英文占1个字符,中文汉字占2个字符)...的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。