输入值验证插件的作成范例

cybozu发表于:2016年11月25日 14:22:11更新于:2019年11月19日 12:51:58

概要

关于开发插件所需的文件以及插件的打包方法请参考kintone插件开发流程

本次基于“检查客户列表的邮编、电话、电子邮件的输入”(日文)的JavaScript范例,向大家介绍插件的做成方法。

步骤0.准备插件用的应用

选择添付文件里的“客户列表.zip”,然后导入到kintone里。导入模板的方法,可参考这篇文章。

001583fd9171cabd816fe1bcba3f040

步骤1.准备做成插件所需的文件

根据kintone 插件开发流程,我们来作成文件。

图标文件

使用画图软件作成下面这样的图标文件。

文件名叫“check.png”。

PC端专用JavaScript文件

参考范例作成PC端专用avaScript文件。

要点

  • 要对输入值进行检查的字段信息使用的是:用户在插件设置页面上设置的信息。

  • 插件的设置信息用kintone.plugin.app.getConfig()获取。

/*    
* checkvalue Plug-in    
* Copyright (c) 2017 Cybozu    
*    
* Licensed under the MIT License    
*/    
(function(PLUGIN_ID) {    
    'use strict'; 
       
    // 输入模式    
    var MODE_ON = '1'; // 更改后进行检查   
     
    // 用于读取设置值的函数    
    var CONFIG = kintone.plugin.app.getConfig(PLUGIN_ID);    
    // 读取设置值    
    if (!CONFIG) {    
        return false;    
    }    
    
    var CONFIG_ZIP = CONFIG.zip;    
    var CONFIG_TEL = CONFIG.tel;    
    var CONFIG_FAX = CONFIG.fax;    
    var CONFIG_MAIL = CONFIG.mail;  
      
    // 更改后进行检查:1、 未检查:0    
    var MODE_CONFIG = CONFIG.mode;  
      
    // 邮政编码输入检查    
    function zipCheck(event) {    
        // 邮政编码的定义(6位半角数字)    
        var zip_pattern = /^\d{6}$/;    
        // 从event获取记录信息    
        var rec = event.record;    
        // 错误初始化    
        rec[CONFIG_ZIP].error = null;    
        // 输入邮政编码后,确认输入值    
        var zip_value = rec[CONFIG_ZIP].value;    
        if (zip_value) {    
            if (zip_value.length > 0) {    
                // 确认是否符合定义的模式 
                if (!(zip_value.match(zip_pattern))) {    
                    // 如果不符合,邮政编码字段显示错误内容    
                    rec[CONFIG_ZIP].error = '邮政编码请输入6位半角数字。';    
                }    
            }    
        }    
    }  
   
    // 电话号码的输入检查 
    function telCheck(event) {    
        // TEL的定义(8位或11位半角数字)    
        var tel_pattern = /^\d{8,11}$/;    
        // 从event获取记录信息    
        var rec = event.record;    
        // 错误的初始化    
        rec[CONFIG_TEL].error = null;
        
        // 输入TEL时,检查输入值    
        var tel_value = rec[CONFIG_TEL].value;    
        if (tel_value) {    
            if (tel_value.length > 0) {    
                //确认是否符合定义的模式  
                if (!(tel_value.match(tel_pattern))) {    
                    // 如果不符合,对TEL报错误信息    
                    rec[CONFIG_TEL].error = '电话号码请输入8位或11位半角数字。';    
                }    
            }    
        }    
    }    
    
    // FAX的输入检查    
    function faxCheck(event) {    
        // FAX的定义(8位半角数字)    
        var fax_pattern = /^\d{8}$/;    
        // 从event获取记录信息    
        var rec = event.record;    
        // 错误初始化    
        rec[CONFIG_FAX].error = null;    
        // 输入FAX时,确认输入值    
        var fax_value = rec[CONFIG_FAX].value;    
        if (fax_value) {    
            if (fax_value.length > 0) {    
                //确认是否符合定义的模式    
                if (!(fax_value.match(fax_pattern))) {    
                    // 不符合时,对FAX报错误信息    
                    rec[CONFIG_FAX].error = 'FAX号码请输入8位半角数字。';    
                }    
            }    
        }    
    }   
     
    // 检查邮箱地址    
    function mailCheck(event) {    
        // 邮箱地址的定义 (这里是简单的定义,如果需要更加详细的定义,请更改以下值)    
        var mail_pattern = /^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/;    
        // 从event获取记录信息    
        var rec = event.record;    
        // 错误初始化    
        rec[CONFIG_MAIL].error = null;    
        // 由输入邮件地址输入时,确认输入值    
        var mail_value = rec[CONFIG_MAIL].value;    
        if (mail_value) {    
            if (mail_value.length > 0) {    
                // 确认是否符合定义的模式    
                if (!(mail_value.match(mail_pattern))) {    
                    // 如果不符合,对邮箱地址报错    
                    rec[CONFIG_MAIL].error = '不符合邮箱地址格式,请确认输入内容。';    
                }    
            }    
        }    
    }  
      
    // 在添加或更新事件触发时(新增记录、编辑记录、列表上的编辑记录)    
    kintone.events.on(['app.record.create.submit',    
    'app.record.edit.submit',    
    'app.record.index.edit.submit'], function(event) {    
        zipCheck(event);    
        telCheck(event);    
        faxCheck(event);    
        mailCheck(event);    
        return event;    
    });    
    
    // 更改事件(邮政编码)    
    kintone.events.on(['app.record.create.change.' + CONFIG_ZIP,    
        'app.record.edit.change.' + CONFIG_ZIP,    
        'app.record.index.edit.change.' + CONFIG_ZIP    
    ], function(event) {    
        if (MODE_CONFIG === MODE_ON) {    
            zipCheck(event);    
        }    
        return event;    
    });    
    
    // 更改事件(电话号码)    
    kintone.events.on(['app.record.create.change.' + CONFIG_TEL,    
        'app.record.edit.change.' + CONFIG_TEL,    
        'app.record.index.edit.change.' + CONFIG_TEL    
    ], function(event) {    
        if (MODE_CONFIG === MODE_ON) {    
            telCheck(event);    
        }    
        return event;    
    }); 
       
    // 更改事件(FAX)    
    kintone.events.on(['app.record.create.change.' + CONFIG_FAX,    
        'app.record.edit.change.' + CONFIG_FAX,    
        'app.record.index.edit.change.' + CONFIG_FAX    
    ], function(event) {    
        if (MODE_CONFIG === MODE_ON) {    
            faxCheck(event);    
        }    
        return event;    
    }); 
       
    // 更改事件(Mail)    
    kintone.events.on(['app.record.create.change.' + CONFIG_MAIL,    
        'app.record.edit.change.' + CONFIG_MAIL,    
        'app.record.index.edit.change.' + CONFIG_MAIL    
    ], function(event) {    
        if (MODE_CONFIG === MODE_ON) {    
            mailCheck(event);    
        }    
        return event;    
    });    
})(kintone.$PLUGIN_ID);

