<!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><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>

jQuery Validation Engine(二) checkHello data-errormessage的更多相关文章

  1. jQuery Validation Engine 表单验证

    功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, ...

  2. jQuery Validation Engine(三) 基本常识

    1:response.validateFail(fieldId, "机构英文名已被其他人使用"); //field为这个字段的id,”“ 双引号的内容,是提示语 <!DOCT ...

  3. jQuery Validation Engine

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  4. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  5. jQuery Validation Engine 表单验证，自定义规则验证方法

    jQuery Validation Engine 表单验证说明文档http://code.ciaoca.com/jquery/validation-engine/ js加到jquery.validat ...

  6. 验证控件jQuery Validation Engine调用外部函数验证

    在使用jQuery Validation Engine的时候,我们除了使用自带的API之外,还可以自己自定义正则验证.自定义正则验证上一篇已经讲过了,如果想使用自定义函数进行验证怎么办?其实这个控件有 ...

  7. jquery 悬浮验证框架 jQuery Validation Engine

    中文api 地址  http://code.ciaoca.com/jquery/validation-engine/   和bootstarp 一起使用不会像easyui  验证那样生硬 修改版 原版 ...

  8. 验证控件jQuery Validation Engine简单自定义正则表达式

    首先上控件的地址http://code.ciaoca.com/jquery/validation-engine/ 具体使用方式网站里说的很清楚,我写这篇文章主要是用于记录如何自己添加自定义正则表达式, ...

  9. Validation Engine 表单验证

    前端开发仓库 » jQuery » jQuery Validation Engine 表单验证 jQuery Validation Engine 表单验证来源 功能强大的 jQuery 表单验证插件, ...

随机推荐

  1. Python3.5学习之旅——day6

    面向对象编程的学习 一.定义 首先跟大家介绍一位资深的程序员前辈说过的编程心得: 1.写重复代码是非常不好且低级的行为 2.完成的代码需要经常变更 所以根据以上两个心得,我们可以知道写的代码一定要遵循 ...

  2. buuctf——easyjava

    虽然学过Javaweb的开发,但没好好学,所以对Javaweb了解不深 菜的真实 WEB-INF/web.xml泄露 贴一个别人的源码泄露总结ctf/web源码泄露及利用办法[总结中] WEB-INF ...

  3. 实际中可能遇到的NAT问题（IPsec）

    一.背景介绍:一般我们在实际网络中不是IPSec VPN的时候,都是边界设备连接Internet,然后两个边界设备通过Internet去实现互通,建立VPN,但是,有的运营商在分配IP地址的时候,给我 ...

  4. Codeforces Round #589 (Div. 2)E（组合数，容斥原理，更高复杂度做法为DP）

    #define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;int f[257],fac[257],ifa ...

  5. 【STM32H7教程】第55章 STM32H7的图形加速器DMA2D的基础知识和HAL库API

    完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第55章       STM32H7的图形加速器DMA2D的基 ...

  6. 操作系统OS，Python - 有了GIL为什么还要threading.Lock()?

    参考: https://stackoverflow.com/questions/49859287/what-is-the-need-of-threading-lock-when-cpython-has ...

  7. iOS一个简单的设置圆角不引起性能问题的分类

    http://www.cocoachina.com/articles/18756 iOS设置圆角矩形和阴影效果 https://www.cnblogs.com/rayshen/p/4900336.ht ...

  8. async处理异步操作

    async函数用async作为关键字,try和 catch来处理异常, await接受一个promise函数返回 async list () { try { await api.findjuBarDa ...

  9. teraterm中log中加入时间戳

    步骤: 1.Setup->Additional settings->log->Timestamp(Local Time) 2.记录log.File->log(Teraterm. ...

  10. JavaWeb之过滤器

    过滤器 什么是过滤器 1示意图: 过滤器的作用: 1.过滤器的作用好比一个保安.是servlet规范中的技术 2.用户在访问应用的资源之前或者之后,可以对请求做出一定的处理 编写过滤器步骤: 1.编写 ...