純粋な CSS でフォ​​ーム検証を実装するためのサンプル コード

<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
  <el-フォーム項目
    label="年齢"
    プロパティ="年齢"
    :ルール="[
      {必須: true、メッセージ: '年齢は空欄にできません'},
      { タイプ: 'number'、メッセージ: '年齢は数値でなければなりません'}
    ]"
  >
    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('numberValidateForm')">送信</el-button>
    <el-button @click="resetForm('numberValidateForm')">リセット</el-button>
  </el-form-item>
</el-form>
<スクリプト>
  エクスポートデフォルト{
    データ（） {
      戻る {
        数値検証フォーム: {
          年： ''
        }
      };
    },
    メソッド: {
      送信フォーム(フォーム名) {
        this.$refs[formName].validate((valid) => {
          （有効）の場合{
            alert('送信!');
          } それ以外 {
            console.log('送信エラー!!');
            false を返します。
          }
        });
      },
      resetForm(フォーム名) {
        this.$refs[フォーム名].resetFields();
      }
    }
  }
</スクリプト>

/*
 * css
 */
 ：根 {
 	--エラー色: 赤;
 }
 .form > 入力 {
 	下マージン: 10px;
 }
 .form > .f-tips {
 	色: var(--error-color);
 	表示: なし;
 }
 input[type="text"]:無効 ~ input[type="submit"],
 入力[type="password"]:無効 ~ 入力[type="submit"] {
 	表示: なし;
 }
 入力[必須]:無効 + span {
 	表示: インライン;
 }
 
 /*
  *html
  */
<form class="form" id="form" method="get" action="/api/form">
    アカウント：
    <input data-title="アカウント" pattern="[\w]{6,10}" name="アカウント" type="text" 必須 />
    <span class="f-tips">正しい口座番号を入力してください</span>
    <br />
    パスワード：
    <input data-title="パスワード" pattern="[\w]{6,10}" name="パスワード" type="パスワード" 必須 />
    <span class="f-tips">正しいパスワードを入力してください</span>
    <br />
    <input name="button" type="submit" value="送信" />
</フォーム>

<input data-title="アカウント" pattern="/[\w]{6, 10}/" name="アカウント" type="text" 必須 />

<input data-title="アカウント" pattern="/\w{6,10}/" name="アカウント" type="text" 必須 />