Jquery Validation
一:import 相关的 css 和 image 以及jQuery
<link rel="stylesheet" type="text/css" href="../js/css/screen.css" />
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js"></script>
二：几种常见的验证方式：
方案一：rules定义该字段适用哪些规则，messages定义该字段验证出错应该有哪些相应的提示信息
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
rules:{
username:"required",//username must be the name attribute
address:{
required:true,
minlength:3
},
age:"digits",
pwd:"required",
repassword:{
equalTo:"#pwd"
}
},
messages:{
username:"username not be null",//the messages be showed when input is null
address:{
required:"用户地址必须输入",
minlength:"地址不能小于3位"
},
age:"age must be the integer",
pwd:"密码必须输入",
repwd:"两次密码不一致"
}
});
});
</script>
方案二：import jquery.metadata.js
<script type="text/javascript" src="js/jquery.metadata.js"></script>
$(function(){
$("#myform").validate({meta:"validate"});
});
<body>
<form id="myform" action="#">
Username:<input type="text" id="username" name="username" class="{validate:{required:true, messages:{required:'Please enter your email address'}}}"/><br/>
Address:<input type="text" id="address" name="address" class="{validate:{required:true,messages:'地址不能为空'}}"/><br>
Age:<input type="text" id="age" name="age"/><br/>
password:<input type="text" id="pwd" name="pwd"/><br/>
confirm password:<input type="text" id="cpwd" name="cpwd"/><br/>
<input type="submit" />
</form>
</body>
方案三：默认的写法：
$(function(){
$("#myform").validate();
})；
<body>
<form id="myform" action="#">
Username:<input type="text" id="username" name="username" class="{required:true, messages:{required:'Please enter your email address'}}"/>
<br/>
Address:<input type="text" id="address" name="address" class="{required:true,messages:'地址不能为空'}"/>
<br/>
Age:<input type="text" id="age" name="age"/>
<br/>
password:<input type="text" id="pwd" name="pwd"/>
<br/>
confirm password:<input type="text" id="cpwd" name="cpwd"/>
<br/>
<input type="submit" />
</form>
</body>
方案四：基于ajax的异步验证：
<form action="register.do" method="post" id="register">
Username:<input type="text" id="studentname" name="studentname"/><br/>
Password:<input type="password" id="password" name="password"/><br/>
ConfirmPwd:<input type="password" id="rePwd" name="rePwd"/><br/>
Email:<input type="text" id="email" name="email"/><br/>
<input type="submit"/>
</form>
$("#register").validate({
rules:{
studentname:"required",
password:"required",
rePwd:{
equalTo:"#password"
},
email:"email"
},
messages:{
studentname:"用户名不能为空",
password:"用户密码不能为空",
rePwd:"确认密码必须和密码一致",
email:"邮件格式不正确"
},
submitHandler:function(){
$.get("v.do?studentname="+$("#studentname").val(),function(data){
if(!data) {
$("#studentname").after("该学生已经存在");
}
});
}
});
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ValidateServlet
*/
public class ValidateAddStudentServlet extends HttpServlet {
private static final List<String> studentList = new ArrayList<String>();
public ValidateAddStudentServlet{
studentList.add("Nicky");
studentList.add("Alice");
studentList.add("Tony");
studentList.add("Geoger");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String studentName = request.getParameter("studentName");
response.setContentType("text/json;charset=utf-8");
if(studentList.contains(studentName)) {
response.getWriter().println("false");
} else {
response.getWriter().println("true");
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet();
}
}
错误在统一的地方显示：
$(document).ready(function(){
$("#myform").validate({
errorLabelContainer:$("#myform div .error");
});
<html>
<form id="myform">
</form>
<div class="error"></div>
<html>
相关推荐
在网页开发中，jQuery Validate 是一个非常常用的验证插件，用于对用户输入的数据进行校验，确保数据的有效性和完整性。这个插件可以帮助开发者创建复杂的表单验证规则，提高用户体验，减少服务器端的压力。结合 ...
《jQuery Validate插件详解与实例应用》 在Web开发中，表单验证是不可或缺的一环，它能够确保用户输入的数据符合预设的规则，提高数据的准确性和安全性。jQuery Validate是一个强大的JavaScript库，专为jQuery设计...
《jQuery Validate插件详解与应用指南》 在Web开发领域，表单验证是不可或缺的一环，它能够确保用户输入的数据符合预设的规则，从而提高数据的准确性和系统的稳定性。jQuery Validate是一个强大的JavaScript库，专...
首先，`jquery.js`是jQuery的核心库，它是jQuery Validate的基础，没有它，我们无法使用jQuery Validate。确保引入了最新的jQuery版本，以便利用其强大的DOM操作和事件处理能力。 其次，`myvalidate.js`可能是你...
jQuery Validate 是一个强大的JavaScript库，专门用于前端表单验证，由jQuery团队开发并维护。它极大地简化了在网页上创建高效、用户友好的验证规则的过程，避免了开发者编写大量重复的验证代码。jQuery Validate ...
在本文中，我们将深入探讨如何利用jQuery Validate来创建自定义验证样式。 首先，我们从标题"jquery validate 验证自定义样式"开始。jQuery Validate插件默认提供了一些基本的样式，但这些样式可能不能满足所有设计...
### 修改jQuery Validate默认错误提示显示位置 在网页开发过程中，表单验证是非常重要的一个环节，它不仅能够提高用户体验，还能确保数据的有效性和安全性。jQuery Validate插件是实现表单验证功能的一个强大工具，...
《jQuery Validate验证手册》是针对JavaScript库jQuery的一个插件，主要功能是提供强大的表单验证功能，帮助开发者创建用户友好的、功能丰富的交互式表单。这个插件基于jQuery库，利用JavaScript的强大功能，简化了...
### jQuery Validate 插件使用详解 #### 一、概述 jQuery Validate 是一款强大的表单验证插件，基于 jQuery 框架开发而成。它能够帮助开发者轻松实现客户端表单验证功能，大大提高了用户体验并减少了服务器端的...
解决jquery validate remote 只验证一次的问题
jQuery Validate 插件是Web开发中广泛使用的工具，主要用于实现前端表单验证，它极大地简化了用户输入数据的检查过程，提供了丰富的验证规则和自定义方法。在这个“jQuery Validate插件验证表单小练”中，我们将深入...
jQuery Validate 是一个非常流行的JavaScript库，用于在网页表单中进行验证。这个库极大地简化了对用户输入数据的检查，确保在提交之前满足特定的业务规则。在本篇博文中，我们将深入探讨如何自定义jQuery Validate...
`jQuery Validate`是一个非常流行的JavaScript库，用于在前端进行表单验证。这个库极大地简化了对用户输入数据的检查，确保它们符合特定的规则和格式。`jQuery Validate`结合自定义CSS样式，可以让表单验证既实用又...
jQuery Validate 是一个强大的客户端验证插件，用于在用户提交表单前进行实时验证。这个框架大大简化了HTML表单的验证过程，提供了丰富的内置验证规则和可扩展的自定义验证功能，使得表单验证更加人性化和高效。 1....
《jQuery Validate修改版：提升表单验证体验》 在网页开发中，用户输入的验证是不可或缺的一环，它能够确保用户提交的数据符合预期，避免无效数据的产生，从而提高用户体验和服务器端处理效率。jQuery Validate插件...
《jQuery Validate与Struts2整合应用详解》 在Web开发中，前端验证用户输入的数据是必不可少的一环，jQuery Validate插件就是一款强大的JavaScript验证工具，它可以帮助我们方便地实现表单验证。与此同时，Struts2...
《关于jQuery Validate Plugin指定需要验证对象的解决方案》 在Web开发中，表单验证是必不可少的一环，确保用户输入的数据符合预设的规则。jQuery Validate Plugin是一款强大的客户端表单验证插件，它使得这一过程...
在本文中，我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单，进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库，它为HTML表单提供了灵活且易于使用的验证规则，确保用户输入...
《jQuery Validate插件详解及其应用》 在Web开发中，表单验证是不可或缺的一部分，它确保用户输入的数据符合预设的规则，提高了用户体验并减少了服务器端的负担。jQuery Validate插件是实现这一功能的强大工具，它...