<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<!-- 经过测试 jquery-1.10.1.min.js 是无法进行验证，而 js/jquery-1.3.1.min.js 则可以，
看到的朋友能否解决在 jquery-1.10.1.min.js 的问题-->
<script src="js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
* {
font-family: Verdana;
font-size: 96%;
}
label {
width: 10em;
float: left;
}
label.error {
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
p {
clear: both;
}
.submit {
margin-left: 12em;
}
em {
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
em.error {
background: url(img/unchecked.gif) no-repeat 0px 0px;
padding-left: 16px;
}
em.success {
background: url(img/checked.gif) no-repeat 0px 0px;
padding-left: 16px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
//自定义一个验证方法
$.validator.addMethod(
"formula", //验证方法名称
function(value, element, param) {//验证规则
return value == eval(param);
},
'请正确输入数学公式计算后的结果'//验证提示信息
);
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url:"url",
comment: "required",
valcode: {
formula: "7+9"
}
},
messages: {
username: {
required: '请输入姓名',
minlength: '请至少输入两个字符'
},
email: {
required: '请输入电子邮件',
email: '请检查电子邮件的格式'
},
url: '请检查网址的格式',
comment: '请输入您的评论'
},
errorElement: "em", //用来创建错误提示信息标签
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签em
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em>*</em>
<input id="cusername" name="username" size="25" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em>
<input id="cemail" name="email" size="25" />
</p>
<p>
<label for="curl">网址</label>
<em> </em>
<input id="curl" name="url" size="25" value="" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em>
<textarea id="ccomment" name="comment" cols="22"></textarea>
</p>
<p>
<label for="cvalcode">验证码</label>
<input id="cvalcode" name="valcode" size="25" value="" />
=7+9 </p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>
效果图：
相关推荐
《jq表单验证大全》是针对使用jQuery库进行前端表单验证的一份综合资源集合，主要涵盖各种常见的表单验证场景和解决方案。jQuery，作为一款轻量级的JavaScript库，因其简洁的API和强大的功能而广受欢迎，尤其在处理...
除了基本的验证功能，JQ还有许多优秀的表单验证插件，如jQuery Validation Plugin，它提供了更丰富的验证功能和自定义选项。例如，可以使用`remote`规则进行服务器端验证，或者使用`highlight`和`unhighlight`方法来...
表单验证JQ插件jquery-validation.js
jQuery Validation Plugin v1.19.1 表单验证插件 2020年官方最新版。包含中文语言包messages_zh.js及jquery.validate.js，在dist目录中。
对于表单验证，jQuery提供了一种高效且用户友好的方法，使得开发者能够轻松地实现对用户输入数据的有效性检查。本示例主要关注如何使用jQuery来创建吸引人的表单验证特效。 1. **基本概念**：jQuery表单验证的核心...
在本文中，我们将深入探讨如何使用jQuery库实现动态表单验证，特别是基于`jquery.validationEngine.js`插件的用法。 jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。在动态表单验证...
在这个"登录注册验证jq"项目中，我们主要关注的是使用jQuery库进行表单验证，这是一种广泛使用的JavaScript库，极大地简化了DOM操作和事件处理。以下是关于这个主题的详细知识点： 1. **jQuery库**：jQuery是由John...
jQuery Validation 插件是用于在前端进行表单验证的一个强大工具，它简化了对用户输入数据的检查，确保用户在提交表单前填写了必要的信息并遵循特定的格式。本篇文章将详细介绍如何使用jQuery Validation插件，以及...
其效果图如下：使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 ...link rel=”stylesheet” href=”validationEngine.jquery.css
在“jq表单验证大全”这个项目中，你可以找到各种验证场景的实例，涵盖了基础验证、插件应用以及美化效果的完整流程。通过实践这些示例，你可以快速掌握jQuery在表单验证中的运用技巧，无论是在简单的个人项目还是...
jQuery Validation插件是jQuery库的一个强大扩展，用于实现客户端的表单验证。本篇文章将围绕"jquery-validation-1.8.1"这个版本，深入探讨该插件的核心功能、使用方法以及提供的多个示例。 jQuery Validation插件...
总结，jQuery Validation Plugin v1.14.0汉化版是一个强大的表单验证工具，提供了丰富的验证规则和灵活的配置选项。通过理解和实践，开发者能够轻松创建具有专业验证功能的交互式Web表单，提高用户体验并保证数据的...
jQuery Validate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来...
在Web开发中，表单验证是不可或缺的一部分，它确保用户输入的数据符合预设的规则，从而提高数据质量和用户体验。jQuery formValidator是一个强大的验证插件，它提供了丰富的验证规则和自定义功能，能够帮助开发者...
灵活好用的jq表单验证，自己封装可按照验证需求添加验证方法，不需要修改验证整体结构，内含使用说明。 var arr = new Array(); /* */ //用户验证 arr[0] = new XQValidation(); arr[0].XChecksetcont("3-12...
jQuery Validation 插件是用于在前端进行表单验证的强大工具，它可以帮助开发者轻松地实现对用户输入的合法性检查，提供了一套完整的验证规则和错误消息提示。在这个例子中，我们将探讨如何使用该插件实现一个基本的...
jQuery Validation 插件是一款强大的表单验证工具，它为开发者提供了简单易用的方式来验证用户在网页表单中输入的数据。这个插件与jQuery库紧密结合，能够无缝集成到现有的HTML表单中，允许开发者轻松定制验证规则和...
【FateSheep-Validation】是一个专为Bootstrap框架设计的验证工具库，它旨在帮助开发者在前端实现高效、用户友好的表单验证功能。在Web应用开发中，表单验证是必不可少的一环，用于确保用户输入的数据符合预设的规则...