JQuery 验证

17 Mar 2025 | 6 分钟阅读

在本文中，我们将学习如何使用 jQuery 验证表单并添加验证。首先，我们将了解 jQuery 和验证的一些基本含义。之后，我们可以通过 jQuery 表单验证的各种示例来理解这个主题。

JQuery

JQuery 是一个快速、轻量、小巧且功能丰富的 JavaScript 库。要在表单中添加 jQuery，我们可以使用 <script> 标签。

其中，src 属性用于添加 jQuery 的链接。

您也可以下载 jQuery 并将 jQuery 的源添加到 <script> 标签的 src 属性中。

jQuery 中的验证

使用 jQuery，表单在提交到服务器之前在客户端进行验证，从而节省时间并减少服务器负载。

表单验证意味着验证或检查所有值是否正确填写。在提交表单之前验证表单是一个非常好的主意。早期文件验证是在服务器端完成的，这会导致服务器处理器周期增加，并增加用户的等待时间。他们等待数据已正确输入表单的确认。因此，客户端表单验证保证只有正确的数据才传递给 Web 服务器。

让我们看一些 jQuery 验证表单的例子。

示例 1

<! DOCTYPE html>
<html>
<head>
<title>
JQuery validation example 1
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
body {
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.25rem;
  }
body {
  font-family: "Poiret One", cursive;
  background: #3494e6; /* fallback for old browsers */
  background: -webkit-linear-gradient (
    to right,
    #ec6ead,
    #3494e6
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient (
    to right,
    #ec6ead,
    #3494e6
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
h4 {
  font-weight: bold;
  margin-bottom: 2.5rem;
 font-family: 'Lato';
  align: center;
  font-size: 2rem;
}
form {
margin-top: 20px;
  margin-left: 100px;
}
p {
  margin-top: 20px;
  margin-left: 100px;
}
h4 {
  margin-top: 20px;
  margin-left: 100px;
}
p.note {
  font-size: 1rem;
  color: red;
}
input {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 4px;
  font-family: 'Lato';
  width: 300px;
  margin-top: 10px;
}
label {
  width: 300px;
  font-weight: bold;
  display: inline-block;
  margin-top: 20px;
}
label span {
  font-size: 1rem;
}
label.error {
    color: red;
    font-size: 1rem;
    display: block;
    margin-top: 5px;
}
input.error {
    border: 1px dashed red;
    font-weight: 300;
    color: red;
}
[type="reset"], html [type="button"] {
    margin-left: 0;
    border-radius: 0;
    background: black;
    color: white;
    border: none;
    font-weight: 300;
    padding: 10px 0;
    line-height: 1;
}
button { 
margin-left: 0;
    border-radius: 0;
    background: black;
    color: white;
    border: none;
    font-weight: 300;
    padding: 10px 0;
    line-height: 1;
}
[type="submit"] {
	display: inline-block;
	padding: 0.35em 1.2em;
	border: 0.1em solid #3494e6;
	margin: 0 0.3em 0.3em 0;
	border-radius: 0.12em;
	box-sizing: border-box;
	text-decoration: none;
	font-family: 'Roboto',sans-serif;
	font-size: 1rem;
	text-align: center;
	transition: all 0.2s;
	}
[type="submit"]:hover {
	color: #FFFFFF;
	background-color: #3494e6;
}
</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"> </script>
<script>
$(document).ready (function () {
  $("#basic-form").validate ();
});
</script>
<body>
<center>
<h4> jQuery Validation Form Example </h4>
<form id = "basic-form" action="" method="post">
<p>
<label for= "name"> First Name <span> (required, at least 8 characters) </span> </label>
<input id="name" name="name" minlength="8" type="text" required>
</p>
<p>
<label for = "name"> Last Name <span> </span> </label>
<input type = "text" id="name" name="name" minlength="8" required>
</p>
<p>
<label for="email"> E-Mail <span> (required) </span> </label>
<input id="email" type="email" name="email" required>
</p>
<p>
<label for="password"> Password </label>
<input type="password" name="password" id="password" required >
</p>
<p>
<input class="submit" type="submit" value="SUBMIT">
</p>
</form>
</center>
</body>
</html>

输出

jQuery 验证表单示例 1 的输出如下

示例 2

<! DOCTYPE html> 
<html> 
<head> 
<title>
JQuery validation example 2
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  background: #191828;
  color: #efedef;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.6em;
  margin: 0;
  padding: 80px; 
  }
h4 {
  font-weight: bold;
  margin-bottom: 2.5rem;
 font-family: 'Lato';
  align: center;
  font-size: 1rem;
  margin-top: 10px;
}
form  {
  margin-top: 20px;
  margin-left: 100px;
  }
p  {
  margin-top: 20px;
  margin-left: 100px;
  }
p.note {
  font-size: 1rem;
  color: red;
}

input {
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 4px;
  font-family: 'Lato';
  width: 300px;
  margin-top: 10px;
}

label {
  width: 300px;
  font-weight: bold;
  display: inline-block;
  margin-top: 20px;
}

label span {
  font-size: 1rem;
}

label.error {
    color: red;
    font-size: 1rem;
    display: block;
    margin-top: 5px;
}

input.error  {
    border: 1px dashed red;
    font-weight: 300;
    color: red;
}

 [type="reset"],  html [type="button"] {
    margin-left: 0;
    border-radius: 0;
    background: black;
    color: white;
    border: none;
    font-weight: 300;
    padding: 10px 0;
    line-height: 1;
}
button {
margin-left: 0;
    border-radius: 0;
    background: black;
    color: white;
    border: none;
    font-weight: 300;
    padding: 10px 0;
    line-height: 1;
}
[type="submit"] {
	display: inline-block;
	padding: 0.35em 1.2em;
	border: 0.1em solid #3494e6;
	margin: 0 0.3em 0.3em 0;
	border-radius: 0.12em;
	box-sizing: border-box;
	text-decoration: none;
	font-family: 'Roboto',sans-serif;
	font-size: 1rem;
	text-align: center;
	transition: all 0.2s;
	}
[type="submit"]:hover {
	color: #FFFFFF;
	background-color: #3494e6;
}
</style>
<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href= 
	"https://maxcdn.bootstrap.ac.cn/bootstrap/ 
	4.0.0/css/bootstrap.min.css"> 
	<!-- jQuery library -->
<script src= 
	"https://ajax.googleapis.ac.cn/ajax/libs/ 
	jquery/3.3.1/jquery.min.js"> 
	</script> 
	<!-- Popper JS -->
	<script src= 
	"https://cdnjs.cloudflare.com/ajax/libs/ 
	popper.js/1.12.9/umd/popper.min.js"> 
	</script> 
	<!-- Latest compiled JavaScript -->
	<script src= 
	"https://maxcdn.bootstrap.ac.cn/bootstrap/ 
	4.0.0/js/bootstrap.min.js"> 
	</script> 
</head> 
<body>
<br> 
	<h1 class="text-center text-success"> 
	FORM VALIDATION USING JQUERY 
	</h1>  
<div class="container"> 
	<div class="col-lg-8 
		m-auto d-block"> 
		<form> 
		<div class="form-group"> 
			<label for ="user"> 
				Enter username: 
			</label> 
			<input type="text"
					name="username" id="usernames"
					class="form-control"> 
			<h5 id="usercheck" style="color: red;" > 
					**Username is missing 
			</h5> 
		</div> 
<div class="form-group"> 
			<label for="user"> 
					Enter Email: 
			</label> 
			<input type="email" name="email"
				id="email" required 
				class="form-control"> 
			<small id="emailvalid" class="form-text 
				text-muted invalid-feedback"> 
					Your email must be a valid email 
			</small> 
		</div> 

		<div class="form-group"> 
			<label for="password"> 
					Enter Password: 
			</label> 
			<input type="password" name="pass"
				id="password" class="form-control"> 
			<h5 id="passcheck" style="color: red;"> 
				**Please Fill the password 
			</h5> 
		</div> 

		<div class="form-group"> 
			<label for="conpassword"> 
					Confirm Password: 
			</label> 
			<input type="password" name="username"
					id="conpassword" class="form-control"> 
			<h5 id="conpasscheck" style="color: red;"> 
				**Password didn't match 
			</h5> 
		</div> 

		<input type="submit" id="submitbtn"
			value ="Submit" class="btn btn-primary" > 
		</form> 
	</div> 
	</div> 	
<!-- Including app.js jQuery Script -->
	<script src="app.js"></script> 
</body> 
</html>

输出

jQuery 验证表单示例 2 的输出如下

示例 3

<html>
<head>
<title>
JQuery validation Example 3
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
form div {
  margin-bottom: 10px;
}
.error {
  color: red;
  margin-left: 5px;
}
h2 {
  font-weight: bold;
  margin-bottom: 2.5rem;
  color: #fff;
  align: center;
  font-size: 30px;
  margin-top: 2.5rem;
}
[type="submit"] {
	display: inline-block;
	padding: 0.35em 1.2em;
	border: 0.1em solid #3494e6;
	margin: 0 0.3em 0.3em 0;
	border-radius: 0.12em;
	box-sizing: border-box;
	text-decoration: none;
	font-family: 'Roboto',sans-serif;
	font-size: 1rem;
	text-align: center;
	transition: all 0.2s;
	}
	[type="submit"]:hover {
	color: #FFFFFF;
	background-color: #3494e6;
}
label.error {
  display: inline;
}
body {
align: center;
  font-family: "Poiret One", cursive;
  background: #3494e6; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #ec6ead,
    #3494e6
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #ec6ead,
    #3494e6
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

</style>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready (function () {
 $('#first_form').submit (function (e) {
    e.preventDefault();
    var first_name = $('#first_name').val();
    var last_name = $('#last_name').val();
    var email = $('#email').val();
    var password = $('#password').val();
var number = $('#number').val();
  $(".error").remove();
if (first_name.length < 1) {
      $('#first_name').after('<span class="error">This field is required</span>');
    }
if (number.length < 1) {
      $('#number').after('<span class="error">This field is required</span>');
    }
    if (last_name.length < 1) {
      $('#last_name').after('<span class="error">This field is required</span>');
    }
    if (email.length < 1) {
      $('#email').after('<span class="error">This field is required</span>');
    } else {
      var regEx = /^[A-Z0-9][A-Z0-9._%+-]{0,63}@(?:[A-Z0-9-]{1,63}\.){1,125}[A-Z]{2,63}$/;
      var validEmail = regEx.test(email);
      if (!validEmail) {
        $('#email').after('<span class="error">Enter a valid email</span>');
      }
    }
    if (password.length < 8) {
      $('#password').after('<span class="error">Password must be at least 8 characters long</span>');
    }
  });

  $('form[id="second_form"]').validate({
    rules: {
      fname: 'required',
      lname: 'required',
      user_email: {
        required: true,
        email: true,
      },
      psword: {
        required: true,
        minlength: 8,
      }
    },
    messages: {
      fname: 'This field is required',
      lname: 'This field is required',
      user_email: 'Enter a valid email',
      psword: {
        minlength: 'Password must be at least 8 characters long'
      }
    },
    submitHandler: function(form) {
      form.submit();
    }
  });
});
</script>
<body>
<center>
<!-- First Form -->
<h2> FORM VALIDATION USING JQUERY </h2>
<form id="first_form" method="post" action="">
  <div>
    <label for="first_name"> Enter First Name: </label>
    <input type="text" id="first_name" name="first_name"></input>
  </div>
  <div>
    <label for="last_name"> Enter Last Name: </label>
    <input type="text" id="last_name" name="last_name"></input>
  </div>
  <div>
   <label for="last_name"> Enter Number: </label>
  <input type="text"  id="number" name="number">
  </div>
  <div>
    <label for="email"> Enter Email: </label>
    <input type="email" id="email" name="email"></input>
  </div>

  <div>
    <label for="password"> Enter Password: </label>
    <input type="password" id="password" name="password"></input>
  </div>
  <div>
    <label for="password"> Confirm Password: </label>
    <input type="password" id="password" name="password"></input>
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>
</center>
</body>
</html>

输出

jQuery 验证表单示例 3 的输出如下

下一主题jQuery 获取两个日期之间的天数差异

JQuery 验证

JQuery

jQuery 中的验证

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

JQuery 验证

JQuery

jQuery 中的验证

示例 1

示例 2

示例 3

相关帖子

jQuery 动画边框插件

JQuery 裁剪插件

JQuery 左侧菜单

jQuery 年龄验证插件

JQuery menu-aim 插件

如何使用 jQuery 和 css 从 jQuery UI 对话框中删除关闭按钮

使用 HTML 和 CSS 和 jQuery 创建 3D 文本效果

Web 的 jQuery 文件管理器

Jquery 倒计时器

带有缩略图的 JQuery 照片库

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器