check_sample.js,文字编码设为UTF-8,保存。

PC端专用CSS文件

本次省略。

智能手机端专用JavaScript文件

本次省略。

用于设置页面的HTML文件

这次我们将创建一个用于设置页面的HTML文件。
本插件可对“邮政编码”、“电话”、“传真”、“电子邮件”这4个字段的输入值进行检查。
您可在插件的设置页面的下拉框中选择分别要对哪些字段进行检查。
关于下拉框的选项,假设在稍后用于设置页面的JavaScript中进行添加。

要点

  • 用于设置页面的HTML可以只有正文(body)内容。

<!--    
  * checkvalue Plug-in    
  * Copyright (c) 2017 Cybozu    
  *    
  * Licensed under the MIT License    
-->    
<div>    
  <div class="block">    
    <label class="kintoneplugin-label">    
      <span class="container_label">更改值时输入检查</span>    
    </label>    
    <div class="kintoneplugin-row"></div>    
    <div class="kintoneplugin-input-checkbox">    
      <span class="kintoneplugin-input-checkbox-item">    
        <input type="checkbox" name="checkbox" value="1" id="check-plugin-change_mode" checked="false">    
        <label for="check-plugin-change_mode">更改值时如需要检查,请勾选。</label>    
      </span>    
    </div>    
  </div>    
  <div class="block">    
    <label class="kintoneplugin-label">    
      <span class="container_label">需要检查邮政编码的字段</span>    
      <span class="kintoneplugin-require">*</span>    
    </label>    
    <div class="kintoneplugin-row">选择需要检查邮政编码的字段。</div>    
    <div class="kintoneplugin-select-outer">    
      <div class="kintoneplugin-select">    
        <select id="select_checkvalue_field_zip" name="select_checkvalue_field_zip">    
            <option value="">-----</option>    
        </select>    
      </div>    
    </div>    
  </div>    
  <div class="block">    
    <label class="kintoneplugin-label">    
      <span class="container_label">需要检查电话号码的字段</span>    
      <span class="kintoneplugin-require">*</span>    
    </label>    
    <div class="kintoneplugin-row">选择需要检查电话号码的字段。</div>    
    <div class="kintoneplugin-select-outer">    
      <div class="kintoneplugin-select">    
        <select id="select_checkvalue_field_tel" name="select_checkvalue_field_tel">    
          <option value="">-----</option>    
        </select>    
      </div>    
    </div>    
  </div>    
  <div class="block">    
    <label class="kintoneplugin-label">    
      <span class="container_label">需要检查传真号码的字段</span>    
      <span class="kintoneplugin-require">*</span>    
    </label>    
    <div class="kintoneplugin-row">选择需要检查传真号码的字段</div>    
    <div class="kintoneplugin-select-outer">    
      <div class="kintoneplugin-select">    
        <select id="select_checkvalue_field_fax" name="select_checkvalue_field_fax">    
          <option value="">-----</option>    
        </select>    
      </div>    
    </div>    
  </div>    
  <div class="block">    
    <label class="kintoneplugin-label">    
      <span class="container_label">需要检查邮箱地址的字段</span>    
      <span class="kintoneplugin-require">*</span>    
    </label>    
    <div class="kintoneplugin-row">选择需要检查邮箱地址的字段。</div>    
    <div class="kintoneplugin-select-outer">    
      <div class="kintoneplugin-select">    
        <select id="select_checkvalue_field_mail" name="select_checkvalue_field_mail">    
          <option value="">-----</option>    
        </select>    
      </div>    
    </div>    
  </div>    
  <div class="block">    
    <button type="button" id="check-plugin-submit" class="kintoneplugin-button-dialog-ok"> 保存 </button>    
    <button type="button" id="check-plugin-cancel" class="kintoneplugin-button-dialog-cancel"> 取消 </button>    
  </div>    
