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 表单验证
jquery validate例子 能用
jquery validate 使用详解
jquery validate 验证手册
JQuery validate中文详细文档
jQuery validate 验证 个性化验证
本压缩包包含: jquery validate依赖包及其帮助文档....
jQuery Validate插件验证表单小练。
解决jquery validate remote 只验证一次的问题
Jquery Validate修改版 提示信息以悬浮窗口显示
jquery validate表单验证插件制作注册表单提交验证 jquery validate表单验证插件制作注册表单提交验证
jQueryValidate
jquery validate 最稳定版本,最简单的使用方法:http://blog.csdn.net/s592652578/article/details/50845159
Jquery validate和form两个插件,完美进行表单验证和Ajax无刷新方式提交form表单,很有用的哦。
jquery validate 教程 验证框架 帮助文档 中文文档 基于jQuery的客户段验证插件
包含Jquery1.6,JqueryUI界面插件,JqueryForm表单异步提交插件,Jqueryvsdoc,VS2008提示插件,JqueryValidate表单验证插件
jQuery Validate 插件依赖 jQuery 库,使用前需要先导入 jQuery的 js 文件,再导入 jquery.validate.js 插件,可以再导入中文提示信息文件 messages_zh.js
jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,...
大家可以参考下,感觉还是有点不足。希望大家补充。
官方下载的jQuery 验证控件,最新版本!妈妈再也不用担心我手动写验证了。