帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:for  BASE  react  表单  validate  form  ext  COM  
Generate complex, validated and extendable JSON-based forms in React.

  • 源代码名称:Winterfell
  • 源代码网址:http://www.github.com/andrewhathaway/Winterfell
  • Winterfell源代码文档
  • Winterfell源代码下载
  • Git URL:
    git://www.github.com/andrewhathaway/Winterfell.git
  • Git Clone代码到本地:
    git clone http://www.github.com/andrewhathaway/Winterfell
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/andrewhathaway/Winterfell
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 生成复杂的。验证和扩展基于React的表单

    临冬城允许你通过一个JSON模式来构建复杂。多页面表单。带有条件问题。验证和条件页面切换的页面切换。

    冬冬最初是为一个需要大型复杂形式的项目做出的,这些问题会导致更多的问题。 具有易于编写的模式和高级别的定制,带来了巨大的力量。

    视图演示跟踪我在 Twitter 。

    用法

    首先通过 npm 安装 Winterfell

    $ npm install winterfell --save

    临冬城使用一个JSON模式来呈现你的表单。 我们以后再来。

    var Winterfell =require('winterfell');var schema =require('./schema');React.render(
     <Winterfell schema={schema} />,
     document.getElementById('form')
    );

    特性

    • 轻松,快速和可以扩展
    • JSON架构
    • 设计不可知和可以定制
    • 多页面窗体
    • 无穷递归条件问题
    • 条件页切换
    • 提交条件表单
    • 禁用常规提交
    • 即时表单验证
    • 确定每个字段的验证时间
    • 对其他字段值的验证
    • 预定义的验证类型
    • 预定义错误消息
    • 自定义验证类型
    • 自定义错误消息
    • 自定义错误呈现
    • 自定义所需的Asterisk 渲染
    • 自定义类
    • 自定义 InputTypes
    • 问题 pre 和post文本
    • 问题面板 header 和文本
    • 问题集 header 和文本
    • 禁用按钮的功能
    • 默认值
    • 事件

    架构

    模式由 formPanelsquestionPanelsquestionSets 三个主要部分组成。

    窗体面板

    初始 formPanels 条目被用作一个问题页面,或者在临冬城中使用 questionPanels

    {
     "formPanels": [
     {
     "index": 1,
     "panelId": "intro-panel" },
     {
     "index": 2,
     "panelId": "register-panel" },
     {
     "index": 3,
     "panelId": "final-panel" }
     ]
    }
    问题面板

    问题面板是关于一页问题的充实细节。 我们定义了该页上存在的questionSets,任何提交面板和按钮信息的条件。 你应该在上面的formPanels中定义的每个面板中都有一个。

    每个 questionPanel 都有一个 header 和一些文本的能力,它显示了 above的问题。 你可以通过 panelHeaderpanelText 字段来定义这些。

    支持的操作是 GOTOSUBMIT 。 使用 GOTO 时,target 可以是任意 questionPanelIdSUBMITtarget 放置到表单元素的操作字段中。

    {
     "questionPanels": [
     {
     "panelId": "intro-panel",
     "panelHeader": "A quick survey?",
     "panelText": "Please could you take a few minutes to fill out our survey?",
     "action": {
     "conditions": [
     {
     "questionId": "existing-user",
     "value": "no",
     "action": "GOTO",
     "target": "register-panel" }
     ],
     "default": {
     "action": "GOTO",
     "target": "final-panel" }
     },
     "button": {
     "text": "Next",
     "disabled": false },
     "": {
     "text": "Back",
     "disable": false },
     "questionSets": [
     {
     "index": 1,
     "questionSetId": "intro-set" }
     ]
     }
     ]
    }
    问题集

    问题集是一组问题。 在这里,你可以使用它们的验证。类型。条件 等等 conditionalQuestions 来定义问题,并按照预期。

    questionSet below 有一个带有 yesno 选项的初始单选按钮。 选择 yes 时,询问用户电子邮件地址的问题将呈现。

    每个问题都有一些与它关联的text,它可以在问题标签和一些 postText 中呈现问题,这些问题将被呈现在问题的输入。

    {
     "questionSets": [
     {
     "questionSetId": "intro-set",
     "questionSetHeader": "I am a question set header",
     "questionSetText": "I am a question set text",
     "questions": [
     {
     "questionId": "existing-user",
     "question": "Are you an existing user?",
     "text": "We'd just like to know so we can get you in the right place.",
     "input": {
     "type": "radioOptionsInput",
     "default": "yes",
     "options": [
     {
     "text": "Yes",
     "value": "yes",
     "conditionalQuestions": [
     {
     "questionId": "register-user-email",
     "question": "Please enter the email address your account is registered with",
     "postText": "We will not spam your email address.",
     "input": {
     "type": "emailInput",
     "placeholder": "Email Address" },
     "validateOn": "blur",
     "validations": [
     {
     "type": "isLength",
     "params": [
     1 ]
     }
     ]
     }
     ],
     "validations": [
     {
     "type": "isLength",
     "params": [
     1 ]
     }
     ]
     },
     {
     "text": "No",
     "value": "no",
     "conditionalQuestions": []
     }
     ]
     }
     }
     ]
     }
     ]
    }

    validateOn 属性用于指示什么时候验证字段。 这是 blur的默认值,这将导致在字段中的用户unfocusses被验证时被验证。 你还可以将该字段设置为 change,这将在用户键入字段或者更改它的答案时验证字段。 将 validateOn 设置为 SUBMIT 将导致在按下下一个或者提交按钮时进行验证的字段,只有。

    验证是通过上的封装来处理的。 在 validations 键项中,你可以设置字段的验证类型。 type 必须是验证程序包中的方法,或者是自定义定义的方法。

    验证项的params 键必须是验证方法的参数 array 。 值将为 array的起始值 on,并按顺序调用验证方法。 例如:

    值必须为 1的最小长度的验证项。

    {
     "type": "isLength",
     "params": [
     1 ]
    }

    值必须是最小长度 1和最大为 20的验证项。

    {
     "type": "isLength",
     "params": [
     1,
     20 ]
    }

    你还可以使用 message 属性为问题validaton项添加自定义错误消息。

    {
     "type": "isLength",
     "params": [
     1 ],
     "message": "Please select an option"}

    要根据另一个问题答案验证问题答案,可以以在 params 属性的参数周围包括大括号。 例如:

    {
     "type": "equals",
     "params": [
     "{password}" ],
     "message": "Confirm Password must match the Password field"}
    HTML类

    临冬城允许你在多个不同区域中定义呈现形式的类。 要使用它们,请将它们放在表单架构的root 中,如下所示:

    {
    "formPanels": [],
    "classes": {
    "form":"form-wrapping-class",
    "label":"question-label"
     }
    }

    table below 描述当前的类集合。

    类名称说明
    窗体表单元素本身
    questionPanels环绕活动 questionPanel的div
    questionPanel环绕活动 questionSets 和按钮栏的div
    questionPanelHeaderContainer环绕 questionPanels header 文本和文本的div
    questionPanelHeaderText保存 questionPanel header 文本的h3标记
    questionPanelText保存 questionPanel 文本的p 标记
    questionSetHeader保存 questionSet 标头的h4标记
    questionSetText保存 questionSet 文本的p 标记
    questionSetHeaderContainer围绕 questionSet的header 和文本进行环绕的div
    questionSets围绕 questionPanelquestionSets inside 进行包装的div
    questionSetquestions inside 封装为 questionSet的div
    问题环绕 question的div
    questionText保存 question 文本的p 标记
    questionPostText保存 question post文本的p 标记
    标签question的标签 inside
    backButton面板上拉按钮,在第二个面板上显示
    controlButton通常情况下,下一个或者提交按钮,具体取决于面板
    buttonBar这个div环绕上面描述的按钮
    errorMessage错误消息div类- 使用自定义renderError方法时不使用
    输入textInputtextareaInputemailInputpasswordInput 输入的输入
    选择指定给 selectInput 选择元素
    文件指定给 fileInput 文件元素
    checkboxInput环绕 checkboxInput的div
    复选框指定给 checkboxOptionsInputcheckboxInput 复选框输入
    checkboxList已经将 UL wrapped包装在 checkboxOptionsInput 中的复选框项
    checkboxListItem分配给上面提到的checkboxList的LI inside
    checkboxLabel指定给复选框选项的标签 inside
    radioList分配给UL包裹在 radioOptionsInput 中的无线电项目
    radioListItem分配给上面提到的radioList的LI inside
    radioLabel指定给单选按钮选项的标签 inside
    电台广播指定给 radioOptionsInput的单选按钮 inside

    默认的&自定义输入类型

    临冬城附带的默认输入类型集如下所示:

    • textInput
    • textareaInput
    • emailInput
    • hiddenInput
    • fileInput
    • passwordInput
    • selectInput
    • checkboxInput
    • checkboxOptionsInput
    • radioOptionsInput

    你还可以定义自定义输入类型,如下所示:

    var Winterfell =require('winterfell');var MyAwesomeInputType =require('./awesomeInputType');
    Winterfell
    . addInputType('myAwesomeInputType', MyAwesomeInputType);// ORWinterfell
    . addInputTypes({
     myAwesomeInputType : MyAwesomeInputType
     });

    自定义错误消息

    错误消息可以设置为字符串,也可以设置为生成错误消息的方法。 它们可以像这样设置:

    var Winterfell =require('winterfell');
    Winterfell
    . addErrorMessage('isLength', 'Please enter some text!');
    Winterfell
    . addErrorMessages({
     isLength: (validationItem) => {
     /* * validationItem = { * type : 'isLength', * params : []//Starts with answer * }*/return'Please enter a value';
     }
     });

    自定义验证方法

    可以定义验证方法,并通过验证程序包中定义的方法来选择。

    var Winterfell =require('winterfell');
    Winterfell
    . addValidationMethod('isLength', value=> {
     /* * arguments == validation parameters*/returntrue; // Valid });
    Winterfell
    . addValidationMethods({
     isLength:value=> {
     /* * arguments == validation parameters*/returntrue; // valid }
     });

    Props &配置

    以下 table 展示临冬城接受的道具,它们的类型和描述。 唯一需要的道具是 schema

    Prop名称类型说明
    panelId字符串要渲染的初始 panelId
    架构对象要呈现的窗体的schema
    引用字符串表单元素的ref 字段
    encType字符串表单元素的encType 字段
    鏂规碜字符串表单元素的method 字段
    操作字符串表单元素的默认 action 字段
    disableSubmit布尔型防止表单自然提交
    questionAnswers对象现有 questionAnswersquestionId => answer
    renderError函数自定义验证错误呈现方法。 返回响应组件或者响应元素。
    renderRequiredAsterisk函数自定义要求 Asterisk 渲染方法。 返回响应组件或者响应元素。

    事件

    以下事件可以注册为临冬城的道具。

    事件道具说明参数
    onRender当临冬城最初呈现时激发n/a
    onUpdate当问题回答已经更改时激发questionAnswers
    onSwitchPanel当面板切换或者更改时激发panel
    onSubmit成功提交表单时激发questionAnswersaction

    的最终注释

    请求请求完全受欢迎。 如果你想联系我,请我。Jordan Appleson的初始模式设计。

    许可证

    麻省理工学院许可证( MIT )

    版权所有( c ) 2015 Andrew Hathaway,https://github.com/andrewhathaway/Winterfell

    若要在取得该软件副本时免费授予任何人,如有下列条件的软件,请免费授予该软件的副本,并与相关的文档文件("软件") 进行许可,包括不受限制的权利,包括以下条件:

    上述版权声明和本许可声明须包括在所有的副本或实质性部分的软件。

    软件是"是",没有任何保证,表示或者隐含,包括但不限于销售,适合特定用途和 NONINFRINGEMENT 。 作者或者版权持有人在合同。侵权或者它的他与软件或者它的他用户交易的行为。



    文章标签:COM  BASE  ext  for  form  react  Extend  表单  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语