</div>

浏览器会像下面这样显示。

0015d969ea0204118ecec4a0bf5b28c

写完之后,以UTF-8的格式保存。文件名为“check_config.html"。

用于设置页面的JavaScript文件

创建用于设置页面的JavaScript文件。
在插件设置页面中,执行以下处理。

  • 已有设置值的情况下,就设置字段值。

  • 获取字段信息,加入下拉列表中。

  • 点击 “保存” 按钮时,如有空字段,会显示警告。

  • 点击 “保存” 按钮时,将设置的值保存到变量中。将该画面中输入的信息保存到插件设置信息中。

  • 点击 “取消” 按钮时,返回上一个页面。

要点

  • 使用kintone.plugin.app.getConfig()获取插件的设置信息。

  • 使用kintone.plugin.app.setConfig()将设置页面上设置的信息保存到插件设置信息中。

  • 使用可获取表单设计信息的库“kintone-config-helper”(kintone-config-helper.js),获取应用表单里的字段信息。关于kintone-config-helper,请参考此处(中文页面准备中)。

  • 此插件使用了JQuery函数。

  • 为了避免和其他的插件或者其他的JavaScript自定义相冲突,我们建议写上 jQuery.noConfilict(); 

/*
 * checkvalue Plug-in
 * Copyright (c) 2017 Cybozu
 *
 * Licensed under the MIT License
 */
jQuery.noConflict();

