亲们该页面内会员们分享的“作品”，版权为才华横溢的原作者们所有滴，不得商业使用！
formvalidation是一款功能非常强大的基于Bootstrap的表单验证插件。该jQuery表单验证插件内置了16种表单验证器，你也可以通过Bootstrap Validator's APIs写自己的表单验证器。该表单验证插件的可用验证器有：
between：检测输入的值是否在两个指定的值之间。
callback：通过回调函数返回验证信息。
creditCard：验证信用卡格式。
different：如果输入值和给定的值不同返回true。
digits：如果输入的值只包含数字返回true。
emailAddress：验证电子邮件格式是否有效。
greaterThan：如果输入的值大于或等于指定的值返回true。
hexColor：验证一个hex格式的颜色值是否有效。
identical：验证输入的值是否和指定字段的值相同。
lessThan：如果输入的值小于或等于指定的值返回true。
notEmpty：检测字段是否为空。
regexp：检测输入值是否和指定的javascript正则表达式匹配。
remote：通过AJAX请求来执行远程代码。
stringLength：验证字符串的长度。
uri：验证URL地址是否有效。
usZipCode：验证美国的邮政编码格式。
这个jQuery表单验证插件还可以和、、和一起配合使用。产科下面的效果图。
formvalidation和Bootstrap一起使用：
formvalidation和Foundation一起使用：
formvalidation和Pure一起使用：
formvalidation和UI Kit一起使用：
formvalidation和Semantic UI一起使用：
使用这个表单验证插件首先要引入必要的js和css文件。jQuery要求1.9.1+以上的版本。
&script src="jquery/1.10.2/jquery.min.js"&&/script&
&link rel="stylesheet" href="/bootstrap/3.0.2/css/bootstrap.min.css"&
&script src="/bootstrap/3.0.2/js/bootstrap.min.js"&&/script&
&script type="text/javascript" src="../dist/js/bootstrapValidator.js"&&/script&
&link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/&
该表单验证插件的最基本例子的HTML结果如下：
&form id="defaultForm" method="post" class="form-horizontal"&
&div class="form-group"&
&label class="col-lg-3 control-label"&Username&/label&
&div class="col-lg-5"&
&input type="text" class="form-control" name="username" /&
&div class="form-group"&
&label class="col-lg-3 control-label"&Email address&/label&
&div class="col-lg-5"&
&input type="text" class="form-control" name="email" /&
&div class="form-group"&
&label class="col-lg-3 control-label"&Password&/label&
&div class="col-lg-5"&
&input type="password" class="form-control" name="password" /&
&div class="form-group"&
&label class="col-lg-3 control-label"&Retype password&/label&
&div class="col-lg-5"&
&input type="password" class="form-control" name="confirmPassword" /&
&div class="form-group"&
&label class="col-lg-3 control-label" id="captchaOperation"&&/label&
&div class="col-lg-2"&
&input type="text" class="form-control" name="captcha" /&
&div class="form-group"&
&div class="col-lg-9 col-lg-offset-3"&
&button type="submit" class="btn btn-primary"&Sign up&/button&
JAVASCRIPT
在页面加载完毕之后，通过下面的方法来初始化该表单验证插件：
&script type="text/javascript"&
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
stringLength: {
message: 'The username must be more than 6 and less than 30 characters long'
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
different: {
field: 'password',
message: 'The username and password can\'t be the same as each other'
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
emailAddress: {
message: 'The input is not a valid email address'
password: {
validators: {
notEmpty: {
message: 'The password is required and can\'t be empty'
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
different: {
field: 'username',
message: 'The password can\'t be the same as username'
confirmPassword: {
validators: {
notEmpty: {
message: 'The confirm password is required and can\'t be empty'
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
different: {
field: 'username',
message: 'The password can\'t be the same as username'
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value ==
该表单验证插件的默认参数配置如下：
// The first invalid field will be focused automatically
autoFocus: true,
// Support declarative usage (setting options via HTML 5 attributes)
// Setting to false can improve the performance
declarative: true,
// The form CSS class
elementClass: 'fv-form',
// Use custom event name to avoid window.onerror being invoked by jQuery
// See #630
// Support backward
formInit: 'init.form.fv',
formError: 'err.form.fv',
formSuccess: 'success.form.fv',
fieldAdded: 'added.field.fv',
fieldRemoved: 'removed.field.fv',
fieldInit: 'init.field.fv',
fieldError: 'err.field.fv',
fieldSuccess: 'success.field.fv',
fieldStatus: 'status.field.fv',
localeChanged: 'changed.locale.fv',
validatorError: 'err.validator.fv',
validatorSuccess: 'success.validator.fv'
// Indicate fields which won't be validated
// By default, the plugin will not validate the following kind of fields:
// - disabled
// - hidden
// - invisible
// The setting consists of jQuery filters. Accept 3 formats:
// - A string. Use a comma to separate filter
// - An array. Each element is a filter
// - An array. Each element can be a callback function
function($field, validator) {
$field is jQuery object representing the field element
validator is the BootstrapValidator instance
// The 3 following settings are equivalent:
// 1) ':disabled, :hidden, :not(:visible)'
// 2) [':disabled', ':hidden', ':not(:visible)']
// 3) [':disabled', ':hidden', function($field) {
//return !$field.is(':visible');
excluded: [':disabled', ':hidden', ':not(:visible)'],
// Map the field name with validator rules
fields: null,
// Live validating option
// Can be one of 3 values:
// - enabled: The plugin validates fields as soon as they are changed
// - disabled: Disable the live validating. The error messages are only shown after the form is submitted
// - submitted: The live validating is enabled after the form is submitted
live: 'enabled',
// Locale in the format of languagecode_COUNTRYCODE
locale: 'en_US',
// Default invalid message
message: 'This value is not valid',
// The field will not be live validated if its length is less than this number of characters
threshold: null,
// Whether to be verbose when validating a field or not.
// Possible values:
// - true:
when a field has multiple validators, all of them will be checked, and respectively - if errors occur in
multiple validators, all of them will be displayed to the user
// - false: when a field has multiple validators, validation for this field will be terminated upon the first encountered error.
Thus, only the very first error message related to this field will be displayed to the user
verbose: true,
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// These options mostly are overridden by specific framework
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// The submit buttons selector
// These buttons will be disabled to prevent the valid form from multiple submissions
selector: '[type="submit"]',
// The disabled class
disabled: ''
control: {
// The CSS class for valid control
valid: '',
// The CSS class for invalid control
invalid: ''
// The CSS class of each message element
clazz: '',
// The error messages container. It can be:
// - 'tooltip' if you want to use Bootstrap tooltip to show error messages
// - 'popover' if you want to use Bootstrap popover to show error messages
// - a CSS selector indicating the container
// In the first two cases, since the tooltip/popover should be small enough, the plugin only shows only one error message
// You also can define the message container for particular field
container: null,
// Used to determine where the messages are placed
parent: null
// Shows ok/error/loading icons based on the field validity.
valid: null,
invalid: null,
validating: null,
feedback: ''
// The CSS selector for indicating the element consists of the field
// You should adjust this option if your form group consists of many fields which not all of them need to be validated
selector: null,
valid: '',
invalid: '',
feedback: ''
更多信息请参考formvalidation表单验证插件官方网站：
下载资源：1 次
错误提交：
大小：906.14KB
================关于优设记================
“优设记“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博：同步网站更新内容，订阅jquery资源 @吐槽优设记，欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接：
非特殊说明，本文版权归原作者所有，转载请注明出处
我当前G币余额：0
已下载次数：1
注：点击右侧分享按钮并且留下评论自动+10G币
所需G币：20
下载提示：由于文件较小，请直接点击下载，不支持迅雷等下载工具。
不足，你可以通过
你可以直接下载，不消耗G币
&浙ICP备号-1 & Copyright (C) 2013
All Rights Reserved 您是第2717645位访客！简单易用的jquery表单验证插件
&&& 现在很多表单的注册都离不开表单的验证，出于对用户信息的安全性和合理性考虑，表单的注册都应该具备完善的验证方式，下面就向大家分享一些简单实用的jquery表单验证插件，来帮助我们更好的使用表单注册。
Parsley是一个能够取代JavaScript验证的轻量级插件，不仅轻巧而且功能也很丰富，它是用数据对象嵌入到dom结构中，而且该插件的使用和设置能够让你一目了然，它可以让你设置覆盖掉几乎所有的表单域的默认行为，直到调试出你想要的结果。
quickValidation.js工作方式非常类似前面介绍的Parsley，它没有设置默认的Javascript规则，取而代之的是直接将数据验 证对象放到input标签内。它将必需填写字段(required,number,range=0-99)规则相结合，然后在相应的input标签中添 加 .quickValidate class类，最后在表单域中添加一些错误提示信息即可。
Ketchup 是一个仅有3.4KB的轻量级插件，它包括了18种基本的验证类型，你还可以直接写入自己的验证方法来覆盖默认的行为。
jQuery Validation是一个非常容易使用的表单验证下拉式插件，它将验证方法封装在一起，然后允许你使用api接口的方式进行轻松的调用。
有好的文章希望站长之家帮助分享推广，猛戳这里
本网页浏览已超过3分钟，点击关闭或灰色背景，即可回到网页JQuery表单验证插件jQuery.validate.js_最火下载站
您的位置： >
> JQuery表单验证插件jQuery.validate.js
JQuery表单验证插件jQuery.validate.js
今天把 jquery.validate.js 下载下来，看了下它给的demo。现在来总结下笔记。 jquery.validate.js 官网下载： 在上面可以下载到它的例子程序和js脚本
说明：本人看了下例子程序，有什么不对的请大家指正。谢谢！
使用它验证表单有2中方式： 1.使用它内部定义好的验证（也就是错误提示它已经定义好了。不需要我们再定义，这种方便，简单。但不灵活。） 2.自定义错误提示，这种可以自己定义错误提示。需要写的代码就相对较多了。 实例1、使用jquery验证定义好的错误提示。 一。我们先建一个表单，什么验证也没有的一个表单。
Copy to Clipboard引用的内容：[]
&%@ Page Language=&C#& AutoEventWireup=&true& CodeBehind=&Default.aspx.cs& Inherits=&jquery_asp.net._Default& %& &!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Transitional//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&& &html xmlns=&http://www.w3.org/1999/xhtml& & &head runat=&server&& &title&jquery validate &/title& &/head& &body& &form id=&commentForm& method=&get& action=&&& &fieldset& &legend&请输入你的姓名，电子邮件和网址，以及你的评论&/legend& &p& &label for=&cname&&姓名（必填，并2个字符）&/label& &input id=&cname& name=&name& /& &p& &label for=&cemail&&电子邮件 (必填)&/label& &input id=&cemail& name=&email& /& &/p& &p& &label for=&curl&&网址 (可选)&/label& &input id=&curl& name=&url&value=&& /& &/p& &p& &label for=&ccomment&&你的评论 (必填)&/label& &textarea id=&ccomment& name=&comment&&&/textarea& &/p& &p& &input type=&submit& value=&提交&/& &/p& &/fieldset& &/form& &/body& &/html&
2.添加验证 现在我们来添加验证。 1.引入jquery脚本 &script type=&text/javascript& src=&/uploads/Common/jquery-1.3.2.min.js&&&/script& &script src=&/uploads/Common/js/jquery.validate.js& type=&text/javascript&&&/script&
上一篇： 下一篇：&&精jquery前端form表单验证插件validform使用入门教程使用例子：表单&input type=&text& name=&loginName& id=&loginName& value=&${loginName}& ajaxurl=&commonAction.do?method=checkAccount& datatype=&/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){2,14}$/& errormsg=&字母开头，可包括._数字字母3-15位& class=&registered_text1&/&js:var rForm = $(&#registerForm&).Validform({&& &&& &&& &tiptype:2,&& &&& &&& &label:&.label&,&& &&& &&& &showAllError:true&& &&& &});参数根据自己需要可选。页面效果：其他功能自己去体会吧，本人感觉超赞。名字叫 validform官方验证：非常好的插件，官方地址：/由编辑于 17:08:28猜你喜欢9个牛币请下载代码后再发表评论//Validform_v5.3.2/Validform_v5.3.2/demo/Validform_v5.3.2/demo/ajax_post.php/Validform_v5.3.2/demo/css/Validform_v5.3.2/demo/css/demo.css/Validform_v5.3.2/demo/css/style.css/Validform_v5.3.2/demo/css/wp-syntax.css/Validform_v5.3.2/demo/images/Validform_v5.3.2/demo/images/arrow1.gif/Validform_v5.3.2/demo/images/arrow2.gif/Validform_v5.3.2/demo/images/error.png/Validform_v5.3.2/demo/images/header-bg.gif/Validform_v5.3.2/demo/images/navbg.gif/Validform_v5.3.2/demo/images/onLoad.gif精精精精原精精原精精原相关分享精原最近下载暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友}