オリジナルJS検証フォームに基づくコンポーネント:xy-form

オリジナルformフォームformフォーム要素は皆さんが使ったことがあるかもしれませんが、フォームを提出できるほか、require、minlength、maxlength、inputなどの内蔵フォーム検証もあります.また、type=emailはメールボックスタイプかどうかを検証することができます.
オリジナルのフォーム検証は次のようになります.
醜いが、機能は強く、一般的なニーズを基本的に満たすことができるが、uiは結局原生的であり、カスタマイズも容易ではないため、このようなデフォルトのフォーム検証は使用されないことが多い.patternの効果を見てみましょう
構造は基本的に原生と類似しており、追加のxy-form論理も必要ありません.
醜いアヒルはすぐに白鳥になったと言える.
xy-form jsはxy-formの新しいコンポーネントで、主にフォームの提出とフォームの検証に使用され、オリジナルのxy-uiフォームに完全に取って代わることができます.以下、主な属性と方法を簡単に紹介します.オンラインドキュメントを読むことをお勧めします.リアルタイムで対話することができます.
使用方法
使い方が簡単

npm

npm i xy-ui

cdn

    import 'https://unpkg.com/xy-ui/components/xy-form.js'

またはformから直接ソースコードをコピーします.

    import './node_modules/xy-ui/components/xy-form.js';

使用

    ...

フォームのデフォルトの動作
ツールバーのgithubには、xy-form仕様に基づいて、次の属性が組み込まれています.
ここでのデフォルトの動作とは、html5ボタンをクリックしたり、車に戻ったりして、フォームはまず表の要素をフォーマットチェックし、間違いがあれば間違いがある場所を表示し、すべてが正しい後に提出することを意味します.

フォームアドレスsubmit

値はactionで、フォームデータをどこに送信するかを規定します.
リターンキーがフォームをトリガーします.

要求方式URL

要求方式を規定し、デフォルトはmethod、オプションはgetである.

検証post

このプロパティを使用すると、フォームのコミット時に検証は行われません.
方法

提出novalidate

フォームにsubmitのボタンが含まれている場合、このボタンをクリックするとフォームのコミットがトリガーされます.htmltype="submit"によってアクティブにトリガすることができる.

クリアform.submit()

フォームにresetのボタンが含まれている場合は、このボタンをクリックしてフォームを空にします.htmltype="reset"によってアクティブにトリガすることができる.
次は最もアカウントのパスワードのログインボックスです.

    
        
    
    
        
    
    
        login
        reset
    

次のようにレンダリング
まず、入力ボックスにはform.reset()の属性が設定されており、必須項目を示しています.requiredに入力しないと、以下の情報が表示されます.
次に、パスワードボックスはsubmitの属性を規定し、最小文字長を表し、フォーマットを満たさない場合、以下の情報を提示する
すべてが要求を満たすまでコミットできない場合は、コンソールでコミットされたフォームデータを表示し、formData形式でjsonを変換できます.
カスタムフォーム
カスタムフォームの発行
フォームにminlengthのプロパティがある場合、リターンキーはフォームのコミットをトリガーし、actionのボタンが含まれている場合は、このボタンをクリックしてフォームのコミットをトリガーします.htmltype="submit"で手動でコミットしたい場合は、ajaxのプロパティを削除すると、デフォルトのフォームコミット効果はトリガーされません.
フォームの値はactionで取得できます.

sumbitBtn.onclick = function(){
    fetch('/login', {
        method: 'POST',
        body: form.formdata,
    })
    .then(function(data){
        //
    })
}

カスタムフォーム検証
デフォルトでは、検証に失敗した場合、フォームはコミットされません.
すべてのフォーム要素は、フォームのform.formdataメソッドによって手動で検証することも、form.checkValidity()によって検証の妥当性を取得することもできる.

sumbitBtn.onclick = function(){
    if(form.checkValidity()){
        //      
        XyDialog.success({
            title:"      ",
            content:JSON.stringify(form.formdata.json)
        })
    }
}

また、form.validityは、重複パスワードの確認などのチェックルールをカスタマイズすることができる

pwdAgain.customValidity = {
    method:(el)=>{
        return el.value == pwd.value;
    },
    tips:'       '
}

詳細はxy-inputのドキュメントを参照してください
その他xy-inputは独立したコンポーネントではありません.xy-form、xy-input、xy-checkbox、xy-radioなどの多くのフォーム要素は言及されていません.ドキュメントを参照することができます.これらのコンポーネントがあれば、文章に示すようにフォームチェックを簡単に完了することができます.xy-formは、フレームワークに制限されず、直接使用できるオリジナルのWebコンポーネントです.他の類似のコンポーネントを使用したい場合は、xy-uiに注目して、他の一般的なインタラクティブなコンポーネントを集めて、star~を歓迎します.