convForm
1.0.0
我把这个作为一个副项目开始，它变成了现实，许多人看到了它的不同用途，其用途与它最初的用途完全不同。我可能会在不确定的未来某个时候从头开始重新做这件事以实现这些可能性，但目前我没有足够的时间来处理这个问题，抱歉。如果您想提供任何帮助，请随时打开拉取请求。
一个将表单转换为交互式聊天的插件。
特征：
要构建聊天，只需将表单包装在元素内，然后在其 jquery 选择器上调用 .convform() 即可。
例子：
$ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( ) ;
} ) ;为了让插件知道要问哪个问题，每个输入和选择都必须有一个 data-conv-question 属性。例子：
< select data-conv-question =" Hello! I'm a bot created from a HTML form. Can I show you some features? " >
< option value =" yes " > Yes option >
< option value =" sure " > Sure! option >
select >如果需要，您可以使用管道 | 为每个标签编写多个问题。将他们分开。每次生成聊天时，该插件都会随机选择一个来使用。例子：
< input type =" text " name =" name " data-conv-question =" Alright! First, tell me your full name, please.|Okay! Please, tell me your name first. " >您可以在输入上使用正则表达式模式，只需在标签上使用 data-pattern 属性即可。当用户输入答案时，如果不符合模式，则无法发送答案并且输入颜色变为红色。例子：
< input data-conv-question =" Type in your e-mail " data-pattern =" ^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$ " type =" email " name =" email " >您可以分叉对话并根据用户的回答提出特定问题。这只在从选择中分叉时才有效。
为此，您需要在要从中分叉对话的问题后面放置一个 div 标签，并使用带有选择名称的 data-conv-fork 标签。
在该 div 内，您需要创建带有 data-conv-case 属性的 div 标签，引用将对话分叉到其子元素的答案。
< select name =" programmer " data-conv-question =" So, are you a programmer? (this question will fork the conversation based on your answer) " >
< option value =" yes " > Yes option >
< option value =" no " > No option >
select >
< div data-conv-fork =" programmer " >
< div data-conv-case =" yes " >
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >
div >
< div data-conv-case =" no " >
< select name =" thought " data-conv-question =" Have you ever thought about learning? Programming is fun! " >
< option value =" yes " > Yes option >
< option value =" no " > No.. option >
select >
div >
div >要使用用户对问题的回答，您可以在 data-conv-question 标记内使用 {inputname}，其中 inputname 引用您需要答案的问题。如果需要，您可以使用：选择器（0 索引）从答案中获取特定单词。例如，当您需要用户的名字时，可以使用 {name}:0，插件将从“name”问题的答案中获取第一个单词。例子：
< input type =" text " data-conv-question =" Howdy, {name}:0! It's a pleasure to meet you. How's your day? " >您可以将消息放入聊天流程中。这些问题不需要用户给出任何答案，因此插件将立即继续下一个问题。为此，请在输入标记上放置 data-no-answer="true" 属性。例子：
< input type =" text " data-conv-question =" A fellow programmer! Cool. " data-no-answer =" true " >您可以使用自定义函数，当用户单击选择的答案时或在问题结束时调用（如果问题需要答案，则将在用户输入后调用回调。如果没有，则回调打印消息后将被调用。）。为此，只需将要调用的函数的名称放在选项标签的“data-callback”属性中，或者放在输入标签中：
< select data-conv-question =" Selects also support callback functions. For example, try one of these: " >
< option value =" google " data-callback =" google " > Google option >
< option value =" bing " data-callback =" bing " > Bing option >
select >
< script >
function google ( stateWrapper , ready ) {
window . open ( "https://google.com" ) ;
ready ( ) ;
}
function bing ( stateWrapper , ready ) {
window . open ( "https://bing.com" ) ;
ready ( ) ;
}
script >使用参数stateWrapper和回调函数ready调用回调函数。状态包装器是 convForm 对象，ready 是您必须调用才能继续下一个问题的函数。
您可以将选项对象作为参数添加到 convForm 函数，其中包含：
placeHolder ：您希望出现在用户输入中的占位符typeInputUi : 'input' 或 'textarea'，选择用作用户输入的 html 元素的类型timeOutFirstQuestion ：第一个问题之前加载动画的持续时间（以毫秒为单位）buttonClassStyle ：用户提交答案按钮的类eventList ：一个对象，具有在特定时间调用的函数，目前唯一支持的是onSubmitForm （以 convState 作为参数调用函数）和onInputSubmit （以 convState 作为第一个参数调用函数，以及一个就绪的回调函数打印下一个问题作为第二个参数）formIdName : 表单的 html idinputIdName : 用户输入的 html idloadSpinnerVisible ：loadSpinner 的类selectInputStyle ： show （默认）、 disable或hide - 告诉插件当问题是select时如何处理输入字段。selectInputDisabledText ：当selectInputStyle设置为disable时，在选择问题的输入上显示的文本。 $ ( function ( ) {
var convForm = $ ( '.my-conv-form-wrapper' ) . convform ( {
eventList : {
onSubmitForm : function ( convState ) {
console . log ( 'The form is being submitted!' ) ;
convState . form . submit ( ) ;
}
}
} ) ;
} ) ;请注意，回调函数是在onInputSubmit函数内部调用的。如果您要更改此事件函数，则不需要在 HTML 标记中使用回调函数，但如果由于某种原因确实需要它们，请务必在此处使用window[convState.current.input.callback](convState, readyCallback);调用它们window[convState.current.input.callback](convState, readyCallback);
