html输入验证

最新推荐文章于 2025-05-16 11:36:54 发布

原创最新推荐文章于 2025-05-16 11:36:54 发布 · 466 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

本文介绍如何使用JavaScript实现网页表单中各种输入类型的限制与验证，包括仅允许输入数字、英文字符、数字与英文混合等场景，并提供具体代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

只能输入和黏贴数字：onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"

转义：onkeyup="this.value=this.value.replace(/\\D/g,\'\')" onafterpaste="this.value=this.value.replace(/\\D/g,\'\')"

只能输入英文：onKeyUp="value=value.replace(/[^a-zA-Z]/g,'')"

转义：onKeyUp="value=value.replace(/[^a-zA-Z]/g,\'\')"

年龄：onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"

var inputadduserdetailAge = document.getElementById("adduserdetailAge");
	inputadduserdetailAge.onblur = function(){
		var adduserdetailAge = this.value;
		if(adduserdetailAge>120 || adduserdetailAge<0){
			alert('请输入正确的年龄');
		}
	}

只能输入数字和英文：onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

转义：onkeyup="value=value.replace(/[\\W]/g,\'\') " onbeforepaste="clipboardData.setData(\'text\',clipboardData.getData(\'text\').replace(/[^\\d]/g,\'\'))"

只能输入数字，且最多两位小数：onkeyup= "this.value=this.value.replace(/[^\d.]/g,'');if( ! /^-?\d+\.?\d{0,2}$/.test(this.value)){ var s = this.value;this.value=s.substring(0,s.length-1);}"

转义：onkeyup="this.value=this.value.replace(/[^\\d.]/g,\'\');if( ! /^-?\\d+\\.?\\d{0,2}$/.test(this.value)){ var s = this.value;this.value=s.substring(0,s.length-1);}"

银行卡：onkeyup="this.value=this.value.replace(/\D/g,'').replace(/....(?!$)/g,'$& ')"

转义：onkeyup="this.value=this.value.replace(/\\D/g,\'\').replace(/....(?!$)/g,\'$& \')"