表单校验插件validate

相信大家都在学习java的过程的学习了很多的表单校验,可以用html,js,jquery等等,都能实现表单验证的功能,但是使用起来不够灵活,操作起来也很麻烦,今天我给大家介绍一种前端的表单校验的一个插件validate。

首先我们需要到网上下载validate插件,这里使用菜鸟教程的提供的下载连接http://static.runoob.com/download/jquery-validation-1.14.0.zip

然就就可以开始写代码了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<!-- 引入表单校验插件 -->
	<script type="text/javascript" src="js/jquery.validate.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$("#myform").validate({
				rules:{
					"nikename":{
						"required":true
					},
					"username":{
						"required":true,
					},
					"password":{
						"required":true,
						"rangelength":[6,12]
					},
					"repassword":{
						"required":true,
						"rangelength":[6,12],
						"equalTo":"#password"
					}
				},
				messages:{
					"nikename":{
						"required":"昵称不能为空"
					},
					"username":{
						"required":"用户名不能为空",
					},
					"password":{
						"required":"密码不能为空",
						"rangelength":"密码长度6-12位"
					},
					"repassword":{
						"required":"密码不能为空",
						"rangelength":"密码长度6-12位",
						"equalTo":"两次输入密码不一致"
					}
				}
			});
		});
		
	</script>
	<body>
		<form action="#" method="post" id="myform">
			nikename:<input type="text" name="nikename" id="nikename" /></br>
			username:<input type="text" name="username" id="username" /></br>
			password:<input type="text" name="password" id="password" /></br>
			repassword<input type="text" name="repassword" id="repassword" /></br>
			<input type="submit" value="注册" />
		</form>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/progammer10086/article/details/84186842
今日推荐