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

cybozu发表于:2016年11月25日 14:22:11更新于:2019年02月01日 10:47:01

概要

范例的目录里有“检查客户列表的邮编、电话、电子邮件的输入”的JavaScript范例,这次我们将为大家介绍将这个范例作成插件的方法。

准备插件用的应用

由于要创建的插件和范例做的是相同的处理,所以我们也将使用客户列表的应用。

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

001583fd9171cabd816fe1bcba3f040

各文件的作成

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

图标文件  

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

文件名叫“check.png”。

设置页面用HTML

这次我们将作成一个设置页面,可设置“邮编”、“电话”、“传真”、“电子邮件”这4个字段的字段代码。关于设置部分,我们设想在后面的设置页面用JavaScript中作成可显示候补下拉框的处理。
设置页面用的HTML只写body的内容也是没问题的。

<div>  
  <div class="block">
    <label class="kintoneplugin-label">
    <span id ="container_label">检查邮编的字段</span>
    <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">请输入检查邮编字段的字段代码。</div>
     <div class="kintoneplugin-input-outer"> 
      <input id ="post_code" class="kintoneplugin-input-text"></input>
     </div>
  </div>
  <div class="block">
    <label class="kintoneplugin-label">
    <span id ="container_label">检查电话号码的字段</span>
    <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">请输入检查电话号码的字段代码。</div>
     <div class="kintoneplugin-input-outer"> 
      <input id ="phone_code" class="kintoneplugin-input-text"></input>
     </div>
  </div>
  <div class="block">
    <label class="kintoneplugin-label">
    <span id ="container_label">检查传真号码的字段</span>
    <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">请输入检查传真号码的字段代码。</div>
     <div class="kintoneplugin-input-outer"> 
      <input id ="fax_code"  class="kintoneplugin-input-text"></input>
     </div>
  </div>
  <div class="block">
    <label class="kintoneplugin-label">
    <span id ="container_label">检查电子邮件的字段</span>
    <span class="kintoneplugin-require">*</span>
    </label>
    <div class="kintoneplugin-row">请输入检查电子邮件的字段代码。</div>
     <div class="kintoneplugin-input-outer"> 
      <input id ="mail_code" class="kintoneplugin-input-text"></input>
     </div>
  </div>
  <div class="block">
    <button type="button" id="submit" class="kintoneplugin-button-dialog-ok">     保存     </button>
    <button type="button" id="cancel" class="kintoneplugin-button-dialog-cancel">     取消   </button>
  </div>
</div>



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

001583ff3e0e508605babde5ae6d541

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

设置页面用JavaScript文件

下面是这次要加在设置页面里的处理。

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

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

  • 点击 “保存” 按钮的时候,将设置的值保存到变量里。

  • 点击 “取消” 按钮的时候,回到之前的页面。

※因为加载了jQuery的文件,所以我们可以使用jQuery的函数。
※要获取插件ID,可以使用 kintone.plugin.app.getConfig()
※要保存设置值,可以使用 kintone.plugin.app.setConfig()
※为了避免和其他的插件或者其他的JavaScript自定义相冲突,我们推荐写上 jQuery.noConfilict();

jQuery.noConflict();
(function($, PLUGIN_ID) {
    "use strict";
    // 设置插件ID
    var conf = kintone.plugin.app.getConfig(PLUGIN_ID);
    //已经有设定值的情况下,就显示字段的值
    if (conf) {
        $('#post_code').val(conf['zip']);
        $('#phone_code').val(conf['tel']);
        $('#fax_code').val(conf['fax']);
        $('#mail_code').val(conf['mail']);
    }
    //点击 “保存” 按钮的时候,设置输入信息
    $('#submit').click(function() {
        var config = [];
        var post = $('#post_code').val();
        var phone = $('#phone_code').val();
        var fax = $('#fax_code').val();
        var mail = $('#mail_code').val();
        if (post == "" || phone == "" || fax == "" || mail == "") {
            alert("必填项没有填");
            return;
        }
        config['zip'] = post;
        config['tel'] = phone;
        config['fax'] = fax;
        config['mail'] = mail;
        kintone.plugin.app.setConfig(config);
    });
    //点击 “取消” 按钮的时候的处理
    $('#cancel').click(function() {
        history.back();
    });
})(jQuery, kintone.$PLUGIN_ID);



对下拉菜单等的设置值进行设置的时候,需要在这个页面执行kintone.api以获取字段信息。本次因为要设置值的字段都是输入框,所以不需要此处理。
将作成的文件命名为“
config.js”,文字编码设为UTF-8,保存。

设置页面用CSS文件

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

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

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

PC端专用JavaScript文件

参考范例作成的JavaScript文件。要点是,使用从设置页面那里获取的值,对输入的值进行的检查的地方。

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

