http://www.w3cschool.cc/jquery/jquery-plugin-validate.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="common-validate.js"></script>
<script type="text/javascript">
$().ready(function() {
$("#myform").validate({
debug: true, //调试模式取消submit的默认提交功能
//errorClass: "label.error", //默认为错误的样式类为：error
focusInvalid: false, //当为false时，验证无效时，没有焦点响应
onkeyup: false,
submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
alert("提交表单");
form.submit(); //提交表单
},
// 验证规则
rules:{
userName: {
required: true,
userName: true,
rangelength: [5,10],
remote:{
type: "post",
url: "http://localhost/gctappservice/placard/checkUserName",
data: {
userName: function() {
console.log("nnn==========" + $("#userName").val())
return $("#userName").val();
},
},
jsonp:'jsonpCallback',
dataType: 'jsonp',
dataFilter: function(data, type) {
console.log("data=="+data);
if (data == "true"){
console.log("data11==="+data);
return true;
}else{
console.log("data22==="+data);
return false;
}
}
}
} ,
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
mobile: {
required: true,
isMobile: true,
minlength:11,
maxlength: 11
}
},
/* 设置错误信息 */
messages: {
userName: {
required: "请填写用户名",
rangelength: "用户名必须在5-10个字符之间",
remote: "用户名已存在"
},
password: {
required: "请输入密码",
minlength: "密码不能小于5个字符"
},
confirm_password: {
required: "请输入确认密码",
minlength: "确认密码不能小于5个字符",
equalTo: "两次输入密码不一致不一致"
},
mobile: {
required: "请填写手机号",
maxlength:"长度不能小于11",
maxlength:"长度不能大于11"
}
},
//errorPlacement: function(error, element) {
// error.appendTo( element.parent("td").next("td") );
//}
success: function(label) {
// set as text for IE
//label.html(" ").addClass("checked");
label.addClass("valid");
}
});
});
</script>
<style type="text/css">
input.error { border: 1px solid red; }
label.error{
margin-left: 10px;
padding-left: 20px;
color: red;
background:url("11.png") left no-repeat;
}
label.valid{
background:url("22.png") left no-repeat;
}
</style>
</head>
<body>
<form name="myform" id="myform" method = "post">
用户名：<input type="text" name ="userName" id="userName"></input></br>
密码：<input type="password" name ="password" id="password"></input></br>
密码：<input type="password" name ="confirm_password" id="confirm_password"></input></br>
手机号：<input type="text" name ="mobile" id="mobile"></input></br>
<input type="submit" name ="submit" id="submit" value="submit"></input>
</form>
<hr>
</body>
</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插件是实现这一功能的强大工具，它...