jquery-validation是一款前端验证js插件，可以验证必填字段、邮件、URL、数字范围等，在表单中应用非常广泛。

官方网站 https://jqueryvalidation.org/

下载地址:https://github.com/jquery-validation/jquery-validation/releases/tag/1.19.0

把页面下拉到底,选择第一个下载

引入关键JS

  1. <script src="../lib/jquery.js"></script>
  2. <script src="../dist/jquery.validate.js"></script>

引入中文支持JS

  1. <script src="js/messages_zh.js"></script>

表单代码 关键:required 表示必填字段

  1. <form class="cmxform" id="commentForm" method="get" action="">
  2. 		<fieldset>
  3. 			<legend>请提供您的姓名、电子邮件地址（不会发布）和评论</legend>
  4. 			<p>
  5. 				<label for="cname">姓名</label>
  6. 				<input id="cname" name="name" minlength="2" type="text" required>
  7. 			</p>
  8. 			<p>
  9. 				<label for="cemail">邮件地址</label>
  10. 				<input id="cemail" type="email" name="email" required>
  11. 			</p>
  12. 			<p>
  13. 				<label for="curl">URL</label>
  14. 				<input id="curl" type="url" name="url">
  15. 			</p>
  16. 			<p>
  17. 				<label for="ccomment">你的评论</label>
  18. 				<textarea id="ccomment" name="comment" required></textarea>
  19. 			</p>
  20. 			<p>
  21. 				<input class="submit" type="submit" value="提交">
  22. 			</p>
  23. 		</fieldset>
  24. 	</form>

完整代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="utf-8">
  5. 	<title>jQuery validation plug-in - main demo</title>
  6. 	<link rel="stylesheet" href="css/screen.css">
  7. 	<script src="../lib/jquery.js"></script>
  8. 	<script src="../dist/jquery.validate.js"></script>
  9. 	<script src="js/messages_zh.js"></script>
  10. 	<script>
  11. 	$.validator.setDefaults({
  12. 		submitHandler: function() {
  13. 			alert("submitted!");
  14. 		}
  15. 	});
  16.  
  17. 	$().ready(function() {
  18. 		// validate the comment form when it is submitted
  19. 		$("#commentForm").validate();
  20.  
  21. 		// validate signup form on keyup and submit
  22. 		$("#signupForm").validate({
  23. 			rules: {
  24. 				firstname: "required",
  25. 				lastname: "required",
  26. 				username: {
  27. 					required: true,
  28. 					minlength: 2
  29. 				},
  30. 				password: {
  31. 					required: true,
  32. 					minlength: 5
  33. 				},
  34. 				confirm_password: {
  35. 					required: true,
  36. 					minlength: 5,
  37. 					equalTo: "#password"
  38. 				},
  39. 				email: {
  40. 					required: true,
  41. 					email: true
  42. 				},
  43. 				topic: {
  44. 					required: "#newsletter:checked",
  45. 					minlength: 2
  46. 				},
  47. 				agree: "required"
  48. 			},
  49. 			messages: {
  50. 				firstname: "Please enter your firstname",
  51. 				lastname: "Please enter your lastname",
  52. 				username: {
  53. 					required: "Please enter a username",
  54. 					minlength: "Your username must consist of at least 2 characters"
  55. 				},
  56. 				password: {
  57. 					required: "Please provide a password",
  58. 					minlength: "Your password must be at least 5 characters long"
  59. 				},
  60. 				confirm_password: {
  61. 					required: "Please provide a password",
  62. 					minlength: "Your password must be at least 5 characters long",
  63. 					equalTo: "Please enter the same password as above"
  64. 				},
  65. 				email: "Please enter a valid email address",
  66. 				agree: "Please accept our policy",
  67. 				topic: "Please select at least 2 topics"
  68. 			}
  69. 		});
  70.  
  71. 		// propose username by combining first- and lastname
  72. 		$("#username").focus(function() {
  73. 			var firstname = $("#firstname").val();
  74. 			var lastname = $("#lastname").val();
  75. 			if (firstname && lastname && !this.value) {
  76. 				this.value = firstname + "." + lastname;
  77. 			}
  78. 		});
  79.  
  80. 		//code to hide topic selection, disable for demo
  81. 		var newsletter = $("#newsletter");
  82. 		// newsletter topics are optional, hide at first
  83. 		var inital = newsletter.is(":checked");
  84. 		var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
  85. 		var topicInputs = topics.find("input").attr("disabled", !inital);
  86. 		// show when newsletter is checked
  87. 		newsletter.click(function() {
  88. 			topics[this.checked ? "removeClass" : "addClass"]("gray");
  89. 			topicInputs.attr("disabled", !this.checked);
  90. 		});
  91. 	});
  92. 	</script>
  93. 	<style>
  94. 	#commentForm {
  95. 		width: 500px;
  96. 	}
  97. 	#commentForm label {
  98. 		width: 250px;
  99. 	}
  100. 	#commentForm label.error, #commentForm input.submit {
  101. 		margin-left: 253px;
  102. 	}
  103. 	#signupForm {
  104. 		width: 670px;
  105. 	}
  106. 	#signupForm label.error {
  107. 		margin-left: 10px;
  108. 		width: auto;
  109. 		display: inline;
  110. 	}
  111. 	#newsletter_topics label.error {
  112. 		display: none;
  113. 		margin-left: 103px;
  114. 	}
  115. 	#main{
  116. 	padding: 10px 10px 10px 10px;
  117. 	}
  118. 	</style>
  119. </head>
  120. <body>
  121. <div id="main">
  122. 	<form class="cmxform" id="commentForm" method="get" action="">
  123. 		<fieldset>
  124. 			<legend>请提供您的姓名、电子邮件地址（不会发布）和评论</legend>
  125. 			<p>
  126. 				<label for="cname">姓名</label>
  127. 				<input id="cname" name="name" minlength="2" type="text" required>
  128. 			</p>
  129. 			<p>
  130. 				<label for="cemail">邮件地址</label>
  131. 				<input id="cemail" type="email" name="email" required>
  132. 			</p>
  133. 			<p>
  134. 				<label for="curl">URL</label>
  135. 				<input id="curl" type="url" name="url">
  136. 			</p>
  137. 			<p>
  138. 				<label for="ccomment">你的评论</label>
  139. 				<textarea id="ccomment" name="comment" required></textarea>
  140. 			</p>
  141. 			<p>
  142. 				<input class="submit" type="submit" value="提交">
  143. 			</p>
  144. 		</fieldset>
  145. 	</form>
  146. 	<div>
  147. </body>
  148. </html>

　　

版权声明：本文为max-hou原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/max-hou/p/10986702.html