form表单验证，input前端验证

最新推荐文章于 2024-07-27 16:49:41 发布

栗子的猫

最新推荐文章于 2024-07-27 16:49:41 发布

阅读量5.8k

点赞数 2

分类专栏： js 文章标签： input 表单验证前段验证 form表单验证

本文链接：https://blog.csdn.net/lizidemao/article/details/83752110

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>input表单验证</title>
		<link rel="stylesheet" href="css/base.css">
		<style>
			* {
				margin: 0;
				padding: 0
			}
			
			form {
				margin: 50px
			}
			
			p {
				height: 60px;
				line-height: 60px
			}
			
			input[type="text"],
			input[type="password"] {
				height: 30px;
				width: 200px;
				margin-right: 10px
			}
		</style>
		<script src="js/jquery-1.11.3.min.js"></script>
		<script src="js/jquery.validationEngine.min.js"></script>
		<script src="js/jquery.validationEngine-zh-CN.js"></script>
		<script src="js/jquery.validationEngine-zh-CN-ciaoca.js"></script>

		<script>
			jQuery(document).ready(function() {
				jQuery('#formA').validationEngine();
			});
		</script>

	</head>

	<body>
		<form id="formA" method="post" action="">
			<p><input type="text" class="validate[required]">必填</p>
			<p><input type="text" class="validate[required,custom[url]]"> 验证URL格式</p>
			<p>
				<input value="1234" class="validate[required]" type="text" name="password" id="pwd1">
				<input value="3456" class="validate[required,equals[pwd1]] text-input" type="text" name="password2" id="pwd2">比较两次输入密码是否相同
			</p>

			<p><input type="text" class="validate[minSize[2],maxSize[6]]">最少2位，最多6位</p>
			<p><input type="text" class="validate[required,custom[email]] text-input">Email地址</p>
			<p><input type="text" class="validate[custom[chinese]]">只能输入中文</p>
		</form>
	</body>

</html>

代码内引入js资源保存到个人资源。

地址：https://download.csdn.net/download/lizidemao/10765855