Html input 限制输入中英文字符，及字符数量统计

最新推荐文章于 2022-12-31 19:48:36 发布

jackpk

最新推荐文章于 2022-12-31 19:48:36 发布

阅读量2.3w

点赞数

分类专栏： js、html

本文链接：https://blog.csdn.net/jackpk/article/details/11047589

版权

js、html 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

Html input 限制输入中英文字符，及字符数量统计 HTML DEMO

<html>
<head>
<script language="javascript"> 
/*
	[^\x00-\xff]即ASCII 编码不在0-255的字符
	检查是否是汉字或者全角

	alert('abc:' + /[^\x00-\xff]/g.test('abc'));
	alert('表达' + /[^\x00-\xff]/g.test('表达'));

	alert('ａｂｃ:' + /[^\x00-\xff]/g.test('ａｂｃ'));
*/

function checkUser() 
{
	var usernameVal = document.getElementById("username").value;

	usertipsSpan = document.getElementById("usertips");
	
	if (!usernameVal.match( /^[\u4e00-\u9fa5|a-zA-Z]*$/)) {
		usertipsSpan.innerHTML="必须由汉字、英文字母线组成";
		return false;
	} else {
		usertipsSpan.innerHTML='';
	}
	
	if(usernameVal.length > 10){ //一个汉字算一个字符
		usertipsSpan.innerHTML="大于10个字符！";
	}
}

/**
* 中英文统计(一个中文算两个字符)
*/
function chEnWordCount(str){
	alert(str.length);
	var count = str.replace(/[^\x00-\xff]/g,"**").length;
	alert(count);
	return count;
}
</script> 
</head>
<body>
	username:<input type="text" value="" name="username" id="username" maxlength="10" οnblur="checkUser()" />
	<span id="usertips"></span>
</body>
</html>

网络参考文章

一些字符操作的函数

http://www.rosoo.net/a/200611/6423.html

<script language="javascript">

function calculate() {
	String.prototype.lenB = function(){return this.replace(/[^\x00-\xff]/g,"**").length;}
	//var str = "这是一个可以将汉字计算成两个字节的函数";
	var str =document.all.uInput.value
	alert("老的算法 = " + str.length);
	alert("新的算法 = " + str.lenB());
}
</script>

请输入<input name="uInput" type="text">
<input type="button" value="计算" οnclick="calculate()"/>  
结果为<input name="result" type="text">

javascript/JS限制用户名只能输入汉字字母和数字下划线

http://blog.163.com/peihu@126/blog/static/66003219201332554849288/

验证用户名的一个例子：

html:

js:

function checkUser()

{

var username = $("#username").val();

if (!username.match( /^[\u4E00-\u9FA5a-zA-Z0-9_]{3,20}$/)) {
var msg = "汉字英文字母数字下划线组成，3-20位";
$("#usertips").html(msg);
} else {
$("#usertips").html('');
}
}

1、只允许输入数字
    <input name="username" type="text" οnkeyup="value=this.value.replace(/\D+/g,’’)">

    2、只允许输入英文字母、数字和下划线(以下二种方法实现)
    <input name="username" type="text" style="ime-mode:disabled">
    <input name="username" type="text" οnkeyup="value=value.replace(/[^\w\.\/]/ig,’’)">

    3、只允许输入英文字母、数字和=@#
    <input name="username" type="text" οnkeyup="value=value.replace(/[^\w=@#]|_/ig,’’)">

    4、只允许输入汉字
    <input name="username" type="text" οnkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,’’)">
1、只允许输入数字
    <input name="username" type="text" οnkeyup="value=this.value.replace(/\D+/g,’’)">

    2、只允许输入英文字母、数字和下划线(以下二种方法实现)
    <input name="username" type="text" style="ime-mode:disabled">
    <input name="username" type="text" οnkeyup="value=value.replace(/[^\w\.\/]/ig,’’)">

    3、只允许输入英文字母、数字和=@#
    <input name="username" type="text" οnkeyup="value=value.replace(/[^\w=@#]|_/ig,’’)">

    4、只允许输入汉字
    <input name="username" type="text" οnkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,’’)">

只能输入数字："^[0-9]*$"。
只能输入n位的数字："^\d{n}$"。
只能输入至少n位的数字："^\d{n,}$"。
只能输入m~n位的数字：。"^\d{m,n}$"
只能输入零和非零开头的数字："^(0|[1-9][0-9]*)$"。
只能输入有两位小数的正实数："^[0-9]+(.[0-9]{2})?$"。
只能输入有1~3位小数的正实数："^[0-9]+(.[0-9]{1,3})?$"。
只能输入非零的正整数："^\+?[1-9][0-9]*$"。
只能输入非零的负整数："^\-[1-9][]0-9"*$。
只能输入长度为3的字符："^.{3}$"。
只能输入由26个英文字母组成的字符串："^[A-Za-z]+$"。
只能输入由26个大写英文字母组成的字符串："^[A-Z]+$"。
只能输入由26个小写英文字母组成的字符串："^[a-z]+$"。
只能输入由数字和26个英文字母组成的字符串："^[A-Za-z0-9]+$"。
只能输入由数字、26个英文字母或者下划线组成的字符串："^\w+$"。
验证用户密码："^[a-zA-Z]\w{5,17}$"正确格式为：以字母开头，长度在6~18之间，只能包含字符、数字和下划线。
验证是否含有^%&',;=?$\"等字符："[^%&',;=?$\x22]+"。

只能输入汉字："^[\u4e00-\u9fa5]{0,}$"