Blogger Information
Blog 60
fans 0
comment 1
visits 37588
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
bootstrap 表单验证
威灵仙的博客
Original
861 people have browsed it

bootstrap 表单验证响应式输入框表单验证代码

实例

<!DOCTYPE html>
<html>

	<head>
	<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	</head>
	<style>
		.col-md-6{padding-left: 0;}
		.col-md-12 .col-md-6 input{width: 100%;}
		
	</style>

	<body>
		<div class="container">
			<div class="row">
				<form class="col-md-8 col-lg-offset-2">
					<h5>输入框类型</h5>
					<label class="control-label">1.文本框只能输入数字代码(小数点也不能输入)</label>
					<input class="form-control" onKeyUp="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
					<br>
					<label class="control-label">2.只能输入数字,能输小数点.</label>
					<div class="col-md-12 form-inline" style="padding: 0;">
						<div class="col-md-6">
							<input class="form-control" onKeyUp="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
						</div>
						<div class="col-md-6">
							<input class="form-control" name="txt1" onChange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">
						</div>
					</div>
					<br>
					<label class="control-label">3.数字和小数点方法二</label>
					<input class="form-control" type="text" t_value="" o_value="" onKeyPress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onKeyUp="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onBlur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}"> <br>
					<label class="control-label">4.只能输入字母和汉字</label>
					<input class="form-control" onKeyUp="value=value.replace(/[\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength="10" name="Numbers"> <br>
					<label class="control-label">5.只能输入英文字母和数字,不能输入中文</label>
					<input class="form-control" onKeyUp="value=value.replace(/[^\w\.\/]/ig,'')"> <br>
					<label class="control-label">6.只能输入数字和英文</label
					><font color="Red">chun</font>
					<input class="form-control" onKeyUp="value=value.replace(/[^\d|chun]/g,'')"> <br>
					<label class="control-label">7.小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:</label>
					<input class="form-control" onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false"> <br>
					<label class="control-label">8.小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:</label>
					<input class="form-control" onKeyUp="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"><br />
					<label class="control-label">9.只能是数字和小数点和加减乘際 </label>
					<input class="form-control" type="text"onkeypress="return event.keyCode>=4&&event.keyCode <=57 " />
				</form>
			</div>
		</div>
<div style="text-align:center;">

</div>
	</body>

</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post