(function($, PLUGIN_ID) {
  'use strict';

  // 插件ID的设置
  var KEY = PLUGIN_ID;
  var CONF = kintone.plugin.app.getConfig(KEY);
  // 输入模式
  var MODE_ON = '1'; // 更改后进行检查
  var MODE_OFF = '0'; // 更改后未进行检查
  function escapeHtml(htmlstr) {
    return htmlstr.replace(/&/g, '&').replace(//g, '>')
      .replace(/"/g, '"').replace(/'/g, ''');
  }

  function setDropdown() {
    // 获取字段类型为“单行文本框”和“数值”的字段信息,代入到选择框
    KintoneConfigHelper.getFields(['SINGLE_LINE_TEXT', 'NUMBER']).then(function(resp) {
      for (var i = 0; i < resp.length; i++) {
        var prop = resp[i];
        var $option = $('');

        $option.attr('value', escapeHtml(prop.code));
        $option.text(escapeHtml(prop.label));
        $('#select_checkvalue_field_zip').append($option.clone());
        $('#select_checkvalue_field_tel').append($option.clone());
        $('#select_checkvalue_field_fax').append($option.clone());
        $('#select_checkvalue_field_mail').append($option.clone());
      }
      // 设置初始值
      $('#select_checkvalue_field_zip').val(CONF.zip);
      $('#select_checkvalue_field_tel').val(CONF.tel);
      $('#select_checkvalue_field_fax').val(CONF.fax);
      $('#select_checkvalue_field_mail').val(CONF.mail);
    }).catch(function(err) {
      alert(err.message);
    });
  }

  $(document).ready(function() {

    // 如已有值,将值设置给字段
    if (CONF) {
      // 创建下拉列表
      setDropdown();
      $('#check-plugin-change_mode').prop('checked', false);
      // 有change事件
      if (CONF.mode === MODE_ON) {
        $('#check-plugin-change_mode').prop('checked', true);
      }
    }

    // 按“保存”按钮时设置输入值
    $('#check-plugin-submit').click(function() {
      var config = [];
      var zip = $('#select_checkvalue_field_zip').val();
      var tel = $('#select_checkvalue_field_tel').val();
      var fax = $('#select_checkvalue_field_fax').val();
      var mail = $('#select_checkvalue_field_mail').val();
      var mode = $('#check-plugin-change_mode').prop('checked');
      // 检查必填项
      if (zip === '' || tel === '' || fax === '' || mail === '') {
        alert('有必填项未填写');
        return;
      }
      config.zip = zip;
      config.tel = tel;
      config.fax = fax;
      config.mail = mail;
      // 检查重复
      var uniqueConfig = [zip, tel, fax, mail];
      var uniqueConfig2 = uniqueConfig.filter(function(value, index, self) {
        return self.indexOf(value) === index;
      });
      if (Object.keys(config).length !== uniqueConfig2.length) {
        alert('选项重复');
        return;
      }

      config.mode = MODE_OFF;
      if (mode) {
        config.mode = MODE_ON;
      }
      kintone.plugin.app.setConfig(config);
    });

    // 按“取消”按钮时的处理
    $('#check-plugin-cancel').click(function() {
      history.back();
    });
  });

})(jQuery, kintone.$PLUGIN_ID);

将作成的文件命名为“config.js”,文字编码设为UTF-8,保存。

用于设置页面的CSS文件

创建用于设置页面的CSS文件。
本插件的设置页面调整了各个项目之间间隔。
另外,按钮和标签的装饰使用的是“51-modern-default.css”里的类。详细可以参考样式表的使用

.block {   
  padding: 0 0 20px 0;
}

将作成的文件命名为“check_config.css”,文字编码设为UTF-8,保存。

步骤2.资源配置清单文件的作成

创建资源配置清单文件。

1.按如下图的目录结构保存做成的各文件。
※文件名和文件夹阶层可以自由创建。
0015d96b1a045a4b01775b06349698e

  • kintone-config-helper.js的获取方法
      ・访问Github,点击“Clone or download”下载zip文件。
          解压zip文件后,使用dist文件夹下的“kintone-config-helper.js”。

  • 51-modern-default.css的获取方法
      ・访问Github,点击“Clone or download”下载zip文件。
         解压zip文件后,使用stylesheet文件夹下的“51-modern-default.css”。

2.创建资源配置清单文件。

  • 请根据步骤1中的目录结构,在资源配置文件清单中填写各文件的目录。

  • 此插件使用了jQuery,因此请加载jQuery文件。
    本次使用的是Cybozu CDN,在资源配置清单文件的后面加上URL。

    {    
        "manifest_version": 1,    
        "version": 2,    
        "type": "APP",    
        "name": {    
            "ja": "入力値チェックプラグイン",    
            "en": "Input value check plug-in",    
            "zh": "输入值验证插件"    
        },    
        "description": {    
            "ja": "郵便番号、電話番号、FAX番号、メールアドレスの入力値をチェックするプラグインです。",    
            "en": "This plugin checks zip code, telephone number, FAX number, e-mail address.",    
            "zh": "该插件检查邮政编码、电话号码,传真号码、E-mail地址的输入值。"    
        },    
        "icon": "image/check.png",    
        "homepage_url": {    
            "ja": "https://developer.cybozu.io/hc/ja/articles/203501094",    
            "en": "https://developer.cybozu.io/hc/ja/articles/203501094",    
            "zh": "https://developer.cybozu.io/hc/ja/articles/203501094"    
        },    
        "desktop": {    
            "js": [    
                "js/check_sample.js"    
            ]    
        },    
        "config": {    
            "html": "html/check_config.html",    
            "js": [    
                "https://js.cybozu.com/jquery/1.11.1/jquery.min.js",    
                "js/kintone-config-helper.js",    
                "js/config.js"    
            ],    
            "css": [    
                "css/check_config.css",    
                "css/51-modern-default.css"    
            ],    
            "required_params": ["zip", "tel", "fax", "mail", "mode"]    
        }    
    }

3.做成的文件命名为“manifest.json”,文字编码设为UTF-8,保存。
本次保存在check_plugin目录下。
0015d96da997e7806861e72fcb59f6f

步骤3.打包

使用plugin-packer进行打包。

关于plugin-packer的安装方法和工具的详情,请参考用plugin-packer打包插件文件

  1. 如未下载plugin-packer,请执行以下命令。

    $ npm install -g @kintone/plugin-packer
  2. 移到check_plugin目录的上一级目录,比如这里的上一级目录为work

    $ cd work
  3. 执行以下命令,会自动打包。成功时显示以下信息。

    $ kintone-plugin-packer check_plugin    
    Succeeded: DIRECTORY_PATH/work/plugin.zip
  4. 将在check_plugin目录下生成插件文件 (plugin.zip) 和密钥文件 (ppk文件) 。
    密钥文件名的“hkfgjeehkaajnbmfojmpbgcpfalbfhjn”为插件ID。该值是由插件随机生成的唯一值。
    0015d9be888463b0f5a89237bc58fd7

步骤4.导入和动作确认

 将生成的 "plugin.zip" 导入到步骤0中创建的应用中。

  1. 将插件文件导入到kintone。
    打开“业务云系统管理”下的“插件”

  2. 点击 “导入”。

    00158414128bb8d3de5c1272df8cfb2

  3. 选择刚才做成的 “plugin.zip”,点击“导入”按钮 。
    这样就把插件导入到kintone了。

    00158414b55a3c051ea0c8d12dccdb9

  4. 将其应用到之前的 “客户列表” 应用里。
    在“客户列表”应用中,点击“应用的设置”,然后点击“插件”。

  5. 点击“添加插件”。
    0015d9aa424b78cacc0f2dc9310615d

  6. 勾选要添加的插件,然后点击“添加”。
    这样,插件就添加到应用了。

    0015d9aa547b4332593a4337b2adf4d

  7. 在设置页面里设置插件。
    点击齿轮,将显示输入值校验插件的设置页面。
    0015d9aa5620556b2d324a6b9cc4d9e

  8. 设置于需要检查输入值的字段。
    设置完成后,点击“保存”按钮,设置就完成了。
    0015d9aa659057f5785e5c2b692cdb3

  9. 来确认以下应用的运行情况吧。
    确实可以跟检查客户列表的邮编、电话、电子邮件的输入一样,进行处理吧。
    0015d9ab9aec4a09b54b2034a048efe

范例

这次作成的 “检查输入值” 插件有在下面的链接里公开。

检查输入值插件(范例)

最后

以上,以“检查客户列表的邮编、电话、电子邮件的输入(日语)”为例,介绍了如何做成插件。

  • 本次插件的要点总结如下。
    设置页面上
    ・使用读取应用表单设计信息的工具库(kintone-config-helper)来获取需要检查输入值的字段。
    ・在此页面中选择的需要进行输入值验证的字段将保存到插件的设置信息里。

  • 自定义文件(本次是PC专用JavaScript文件)中读入插件的设置信息

您不妨试着参考本文章把其他的自定义范例做成插件看看。

此文章在2019年2月版的kintone中确认过。

附件:客户列表.zip • 2.54KB • 下载

回复(2)

  • betsy_yan

    你好,打包规则已经更新了,你可以参考以下内容:

    https://developer.cybozu.io/hc/ja/articles/360000910783#step6

    https://developer.cybozu.io/hc/ja/articles/360000975763

    我们会及时更新中文网站,敬请期待。

    引用 closer 的回复:

    keys/   - check_plugin.hkfgjeehkaajnbmfojmpbgcpfalbfhjn.ppk //密钥文件 plugins/   /hkfgjeehkaajnbmfojmpbgcpfalbfhjn   - plugin.zip //打包好的文件请问,最后那个打包好的文件,没有出现是为什么,前面都是按照步骤做的

  • closer
    keys/
      - check_plugin.hkfgjeehkaajnbmfojmpbgcpfalbfhjn.ppk //密钥文件
    plugins/
      /hkfgjeehkaajnbmfojmpbgcpfalbfhjn
      - plugin.zip //打包好的文件

    请问,最后那个打包好的文件,没有出现是为什么,前面都是按照步骤做的

注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
您需要登录后才可以回复