<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Validation Engine 表单验证中文版 » 在线演示 - 前端开发仓库</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><a href="demoOnForm.html" title="On Form">验证回调函数（不阻断提交）</a></dd>
</dl>
<dl class="mini">
<dt>data 属性</dt>
<dd class="n"><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>data-errormessage</code>设置对应每种验证规则的提示信息。</p>
</div>
<div class="example">
<form id="formID" class="formular" method="post">
<fieldset>
<legend>Required!</legend>
<label>必填项：</label>
<input value="" class="validate[required] text-input" type="text" name="req" id="req" data-errormessage-value-missing="这里必须填写啦！" />
<label>最喜欢的运动 1：</label>
<select name="sport" id="sport" class="validate[required]" data-errormessage-value-missing="This select is required!">
<option value="">选择一项运动</option>
<option value="option1">网球</option>
<option value="option2">足球</option>
<option value="option3">高尔夫</option>
</select>
</fieldset>
<fieldset>
<legend>Function</legend>
<label>调用外部函数进行验证（只能输入“HELLO”）：</label>
<input value="" class="validate[required,funcCall[checkHELLO]] text-input" type="text" id="lastname" name="lastname" data-errormessage-custom-error="提示：HELLO">
<code>validate[required,funcCall[checkHELLO]]</code>
</fieldset>
<fieldset>
<legend>MinSize</legend>
<label>限制最小字符数（必填项）：</label>
<input value="" class="validate[required,minSize[6]] text-input" type="text" name="minsize" id="minsize" data-errormessage-range-underflow="你写的太少了">
<code>validate[required,minSize[6]]</code>
</fieldset>
<fieldset>
<legend>MaxSize</legend>
<label>限制最大字符数（可选项，不填写时不会提示错误）：</label>
<input value="0123456789" class="validate[optional,maxSize[6]] text-input" type="text" name="maxsize" id="maxsize" data-errormessage-range-overflow="谁让你写这么多啦">
<code>validate[maxSize[6]]</code>
</fieldset>
<fieldset>
<legend>Past</legend>
<p class="tips">检查是否为过去的日期</p>
<label>输入 2010/01/01 以前的日期：</label>
<input value="2009/06/30" class="validate[custom[date],past[2010/01/01]] text-input" type="text" name="past" id="past" data-errormessage-value-missing="这个日期……NO">
<code>validate[[custom[date],past[2010/01/01]]</code>
</fieldset>
<fieldset>
<legend>IP</legend>
<div class="tips">IP 地址（v4）</div>
<input value="192.168.3." class="validate[required,custom[ipv4]] text-input" type="text" name="ip" id="ip" data-errormessage-custom-error="IP 长这样？">
<code>validate[[required,custom[ipv4]]</code>
</fieldset>
<input class="submit" type="submit" value="验证 & 提交表单">
</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>
jQuery(document).ready(function(){
// binds form submission and fields to the validation engine
jQuery('#formID').validationEngine();
});
/**
*
* @param {jqObject} the field where the validation applies
* @param {Array[String]} validation rules for this field
* @param {int} rule index
* @param {Map} form options
* @return an error string if validation failed
*/
function checkHELLO(field,rules, i, options){
if(field.val() != 'HELLO'){
// this allows to use i18 for the error msgs
return options.allrules.validate2fields.alertText;
};
};
</script>
</body>
</html>
