Web前端（四）jQuery (10) jQ_validate插件重写表单校验

最新推荐文章于 2023-02-20 11:24:47 发布

馬冬梅啊

最新推荐文章于 2023-02-20 11:24:47 发布

阅读量335

点赞数

分类专栏： Web前端 Web前端文章标签： javaweb JavaScript jQuery 前端

本文链接：https://blog.csdn.net/weixin_39782583/article/details/84257108

版权

本文介绍了在2018年11月19日使用jQuery的jQ_validate插件重新编写表单验证的过程。通过菜鸟教程获取插件并学习相关教程，详细解析了如何利用该插件进行高效且用户友好的表单验证。

摘要由CSDN通过智能技术生成

Date：2018/11/19

表单校验用jQ_validate插件重写：
插件下载位置：菜鸟教程提供
菜鸟教程讲的很好了：菜鸟validate讲解

源代码：



<!-- 
1、引入validate.js 和 中文化的messages_zh.js;
2、获取表单$("#registForm").validate({
   });
3、这个里面的user、password等只是name = user，可以随意更改，只要validate里面是一样的就行；
 -->


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站注册页面</title>
		<style>
			#contanier{
   
				border: 0px solid white;
				width: 1300px;
				margin: auto;
			}
			
			#top{
   
				border: 0px solid white;
				width: 100%;
				height: 50px;
			}
			#menu{
   
				border: 0px solid white;
				height: 40px;
				background-color: black;
				padding-top: 10px;
				margin-bottom: 15px;
				margin-top: 10px;
			}
			.top{
   
				border: 0px solid white;
				width: 405px;
				height: 100%;
				float: left;
				padding-left: 25px;
			}
			#top1{
   
				padding-top: 15px;
			}
			#bottom{
   
				margin-top: 13px;
				text-align: center;
			}
			
			#form{
   
				height: 500px;
				padding-top: 70px;
				background-image: url(../img/regist_bg.jpg);
				margin-bottom: 10px;
			}
			a{
   
				text-decoration: none;
			}
			
			label.error{
   
				background:url(../img/unchecked.gif) no-repeat 10px 3px;
				padding-left: 30px;
				font-family:georgia;
				font-size: 15px;
				font-style: normal;
				color: red;
			}
			
			label.success{
   
				background:url(../img/checked.gif) no-repeat 10px 3px;
				padding-left: 30px;
			}
			
			#father{
   
				border: 0px solid white;
				padding-left: 307px;
			}
			
			#form2{
   
				border: 5px solid gray;
				width: 660px;
				height: 450px;
			}
			
		</style>
		<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="../js/messages_zh.js"></script>

		<script>
			$().ready(function(){
   
				$("#registForm").valid