純CSS実現フォーム検証

作者:陳大魚頭

github: KRISACHAN

フォーム検証について

私たちの日常業務では、フォーム検証は一般的な設計要件であり、登録ボックスにログインしたり、アンケート調査にフォーム検証を使用したりする必要があります.
一般的に我々の実現構想はJSがinputボックスの入力内容を傍受し,ユーザが入力内容を判断することで,次の操作を決定することである.
たとえば、次の例では、優れたオープンソースUIライブラリ、elementから得られます.

  
    
  
  
      
      
  


  export default {
    data() {
      return {
        numberValidateForm: {
          age: ''
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }

以上が私たちの通常の表現検証で、基本的にはJSで完成していますが、CSSで実現できますか?答えはいいです.ここから先にDEMOを

CSS実装フォーム検証

上記のフォーム検証は完全にCSSによって実現され、コア属性はCSS Level 4のValidityである.考え方は:validと:invalidを用いてのvalueを判断できる特性である.

ここはすべてのコードです

/*
 * css
 */
 :root {
     --error-color: red;
 }
 .form > input {
     margin-bottom: 10px;
 }
 .form > .f-tips {
     color: var(--error-color);
     display: none;
 }
 input[type="text"]:invalid ~ input[type="submit"],
 input[type="password"]:invalid ~ input[type="submit"] {
     display: none;
 }
 input[required]:invalid + span {
     display: inline;
 }

 /*
  * html
  */

      ：
    
            

      ：
    
            

    

効果のスクリーンショット

使用する知識点

1.HTML 5の新しい属性:pattern

MDNの説明:
コントロール値の正規表現をチェックします.patternは、一部のサブセットだけでなく、値全体を一致させる必要があります.titleプロパティを使用して、ユーザーを助けるモードを説明します.タイプ属性の値がtext,search,tel,urlまたはemailの場合、この属性は適用されます.そうしないと無視されます.(互換ie 10+)
コメント:

pattern内の検証規則が合法でない場合、例えば長さ検査内にスペースが多くなった場合、コンソールでエラーが報告されます.詳細は以下の通りです.

CSSはJSの中の検証規則とは異なり、以下の書き方は無効になります.コア検証規則は[]で包む必要があります(現在、テストのいくつかの例からそうです.具体的な詳細は資料を調べる必要があります.もっと具体的な情報を知っている人がいたら、教えてください.ありがとうございます.)

2.CSS Level 4セレクタの新属性：invalid

詳しくは私のブログ[[訳]19 CSSレベル4セレクタ]を参照してください.https://juejin.im/post/5ce3b3...
もしあなたが、技術を検討するのが好きで、あるいは本文に対して何か意見や提案があれば、下のQRコードをスキャンして、微信の公衆番号「魚頭のWeb海洋」に注目して、いつでも魚頭とやり取りすることができます.ようこそ!あなたに会えることを心から願っています.