forms - 在 Svelte 中验证动态生成的表单元素

Question

我有一个动态生成的具有 2 种输入类型的表单。以下是我的 Svelte 文件。我正在寻找提交表单时验证表单的最佳方法的示例。每当输入数据发生更改时，表单元素还应该验证数据。所以它是 2 路验证，表单提交和输入值更改。

表单-builder.svelte：

    <script>
    import { title } from 'process';
    import { onMount } from 'svelte';
    import Field from './field.svelte';
    let arrFields = [];
    export let formsubmitted=false;
    export let counter=0;
    let isValid=false;

    
    onMount(() => {
        // get json data and generate arrField
    }); 
    
    function handleSubmit(event) {
        //reset vaildation flag 
        isValid=true;
        formsubmitted=true;
        counter= counter + 1;
        if(isValid ){
            alert('this will submit form.');
        }
        else{
                event.preventDefault();
        }
     </script>

     <form on:submit|preventDefault="{handleSubmit}"> 
         {#each arrFields as arrField}
             <Field fieldparams={arrField}  bind:formsubmitted bind:counter 
             bind:isValid  /> 
         {/each}
         <div class="form-group row no-gutters ">
              <div class="offset-sm-4 col-sm-8 col-md-6 col-12">
                   <input type="submit" name="proceed" value="{formCtaLabel}" 
                   id="btnSubmitIndex" >
              </div>
         </div>
      </form>

在field.svelte 中：

    <script>
        import Fieldtext from './field-text.svelte';
        import Fieldphone from './field-phone.svelte';
        export let formsubmitted;
        export let isValid;
        export let counter;
        export let fieldparams = [];
        export let sFieldType = fieldparams["System"]["type"];
    </script>
    
       {#if sFieldType === 'item_formfield_text'}
        <Fieldtext {fieldparams}   bind:formsubmitted bind:counter bind:isValid  />
    {:else if sFieldType === 'item_formfield_phone'}
        <Fieldphone {fieldparams}  bind:formsubmitted bind:counter bind:isValid  />   
    {/if}

在field-text.svelte 中：

    <script>
    let errormessage = "";
    export let fieldparams = [];
    export let formsubmitted;
    export let isValid=true;
    let input_blur=false;
    export let counter;

    //code to generate Input data...

     //on counter change perform the validation
      $: counter, validate();
   
     export function validate(){
         errormessage="";
         var value=InputValue;
         if(formsubmitted || input_blur)  
         {
            input_blur=false;   
            var pattern =/^([a-zA-Z ]{3,30})$/;  
            if(value==""){
                errormessage = '<label class="error" for="' + InputId + '">' + ValidationEmpty + 
                '</label>';
                isValid=false;
            }
            else if (!pattern.test(value)){
                errormessage = '<label class="error" for="' + InputId + '">' + ValidationIncorrect + 
                '</label>';
                isValid=false;
            } 
            else{
                errormessage="";
            }
         }
         else{
            errormessage="";
         }
      }
   
      </script>


      <div class="form-group row no-gutters">
         <label class="{LabelCssClass}" for="{InputId}">{LabelText}</label>
         <div class="col-sm-8 col-md-6 col-12">
             <input  class="{InputCssClass}" id="{InputId}" 
             name="{InputName}" placeholder="{InputPlaceholder}" type="text" bind:value="{InputValue}" 
              on:blur={e => {input_blur=true;validate(); } }> 
             {@html errormessage}
          </div> 
      </div>

field-phone.svelte 的类似代码

验证不起作用。我正在使用计数器将表单提交的状态传递给子组件，感觉不是很好的解决方案。每当计数器更改时，都会调用验证函数。测试了几种绑定子验证方法的方法，但没有奏效。我需要一份表单验证的工作副本。如果有人可以举一个工作场景的例子，我将不胜感激。谢谢你。

REPL 代码在这里

标签： formssvelte