今天弄了下JQuery的Validation，直接贴代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> JQuery Validation Test </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
#allDiv {
text-align:left;
width:500px;
border:1px solid red;
}
label.error {
color: red;/*错误信息的颜色*/
}
input.error {
border:1px dotted red;/*输入错误的输入框的边框样式*/
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>
<script type="text/javascript">
$(function() {
//可以这样定义自己的验证方式,主要是利用JQuery Validation给我们提供的jQuery.validator.addMethod( String name, Function rule, String message ) 方法,
//第一个参数是自定义的认证的名称，第二个参数是处理方法，第三个参数是默认的信息
// 电话号码验证
jQuery.validator.addMethod("tel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,8}$/; //电话号码格式010-12345678
return this.optional(element) || (tel.test(value));
}, "the tel is not valid!");
$("#form1").validate({//参数是一个对象，这个一般的配置都是这样的
rules: {//rules里面的属性名都是输入框的name属性值
name: "required",//name表示某一输入框的name的属性值,换句话说就是用于验证的表单元素的name而不是id
username: "required",
password: {//有多个约束的时候就写成一个对象
required: true,
minlength: 6,
maxlength:16
},
repassword: {
equalTo: "#password"
},
email: {
required: true,
email: true
},
tel: {
required: true,
tel: true//这是上面自定义的验证方式
}
//约束还可以是：rangelength: [2, 6]，长度的范围
//min,max 最大值,最小值
//range: [13, 23] 取值范围
//url,是一个URL
//date,是一个日期
//dateISO,是一个ISO日期
//dateDE,德国日期
//decimal,是一个十进制的数
//digits,只能是数字
//creditcard,信用卡式的数字
//accept,表示哪些文件是被允许的，accept: "xls|csv"，只有xls和csv文件才能通过验证,默认是jpeg,gif,png式的图片文件
//对于复杂的验证方式可以向上面的验证电话号码的方法自定义验证方式，并使用正则表达式来实现
},
messages: {
name: "name is empty!",
username: "username is empty!",
password: {
required: "password is empty!",
minlength: "the minlength is 6 !",
maxlength: "the maxlength is 16 !"
},
repassword: "the repassword is not equal to password!",
email: {
required: "we need your email address! ",
email: "your email is not valid!"
},
tel: {
required: "tel is empty!",
tel: "tel is not valid!"
}
}
});
});
</script>
</head>
<body>
<center>
<div id="allDiv">
<form id="form1">
name:<input type="text" name="name"><br>
username:<input type="text" name="username"><br>
password:<input type="password" name="password" id="password"><br>
repassword:<input type="password" name="repassword"><br>
email:<input type="text" name="email"><br>
tel:<input type="text" name="tel"><br>
<input type="submit" value="submit">
</form>
</div>
</center>
</body>
</html>
分享到：
相关推荐
**jQuery Validation Plugin 1.13.0 知识点详解** jQuery Validation Plugin 是一个流行的JavaScript库，专门用于实现Web表单的数据验证。这个插件是基于jQuery框架设计的，因此，它能够轻松地与jQuery的其他功能...
《jQuery Validation插件详解——基于版本1.17.0》 jQuery Validation是Web开发中一个广泛使用的JavaScript库，主要用于表单验证。该插件以其简单易用和强大的功能著称，大大简化了前端数据验证的过程。在本文中，...
**jQuery Validation 插件详解** jQuery Validation 是一个广泛使用的JavaScript库，专为表单验证而设计，它使得在网页上创建高效、用户友好的验证规则变得简单易行。本篇文章将深入探讨jQuery Validation插件的...
《jQuery Validation插件详解与应用实践》 在Web开发领域，表单验证是不可或缺的一环，而jQuery Validation插件正是为了简化这一过程而诞生的。本文将深入探讨jQuery Validation插件的基本概念、功能特性以及实际...
jQuery Validation 是一个强大的JavaScript库，专门用于实现网页表单的验证功能。这个插件极大地简化了在客户端进行数据验证的过程，使得开发者可以更专注于用户体验，而无需深陷于复杂的JavaScript代码之中。它与...
**jQuery Validation 插件详解与应用** jQuery Validation 是一个强大的客户端验证插件，它使得在JavaScript中进行表单验证变得简单而高效。该插件基于jQuery库，为开发者提供了丰富的验证规则和自定义方法，帮助...
《jQuery验证插件jQuery-validation-1.19.1详解》 jQuery-validation是Web开发中常用的客户端表单验证插件，其1.19.1版本的发布为开发者提供了更稳定和高效的服务。该压缩包“jquery-validation-1.19.1.zip”包含了...
**jQuery Validation 插件详解** jQuery Validation 插件是一款广泛使用的JavaScript库，它为HTML表单验证提供了强大的功能。这款插件与流行的jQuery库无缝集成，使得开发者能够轻松地为网页上的表单添加验证规则，...
《jQuery验证插件详解——基于jquery-validation-1.11.1.zip的探索》 jQuery作为一款广泛使用的JavaScript库，极大地简化了DOM操作，事件处理和动画制作等任务。而`jquery-validation`则是jQuery生态中的一款强大...
**jQuery Validation Plugin 1.15.0** jQuery Validation Plugin 是一个广泛使用的开源插件，用于在客户端进行表单验证，提高用户交互体验。版本1.15.0是该插件的一个稳定版本，提供了丰富的功能和改进。 **主要...
《jQuery Validation插件详解与应用实践》 在Web开发中，表单验证是不可或缺的一环，它能够确保用户输入的数据符合预设的规则，从而提高数据的准确性和系统的稳定性。jQuery Validation插件作为jQuery库的一个扩展...
**jQuery Validation插件详解与实践应用** jQuery Validation插件是一款广泛使用的JavaScript库，它使得在网页表单中进行验证变得更加简单、高效。该插件是jQuery UI项目的一部分，旨在提供强大的验证功能，帮助...
《jQuery Validation插件详解及其应用》 在网页开发中，用户输入的数据验证是不可或缺的一环，确保用户提交的信息准确无误，防止恶意攻击，提升用户体验。jQuery Validation插件正是一款强大的表单验证工具，它以其...
<title>validation test .icon-ok { background: url(./images/icon-ok.png) no-repeat center; width: 16px; height: 16px; display: inline-block; } .icon-error { background: url(./images/icon-...
**jQuery Validation 插件详解** `jQuery Validation` 是一个广泛使用的 jQuery 插件，主要用于创建高效、用户友好的表单验证。它简化了在网页上实现表单验证的过程，提供了丰富的自定义规则和错误消息，使得开发者...
《jQuery Validation插件详解与应用实践》 在Web开发中，表单验证是不可或缺的一环，它能够确保用户输入的数据符合预设的规则，从而提高数据的准确性和系统的稳定性。jQuery Validation插件作为jQuery库的一个强大...
《jQuery Validation插件详解及其1.19.0版本特性》 jQuery Validation插件是Web开发中用于表单验证的一款强大工具，它以其简洁的API和丰富的功能深受开发者喜爱。在1.19.0这个版本中，我们看到了一些重要的改进和...
**jQuery Form Validation and Tooltip** 在Web开发中，用户界面的交互性和用户体验至关重要，尤其是在处理表单数据时。jQuery Form Validation and Tooltip 是一个优秀的解决方案，它利用jQuery库的强大功能，为...
`A Jquery Inline Form Validation` 是一个高质量的jQuery插件，专注于提供直观且高效的前端表单验证功能。这个插件通过在用户输入时即时显示错误信息，使得验证过程更加顺畅，减少了用户在提交表单后发现错误的情况...