使用Jquery完成表单校验

Leefs 2019-11-13 PM 3794℃ 1条

# 使用Jquery完成表单校验

### 前言

今天再给大家带来一个Jquery的小Demo,通过Jquery完成表单校验，容易理解和上手，希望在学习上给大家带来一点帮助。

![JqueryDemo001.png][1]

在表单中输入信息，完成相应的校验功能。

### 代码

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站注册页面</title>
		<style>
			#contanier{
				border: 0px solid white;
				width: 1300px;
				margin: auto;
			}
			#form{
				height: 500px;
				padding-top: 70px;
				background-image: url(../img/001img.png);
				margin-bottom: 10px;
			}
			a{
				text-decoration: none;
			}
			
			label.error{
                background:url(../img/002img.gif) no-repeat 10px 3px;
				padding-left: 30px;
				font-family:georgia;
				font-size: 15px;
				font-style: normal;
				color: red;
			}
			
			label.success{
                background:url(../img/002img.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="http://code.jquery.com/jquery-1.8.3.js" ></script>
        
        
		<script type="text/javascript" src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js" ></script>
		
		<script type="text/javascript" src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js" ></script>
		<script>
			$(function(){
				$("#registForm").validate({
					rules:{
						user:{
							required:true,
							minlength:3
						},
						password:{
							required:true,
							digits:true,
							minlength:6
						},
						repassword:{
							required:true,
							equalTo:"[name='password']"
						},
						email:{
							required:true,
							email:true
						},
						username:{
							required:true,
							maxlength:5
						},
						sex:{
							required:true
						},
                        birthday:{
                            required:true,
                            dateISO:true
                        }
					},
					messages:{
						user:{
							required:"用户名不能为空!",
							minlength:"用户名不得少于3位!"
						},
						password:{
							required:"密码不能为空!",
							digits:"密码必须是整数!",
							minlength:"密码不得少于6位!"
						},
						repassword:{
							required:"确认密码不能为空!",
							equalTo:"两次输入密码不一致!"
						},
						email:{
							required:"邮箱不能为空!",
							email:"邮箱格式不正确!"
						},
						username:{
							required:"姓名不能为空!",
							maxlength:"姓名不得多于5位!"
						},
						sex:{
							required:"性别必须勾选!"
						},
                        birthday:{
                            required:"日期必填",
                            dateISO:"请输入正确的日期格式"
                        }
					},
					errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
					success: function(label) { //验证成功后的执行的回调函数
						//label指向上面那个错误提示信息标签label
						label.text(" ") //清空错误提示消息
							.addClass("success"); //加上自定义的success类
					}
				});
			});
		</script>
	</head>
	<body>
		<div id="contanier">
			<div id="form">
				<form action="#" method="get" id="registForm">
					<div id="father">
						<div id="form2">
							<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
								<tr>
									<td colspan="2" >
										          
										<font size="5">会员注册</font>   USER REGISTER 
									</td>
								</tr>
								<tr>
									<td width="180px">
										      
										      
										   
										<label for="user" >用户名</label>
									</td>
									<td>
                                        
										<em style="color: red;">*</em>   <input type="text" name="user" size="35px" id="user"/>
									</td>
								</tr>
								<tr>
									<td>
										      
										      
										   
										密码
									</td>
									<td>
										<em style="color: red;">*</em>   <input type="password"  name="password" size="35px" id="password" />
									</td>
								</tr>
								<tr>
									<td>
										      
										      
										   
										确认密码
									</td>
									<td>
										<em style="color: red;">*</em>   <input type="password" name="repassword" size="35px"/>
									</td>
								</tr>
								<tr>
									<td>
										      
										      
										   
										Email
									</td>
									<td>
										<em style="color: red;">*</em>   <input type="text" name="email" size="35px" id="email"/>
									</td>
								</tr>
								<tr>
									<td>
										      
										      
										   
										姓名
									</td>
									<td>
										<em style="color: red;">*</em>   <input type="text" name="username" size="35px"/>
									</td>
								</tr>
								<tr>
									<td>
										      
										      
										   
										性别
									</td>
									<td>
										<span style="margin-right: 155px;">
											<em style="color: red;">*</em>   <input type="radio" name="sex" value="男"/>男
											<input type="radio" name="sex" value="女"/>女<em></em>
											<label for="sex" class="error" style="display: none;"></label>
										</span>
										
									</td>
								</tr>
								<tr>
									<td>
										      
										      
										   
										出生日期
									</td>
									<td>
										<em style="color: red;">*</em>   <input type="text" name="birthday"  size="35px"/>
									</td>
								</tr>
								<tr>
									<td>
										      
										      
										   
										验证码
									</td>
									<td>
										<em style="color: red;">*</em>   <input type="text" name="yanzhengma" />
										<img src="../img/yanzhengma.jpg" style="height: 18px;width: 85px;"/>
									</td>
								</tr>
								<tr>
									<td colspan="2">
										      
										      
										      
										      
										      
										      
										<input type="submit" value="注      册" height="50px"/>
									</td>
								</tr>
							</table>
						</div>
					</div>
				</form>
			</div>
		</div>
	</body>
</html>
```

代码来源与网络：[源码链接地址](https://blog.csdn.net/a502367897/article/details/80956289)

> 代码分析

1. 引入validate插件JS文件：`<script type="text/javascript" src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js" ></script>`

用来做数据验证有效性的插件。

2.`$("#registForm").validate({})`方法说明

> 这是用来验证选择的表单，方法的参数是可选项，可以输入0个或者多个键值对(key/value),这个方法是为了处理例如：submit , focus , keyup , blur, click 触发验证的，对象是整个表单的元素，或者是单个元素
>
> 使用 rules 和 messages 定义验证的元素
>
> 使用errorClass, errorElement, wrapper, errorLabelContainer, errorContainer, showErrors, success, errorPlacement, highlight, unhighlight, ignoreTitle去控制非法元素的错误信息显示。
>
> 其中rules里也可以输入0个或者多个键值对，他的key对应的是元素的name属性值，例如username，confirmpassword等等。而他的value里则是一些验证规则。
>
>  messages同rules一样可以输入0个或者多个键值对，他的key也是对应的元素的name属性值，而他的value里则是验证错误的提示信息。简而言之，rules{}中定义验证规则的方法。
>
> messages{}中定义错误输出。

**默认校验规则**

(1)required:true 必输字段

(2)remote:"check.php" 使用ajax方法调用check.php验证输入值

(3)email:true 必须输入正确格式的电子邮件

(4)url:true 必须输入正确格式的网址

(5)date:true 必须输入正确格式的日期

(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性

(7)number:true 必须输入合法的数字(负数，小数)

(8)digits:true 必须输入整数

(9)creditcard: 必须输入合法的信用卡号

(10)equalTo:"#field" 输入值必须和#field相同

(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）

(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)

(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)

(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)

(15)range:[5,10] 输入值必须介于 5 和 10 之间

(16)max:5 输入值不能大于5

(17)min:10 输入值不能小于10

[1]: https://lilinchao.com/usr/uploads/2019/11/149306986.png

标签: 前端, Jquery

非特殊说明，本博所有文章均为博主原创。

如若转载，请注明出处：https://lilinchao.com/archives/166.html

上一篇 JVM学习(三)--常量的本质含义

下一篇 JVM学习(四)--编译期常量与运行期常量的区别以及数组创建本质分析

使用Jquery完成表单校验

评论已关闭

栏目分类

标签云

友情链接申请

使用Jquery完成表单校验

评论已关闭

 栏目分类

标签云

友情链接申请

栏目分类

标签云

友情链接申请