码迷,mamicode.com
首页 > Web开发 > 详细

jQuery Validation Engine

时间:2015-06-10 17:16:39      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Validation Engine 表单验证中文版 &raquo; 在线演示 - 前端开发仓库</title>
<link rel="stylesheet" href="/css/demo.css">
<link rel="stylesheet" href="css/validationEngine.jquery.css">
<link rel="stylesheet" href="css/layout.css">
</head>
<body>
<div class="wrap">
  <div class="side">
    <div class="logo">
      <a href="http://code.ciaoca.com/" target="_blank">前端开发仓库</a>
      <em>在线演示</em>
    </div>
    <dl class="about">
      <dt>关于</dt>
      <dd><a target="_blank" href="http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/">作者</a></dd>
      <dd><a target="_blank" href="https://github.com/posabsolute/jQuery-Validation-Engine">Github</a></dd>
      <dd><a target="_blank" href="http://code.ciaoca.com/jquery/validation_engine/">中文文档</a></dd>
    </dl>
    <div id="nav" class="nav">
      <dl class="mini">
        <dt>示例</dt>
        <dd><a href="index.html" title="Validators">综合示例</a></dd>
        <dd><a href="demoRequired.html" title="Required">扩展必填验证</a></dd>
        <dd><a href="demoDate.html" title="Date">日期类型验证</a></dd>
        <dd><a href="demoRegExp.html" title="RegExp">正则验证</a></dd>
        <dd><a href="demoFieldTypes.html" title="Field Types">多种输入控件的验证</a></dd>
        <!--<dd><a href="demoAttr.html" title="Attr">Attr</a></dd>-->
        <dd><a href="demoCheckBox.html" title="CheckBox">单选框、复选框的验证</a></dd>
        <dd><a href="demoMultipleForms.html" title="Multiple Forms">多表单验证</a></dd>
        <dd><a href="demoDivContainer.html" title="Div Container">Div 容器</a></dd>
        <dd><a href="demoWithoutId.html" title="Without Id">不再需要 ID 属性</a></dd>
        <dd><a href="demoForm.cn.html" title="Chinese">较好体验的中文表单</a></dd>
      </dl>
      <dl class="mini">
        <dt>参数配置</dt>
        <dd><a href="demoGlobalSettings.html" title="Global Settings">全局设置</a></dd>
        <dd><a href="demoAutoHide.html" title="Auto Hide">自动隐藏提示信息</a></dd>
        <dd><a href="demoCustomErrorMessages.html" title="Custom Error Messages">自定义提示信息内容</a></dd>
        <dd><a href="demoErrorLimit.html" title="Error Limit">提示信息的数量</a></dd>
        <dd><a href="demoOneMessage.html" title="One Message">只显示一个提示信息</a></dd>
        <dd><a href="demoSilent.html" title="Silent">静默处理</a></dd>
        <dd><a href="demoOverflown.html" title="Overflown">显示溢出限制</a></dd>
        <dd><a href="demoValidationComplete.html" title="Validation Complete">验证回调函数(阻断提交)</a></dd>
        <dd class="n"><a href="demoOnForm.html" title="On Form">验证回调函数(不阻断提交)</a></dd>
      </dl>
      <dl class="mini">
        <dt>data 属性</dt>
        <dd><a href="demoInlineMessages.html" title="Inline Messages">自定义提示信息内容</a></dd>
        <dd><a href="demoPerFieldPromptDirection.html" title="PerField Prompt Direction">提示层的位置</a></dd>
        <dd><a href="demoAdjustments.html" title="Adjustments">调整提示层的位置</a></dd>
      </dl>
      <dl class="mini">
        <dt>API 接口</dt>
        <dd><a href="demoShowPrompt.html" title="Show Prompt">显示提示信息</a></dd>
        <dd><a href="demoPositioning.html" title="Positioning">改变提示层位置</a></dd>
        <dd><a href="demoLiveEvent.html" title="Live Event">动态绑定</a></dd>
        <dd><a href="demoHooks.html" title="Hooks">自定义事件</a></dd>
      </dl>
      <dl class="mini">
        <dt>Ajax 验证</dt>
        <dd><a href="demoAjaxInlinePHP.html" title="Ajax Inline PHP">Ajax PHP 验证</a></dd>
        <dd><a href="demoAjaxSubmitPHP.html" title="Ajax Submit PHP">Ajax PHP 验证及提交</a></dd>
      </dl>
      <dl class="mini">
        <dt>其他</dt>
        <!--<dd><a href="demoChosenLibrary.html" title="Chosen Library">[插件支持] chosen</a></dd>-->
        <dd><a href="demoSelectBoxLibrary.html" title="Select Box Library">[插件支持] SelectBox</a></dd>
        <dd><a href="demoDatepicker.html" title="Datepicker">[插件支持] Datepicker</a></dd>
        <dd><a href="demoValidators.ja.html" title="Validators JAN">[多语言] 日文</a></dd>
      </dl>
    </div>
  </div>
  <div class="main">
    <div class="inwrap">
      <h1>jQuery Validation Engine 表单验证中文版</h1>
      <h2>表单验证回调函数</h2>
      
      <div class="detail">
        <p>使用参数<code>onSuccess</code><code>onFailure</code>设置在获得表单验证后,提交前进行的操作。</p>
      </div>
      
      <div class="example">
        <form id="formID" onsubmit="return jQuery(this).validationEngine(‘validate‘);" class="formular" method="post">
          <fieldset>
            <legend>必填项</legend>
            <input value="" class="validate[required] text-input" type="text" name="req" id="req" />
          </fieldset>
          <input class="submit" type="button" onclick="jQuery(‘#formID‘).submit();" value="验证 &amp; 提交表单"/>
        </form>
      </div>

    </div>
  </div>
</div>

<script src="/js/jquery-1.7.2.min.js"></script>
<script src="js/languages/jquery.validationEngine-zh-CN.js"></script>
<script src="js/jquery.validationEngine.min.js"></script>
<script>
function validate(){
  
}
function formSuccess(){
  alert(验证通过!);
}

function formFailure(){
  alert(验证不通过!);
}
jQuery(document).ready(function(){
  // binds form submission and fields to the validation engine
  jQuery(#formID).validationEngine({
    onSuccess: formSuccess,
    onFailure: formFailure
  });
});
</script>
</body>
</html>

 

jQuery Validation Engine

标签:

原文地址:http://www.cnblogs.com/bksqmy/p/4566519.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!