• jQuery Validation Engine(三) 基本常识


    1:response.validateFail(fieldId, "机构英文名已被其他人使用");   //field为这个字段的id,”“ 双引号的内容,是提示语
    <!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 class="n"><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><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>custom_error_messages</code>设置按验证规则,或者控件对应验证规则显示不同的提示信息。</p>
          </div>
          
          <div class="example">
            <form id="formID" class="formular" method="post">
              <fieldset>
                <legend>必填项</legend>
                <label>给验证规则定义错误信息("required"):</label>
                <input value="" data-validation-engine="validate[required]" class="text-input" type="text" name="req" id="req" />
                
                <label>给 ID 配验证规则定义错误信息("#number"):</label>
                <input value="0" data-validation-engine="validate[required,min[1]]" data-validation-placeholder="This is a placeholder" class="text-input" type="number" name="reqplaceholder" id="number" />
                <label>给 Class 配验证规则定义错误信息(".class_req"):</label>
                <input value="" data-validation-engine="validate[required]" class="class_req text-input" type="text" name="class_req"  />
              </fieldset>
                
              <fieldset>
                <legend>Custom</legend>
                <label>综合自定义错误信息:</label>
                <input value="http://" data-validation-engine="validate[required,custom[url]]" class="class_url text-input" type="text" name="url" id="url" />
              </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({
        'custom_error_messages': {
          // Custom Error Messages for Validation Types
          'required': {
            'message': '这里必须填写啦!'
          }
          ,'custom[url]': {
            'message': '这个错误信息不会被调用哦,因为下面有更高级的覆盖了我呢!'
          }
          // Custom Error Messages for IDs
          ,'#url' : {
            'custom[url]': {
              'message': '这里要填写网址哦!(优先取选择器和验证规则的提示内容)'
            }
          }
          ,'#number': {
            'min': {
              'message': '这个数值……我不能接受'
            }
          }
          // Custom Error Messages for Classes
          ,'.class_url': {
            'custom[url]': {
              'message': '这个错误信息不会被调用,因为它是使用 class 的选择器,' +
                  '而当前存在更高级的 id 选择器。'
            }
          }
          ,'.class_req': {
            'required': {
              'message': '必填(这是使用 class 选择器定义的,它的优先级要比规则的高)'
            }
          }
        }
      });
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    Promise简单使用,需要在ES6以上
    uni-app条件编译:#ifdef #ifndef #endif
    js获取年月日
    js验证手机号、身份证等
    json.stringify()与json.parse()
    Vuex基本使用的总结--转载
    ...mapMutations前面的三个点什么意思
    制作缩略图、远程缩略图
    node整个环境的启动
    redis命令
  • 原文地址:https://www.cnblogs.com/bksqmy/p/4568348.html
Copyright © 2020-2023  润新知