1. 程式人生 > >表單校驗外掛validate

表單校驗外掛validate

相信大家都在學習java的過程的學習了很多的表單校驗,可以用html,js,jquery等等,都能實現表單驗證的功能,但是使用起來不夠靈活,操作起來也很麻煩,今天我給大家介紹一種前端的表單校驗的一個外掛validate。

然就就可以開始寫程式碼了

<!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>