エル・フォームのフォーム検証

< EL状REF = "データフォーム" ：モデル= "データフォーム" ：ルール= "ルール" ラベル幅= "60PX" @ keyup.enter.native = "dataFormSubmitHandle（）" > 
< EL-フォーム項目プロップ=」名前" ラベル= "姓名" > 
    < EL-入力Vモデル= "dataForm.name" プレースホルダ= "姓名"  /> 
</ EL-フォーム項目> 
< EL-フォーム項目の小道具= "メール" ラベル="邮箱」> 
    <EL入力Vモデル=「dataForm.email」プレースホルダ= "邮箱"  /> 
</ EL-フォーム項目> 
< EL-フォーム項目ラベル= "年龄" プロップ= "年齢" > 
    < EL-入力V-model.number = "dataForm.age" > </ EL -input > 
</ EL-フォーム項目> 
< EL-フォーム項目> 
    < EL-ボタンタイプ= "主" @click = "dataFormSubmitHandle（）" >确认</ EL-ボタン> 
    < EL-ボタン@click = "resetForm（）" >リセット</ EL-ボタン> 
</EL-フォーム項目> 
</ EL-フォーム> 

< スクリプト> 
  VAR CheckAgeの= （ルール、値、コールバック）=> {
     IF （！値）{
        返す（コールバック新しい新しいエラー（' 空にすることはできません、年齢を' ））; 
     } 
     IF （！{Number.isInteger（値））
         のコールバック（新しい新しいエラー（' してください入力されたデジタル値' ））; 
      } 他{
         IF （値< rule.max_age）{
          コールバック（新しい新しいエラー（' 18歳以上でなければなりません' ））; 
        } 他{ 
          コールバック（）; 
        } 
      } 
  }; 
  エクスポートデフォルト{ 
    データ（）{ 
      リターン{ 
        データフォーム：{ 
          名：'' 、
          電子メールで：'' 、
          年齢：'' 
        }、
        規則：{ 
          名前：[ 
            {必要：trueに、メッセージ：' あなたの名前を入力してください' 、トリガー："ブラー' }、
            {分：3 、最大：5 、メッセージ：' 3-5文字の長さ' トリガー：' ブラーは' } 
          ]、
          電子メールの場合：[ 
           {必要：trueに、メッセージ：「電子メールアドレスを入力してください' 、トリガー：「ぼかし」}、
           {タイプ：「メールで」、メッセージ：「を入力してください正しいメールアドレス」、トリガー：[ 「ブラー」、「変更」]}
          ]、
          年齢：[ 
            {max_ageの：18 、バリ：checkAge、トリガー：' ぼかし' } // checkAge自定义规则函数
          ] 
        } 
      }。
    }、
    メソッド：{ 
      dataFormSubmitHandle（）{ 
        この$ refs.dataForm.validate（有効。=> {
         場合（有効）{ 
            警告（' 提出！' ）; 
          } 他{ 
            はconsole.log（' エラー提出!! ' ）
          }
        }）; 
      }、
      resetForm（）{ 
        この$ refs.dataForm.resetFields（）; 
      } 
    } 
  } 
</ スクリプト>
詳細なドキュメントは、要素を表示することができます https://element.eleme.cn/#/zh-CN/component/form
エル・フォームのフォーム検証

おすすめ