jQuery.noConflict();
(function(PLUGIN_ID) {
    "use strict";
    // 在记录保存前,对电话、传真、邮编、电子邮件的输入值进行检查
    function checkValue(event) {
        //设定值的变量
        var config = kintone.plugin.app.getConfig(PLUGIN_ID);
        //取出设定值并赋值
        if (!config) {
            return false;
        }
        var record = event.record;
        var zip_value = record[config["zip"]]["value"];
        var tel_value = record[config["tel"]]["value"];
        var fax_value = record[config["fax"]]["value"];
        var mail_value = record[config["mail"]]["value"];
        // 邮编的定义(6位的半角数字)
        var zip_pattern = /^\d{6}$/;
        // 电话, 传真的定义(8位的半角数字)
        var telfax_pattern = /^\d{8}$/;
        // 电子邮件的定义 (简单的定义。想要更详细的定义的话,请改变下面的值)
        var mail_pattern = /^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/;
        // 如果有邮编输入的话,检查输入值。
        if (zip_value !== undefined) {
            if (zip_value.length > 0) {
                // 确认是否符合定义的模式
                if (!(zip_value.match(zip_pattern))) {
                    // 不符合的话,在邮编字段里显示错误内容。
                    record['Zipcode']['error'] = '请输入6位的半角数字';
                }
            }
        }
        // 如果有电话号码输入的话,检查输入值。
        if (tel_value !== undefined) {
            if (tel_value.length > 0) {
                // 确认是否符合定义的模式
                if (!(tel_value.match(telfax_pattern))) {
                    // 不符合的话,在电话号码字段里显示错误
                    record['TEL']['error'] = '请输入8位的半角数字';
                }
            }
        }
        // 如果有传真号码输入的话,检查输入值。
        if (fax_value !== undefined) {
            if (fax_value.length > 0) {
                // 确认是否符合定义的模式
                if (!(fax_value.match(telfax_pattern))) {
                    // 不符合的话,在传真号码字段里显示错误
                    record['FAX']['error'] = '请输入8位的半角数字';
                }
            }
        }
        // 如果有电子邮件输入的话,检查输入值
        if (mail_value !== undefined) {
            if (mail_value.length > 0) {
                // 确认是否符合定义的模式
                if (!(mail_value.match(mail_pattern))) {
                    // 不符合的话,在电子邮件字段里显示错误
                    record['Mail']['error'] = '无法识别该电子邮件。请确认一下输入的值。';
                }
            }
        }
        // return event。
        // 当有错误的时候,取消保存,在详细页面里显示错误信息。
        // 当没有错误的时候,执行保存动作。
        return event;
    }
    // 添加・更新事件(添加记录、编辑记录、列表上编辑记录)
    kintone.events.on(['app.record.create.submit',
                       'app.record.edit.submit',
                       'app.record.index.edit.submit'], checkValue);
})(kintone.$PLUGIN_ID, kintone.$PLUGIN_ID);



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

PC端专用CSS文件

可参考自定义视图的插件等,本次省略了。

智能手机端专用JavaScript文件

这次省略。

资源配置清单文件的作成

在创建资源配置清单文件前,先创建像下面这样阶层的文件夹,以便于放各个文件。除了要作成的文件以外,要需要加载jQuery文件,我们这次用Cybozu CDN,在资源配置清单文件的后面加上URL。除了创建的文件以外,并不限制如何创建阶层文件夹,大家可以自由的创建。

check_plugin/
 contents/
   -check_config.html
   -check.png
 desktop_js/
   -check_sample.js
 config_js/
   -config.js
 config_css/
   -check_config.css
   -51-current-default.css

接下来,让我们作成资源配置清单文件吧。

{
    "manifest_version": 1,
    "version": 1,
    "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": "contents/check.png",
    "homepage_url": {
        "ja": "https://cybozudev.zendesk.io",
        "en": "https://cybozudev.zendesk.io",
        "zh": "https://cybozudev.kf5.com"
    },
    "desktop": {
        "js": [
            "https://js.cybozu.com/jquery/1.11.1/jquery.min.js",
            "desktop_js/check_sample.js"
        ],
        "css": [
        ]
    },
    "config": {
        "html": "contents/check_config.html",
        "js": [
            "https://js.cybozu.com/jquery/1.11.1/jquery.min.js",
            "config_js/config.js"
        ],
        "css": [
            "config_css/check_config.css",
            "config_css/51-current-default.css"
        ],
        "required_params": ["zip", "tel","fax","mail"]
    }
}

将作成的文件命名为“manifest.json”,文字编码设为UTF-8,保存。
放在check_plugin文件夹下。

打包

我们这里在Windows环境里,使用cygwin来进行打包。将打包工具 “package.sh” 放在check_plugin文件夹的下面。
将下面的文件夹放在C盘的根目录下。

check_plugin/
 package.sh
 manifest.json
 contents/
   -check_config.html
   -check.png
 desktop_js/
   -check_sample.js
 config_js/
   -config.js
 config_css/
   -check_config.css
   -51-current-default.css

启动cygwin 软件,进入到 check_plugin 文件夹里。

$ cd /cygdrive/c/check_plugin

运行打包工具。在参数里,指定 manifest.json 所在的文件夹。因为是当前目录,所以指定 ./ 。

$ sh package.sh ./

成功以后,在下面的文件夹里,会创建新的文件夹和文件。插件ID “hkfgjeehkaajnbmfojmpbgcpfalbfhjn”, 是根据插件随机生成的值。

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

4.导入和动作确认

 将生成的 "plugin.zip" 导入到 业务云系统管理 > 插件 页面里。

点击 “导入”。

00158414128bb8d3de5c1272df8cfb2

 导入之前创建好的 “plugin.zip” 。

00158414b55a3c051ea0c8d12dccdb9

将其应用到之前的 “客户列表” 应用里。

00158414bc8102d56dd14cfabb5a1e7

在设置页面里设置必填项。

00158451a53bbb56fa8f747c78fa2d4

设置完成后,确认应用的运行情况。可以像范例一样,做同样的处理哦。
00158467382e2c68d12c34d7dd38336

5.范例

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

检查输入值插件(范例)

6.最后

JavaScript库有时候会发生冲突的情况。我们推荐在做的时候考虑到对其他插件的影响,要在README等中对库和版本进行明确的说明。


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

    您需要登录后才可以回复