Question

Blockquote

我有一个带有多个瀑布对话框的聊天机器人，其中一个使用自适应卡来显示获取输入的表单，并且它是使用SDK V4模板在C＃中使用MS Bot框架开发的，并且通道是WebChannel，因此HTML是在后端用于机器人工作

<!DOCTYPE html>
<html lang="en-US">
<head>
    <title>Web Chat: Full-featured bundle with ES5 polyfills</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--
      For demonstration purposes, we are using the development branch of Web Chat at "/master/webchat.js".
      When you are using Web Chat for production, you should use the latest stable release at "/latest/webchat.js",
      or lock down on a specific version with the following format: "/4.1.0/webchat.js".
    -->
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat-es5.js"></script>
    <style>
        html, body {
            height: 100%
        }

        body {
            margin: 0
        }

        #webchat {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="webchat" role="main">

    </div>
    <script>
        const token = 's7W';

        const styleOptions = {
            botAvatarImage: '',
            botAvatarInitials: 'BF',
            userAvatarImage: '',
            userAvatarInitials: 'WC',
            bubbleBackground: 'rgba(0, 0, 255, .1)',
            bubbleFromUserBackground: 'rgba(0, 255, 0, .1)'
        };
        var d = new Date();
        var tzoffset = d.getTimezoneOffset();
        const store = window.WebChat.createStore(
            {},
            function (_ref) {
                const dispatch = _ref.dispatch;
                return function (next) {
                    return function (action) {
                        if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                            dispatch({
                                type: 'WEB_CHAT/SEND_EVENT',
                                payload: {
                                    name: 'webchat/join',
                                    value: tzoffset.toString()
                                }
                            });
                        }
                        return next(action);
                    };
                };
            });

        window.WebChat.renderWebChat({
            directLine: window.WebChat.createDirectLine({ token: token }),
            styleOptions: styleOptions,
            store: store,
            webSpeechPonyfillFactory: window.WebChat.createBrowserWebSpeechPonyfillFactory()
        }, document.getElementById('webchat'));
        document.querySelector('#webchat > *').focus();
    </script>
</body>
</html>

在浏览器或网络频道中

。

我的查询是：

我想在自适应卡中保留以下条件：

检查必填字段值，
根据下拉菜单中选择的特定值显示容器
如何使用REGEX检查电子邮件值是否有效
提供了如何检查给定容器中的值（基于下拉菜单中选择的值显示），即强制性值验证？

我认为这必须通过使用JavaScript来完成，该JavaScript应该嵌入在背面的HTML页面中，但问题是我不确定如何？因为我是JavaScript的新手。

请逐步提供详细信息或以指导的方式帮助我解决查询或问题，因为我对javascript和es5捆绑包非常熟悉。

我随附了指向ChatBot的当前HTML文件，以供参考，其中我使用了几行HTML脚本或其他一些东西，借助Web以及我以前使用es5软件包在ChatBot上遇到的一些问题。

为清晰起见更新查询：

我有一个带有以下容器的自适应卡：

容器1：几乎不需要填写文本输入
容器2：很少选中复选框
容器3：一个下拉菜单，其中有1、2或两者都可以选择
容器4：很少有其他文本框可供输入
最后：所有容器外侧的提交按钮

我的查询如下：

如果在容器3的下拉菜单中选择2或两者作为选项，则仅显示容器4。如果选择1，则应禁用或隐藏容器4。是否可以通过JavaScript或C＃代码或任何其他设置来实现？如果是，那么如何处理，请逐步详细解释，因为我对编码非常陌生？
我们是否可以在提交自适应卡中的数据时进行强制性值验证，即按照我上面修改的说明，如果我在没有输入容器1中提供的文本输入的情况下单击“提交”，我应该会弹出或没有提供强制值的任何可能的错误消息？是否可以通过自适应卡中的一些JavaScript或C＃来实现（如果可以的话），请逐步详细解释，因为我对编码非常陌生？
电子邮件的文本输入之一是如何对电子邮件输入进行验证，其中用户可以提供多个用分号（;）分隔的电子邮件，但该值应采用正确的电子邮件格式，例如john.doe@gy.com。我们如何在自适应卡中提供这种验证？

Answer 1

使用自适应卡的内置功能，您所要求的一切都无法在客户端实现。如果您不想使用自己的Adaptive Cards渲染器来构建自己的Direct Line客户端（这将非常困难），那么您要么必须对解决方法感到满意，要么必须重新考虑设计规范。您实际上并没有提供带有JSON或屏幕截图的相关卡片草稿，因此我有点盲目。

如果在容器3的下拉菜单中选择2或两者作为选项，则仅显示容器4。如果选择1，则应禁用或隐藏容器4。是否可以通过JavaScript或C＃代码或任何其他设置来实现？

这里的常规解决方案是只使用多张卡。等到用户从“容器3”中选择一个选项，然后将该信息发送给机器人，然后机器人可以根据用户选择的内容发送下一张卡。

或者，您可以放弃容器3并根据他们填写卡的哪些部分来推断用户的选择。您也许可以将容器4放在ShowCard action中以表明它是可选的。

我们可以在提交自适应卡中的数据时进行强制性值验证吗，即按照我上面修改的解释，如果我在没有输入容器1中提供的文本输入的情况下单击“提交”，则我应该弹出窗口或任何形式的错误消息可能未提供必需值？

。。

电子邮件的文本输入之一是如何对电子邮件输入进行验证，其中用户可以提供多个以分号（;）分隔的电子邮件，但该值应采用正确的电子邮件格式，例如john.doe@gy.com。我们如何在自适应卡中提供这种验证？

同样，除非在客户端上构建自己的客户端，否则这不可能在客户端实现，尽管这可以在机器人端实现。当您的漫游器从自适应卡获得用户的响应时，该漫游器可以对其进行验证，然后仅向用户发送一条消息，说明出了什么问题并要求他们重试。 Eventually there will be packages to help you with this，与此同时，您可以查看this DCR，以获取可以做的事的示例。您可能也有兴趣阅读my latest blog post，以了解更多信息。

如何在使用C＃的Microsoft Bot Framework SDK V4开发的ChatBot中添加带有自适应卡的条件？

1 个答案: