Vue implementiert Beispielcode zur Formulardatenvalidierung

<!--Bereich des Anmeldeformulars-->
  <el-form :model="Anmeldeformular" label-width="0px" class="Anmeldeformular" :rules="Anmeldeformularregeln">
  <!--Benutzername-->
   <el-form-item prop="Benutzername">
    <el-input v-model="loginForm.Benutzername" Präfix-Icon="el-icon-Benutzer"></el-input>
  </el-form-item>
  <!--Passwort-->
  <el-form-item prop="Passwort">
    <el-input v-model="loginForm.password" Präfix-Icon="el-icon-lock" Typ="Passwort"></el-input>
  </el-form-item>
  <!--Schaltflächenbereich-->
  <el-form-item class="btns">
    <el-button type="primary">Anmelden</el-button>
    <el-button type="info">Zurücksetzen</el-button>
  </el-form-item>
  </el-form>
<Skript>
 Standard exportieren{
 Daten(){
  zurückkehren {
  //Datenbindungsobjekt des Anmeldeformulars loginForm:{
   Benutzername:'',
   Passwort:''
  },
  //Formularvalidierungsregeln loginFormRules:{
   //Überprüfen Sie, ob der Benutzername ein gültiger Benutzername ist:[
   { erforderlich: true, Nachricht: ‚Bitte geben Sie Ihren Benutzernamen ein‘, Auslöser: ‚blur‘ },
   { min: 3, max: 10, Nachricht: ‚Länge liegt zwischen 3 und 10 Zeichen‘, Auslöser: ‚unscharf‘ }
   ],
   //Überprüfen Sie, ob das Passwort ein gültiges Passwort ist:[
   { erforderlich: true, Nachricht: ‚Bitte geben Sie Ihr Passwort ein‘, Auslöser: ‚unscharf‘ },
   { min: 6, max: 15, Nachricht: ‚Länge liegt zwischen 6 und 15 Zeichen‘, Auslöser: ‚Unschärfe‘ }
   ]
  }
  }
 }
 }
</Skript>

<Vorlage>
  <div Klasse="prüfen" >
    <h3>{{msg}}</h3>
    <div Klasse="Eingabe">
      <Eingabetyp="Text" v-Eingabe v-Fokus><span>{{msg1}}</span>
    </div>
    <div Klasse="Eingabe">
      <Eingabetyp="Text" v-Eingabe v-erforderlich><span>{{msg2}}</span>
    </div>
    <div Klasse="Eingabe">
      <!-- erforderlich: true/false bedeutet, dass dies ein Pflichtfeld ist -->
      <input type="text" v-input v-checked="{erforderlich:true,}"><span>{{msg3}}</span>
    </div>
    <div Klasse="Eingabe">
      <!-- <input type="text" v-input v-validate="'erforderlich|E-Mail|Telefon|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'">
      required Überprüfen Sie, ob es sich um ein Pflichtfeld handelt email Überprüfen Sie, ob es sich um eine E-Mail-Adresse handelt phone Überprüfen Sie, ob es sich um eine Telefonnummer handelt min(5) Überprüfen Sie den Mindestwert max(3) Überprüfen Sie den Höchstwert minlength(6) Überprüfen Sie die Mindestlänge maxlength(12) Überprüfen Sie die Maximallänge regex(/^[0-9]*$/) Führen Sie eine Überprüfung des regulären Ausdrucks durch -->
      <Eingabetyp="Text" v-Eingabe
          v-validate="'erforderlich|min(5)|max(15)|minlength(6)|maxlength(12)|regex(/^[0-9]*$/)'" Platzhalter="Validierung mehrerer Auswahlen">
    </div>
    <div Klasse="Eingabe">
      <!--
      Zur Verifizierung muss eine Zahl verwendet werden: /^[0-9]*$/
      Überprüfen Sie eine Zeichenfolge bestehend aus 26 englischen Buchstaben: /^[A-Za-z]+$/
      Handynummer verifizieren: /^[1][3,4,5,7,8][0-9]{9}$/;
      E-Mail-Adresse bestätigen: /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
      -->
      <input type="text" v-input v-validate="'erforderlich|Telefon'" Platzhalter="Telefonnummer bestätigen">
    </div>
    <div Klasse="Eingabe">
      <input type="text" v-input v-validate="'erforderlich|E-Mail'" Platzhalter="E-Mail bestätigen">
    </div>
  </div>
</Vorlage>

<Skript>
  Standard exportieren {
    Name: "Check",
    Daten() {
      zurückkehren {
        msg: 'Befehl',
        tipsBorderColor: "rot",
        msg1: 'Die einfachste Anweisung',
        msg2: 'Die Verifizierungsanweisungen dürfen nicht leer sein',
        msg3: 'Regelmäßige Überprüfung durchführen',
        TippsMsg: '',
      }
    },

    Anweisungen: {
      //Ändern Sie den Eingabefeldbefehl input: {
        // Wenn das gebundene Element in das DOM eingefügt wird, eingefügt: Funktion (el) {
          el.style.width = "300px";
          el.style.height = "35px";
          el.style.lineHeight = "35px";
          el.style.background = "#ddd";
          el.style.fontSize = "16px";
          el.style.border = "1px durchgezogen #eee";
          el.style.textIndent = "5px";
          el.style.textIndent = "8px";
          el.style.borderRadius = "5px";
        }
      },
      // Der standardmäßig ausgewählte Befehl des Eingabefeldfokus: {
        eingefügt: Funktion (el) {
          el.fokus();
        }
      },
      // Anweisungen, die nicht leer sein dürfen, erforderlich: {
        eingefügt: Funktion (el) {
          el.addEventListener('unscharf', Funktion () {
            wenn (el.value == '' || el.value == null) {
              el.style.border = "1px durchgehend rot";
              console.log('Ich kann nicht leer sein');
            }

          })
        }
      },
      // Überprüfen Sie, ob der ausgewählte Befehl lautet: {
        eingefügt: Funktion (el) {
          Rückkehr el
        }
      },
      // Validieren: {
        eingefügt: Funktion (el, validateStr) {
          // Validierungsregeln in Validierungsarrays aufteilen let validateRuleArr = validateStr.value.split("|");
          // Auf Fokusverlust achten el.addEventListener('blur', function () {
            // Fokus verlieren, um checkedfun() zu überprüfen;
          });

          //Schleifenüberprüfungsfunktion checkedfun() {
            für (var i = 0; i < validateRuleArr.length; ++i) {
              let requiredRegex = /^required$/; // Prüfen, ob „erforderlich“ gesetzt ist
              let emailRegex = /^email$/; // Bestimmen Sie, ob E-Mail festgelegt ist
              let phoneRegex = /^phone$/; // Prüfen, ob das Telefon eingestellt ist
              let minRegex = /min\(/; //Beurteilen, ob der minimale Wert eingestellt ist let maxRegex = /max\(/; //Beurteilen, ob der maximale Wert eingestellt ist let minlengthRegex = /minlength\(/; //Beurteilen, ob die maximale Länge minlength eingestellt ist let maxlengthRegex = /maxlength\(/; //Beurteilen, ob die maximale Länge maxlength eingestellt ist let regexRegex = /regex\(/;
              //Überprüfen Sie, ob „erforderlich“ gesetzt ist
              wenn (erforderlichRegex.test(validateRuleArr[i])) {
                wenn (!erforderlich()) {
                  brechen;
                } anders {
                  Tipps entfernen();
                }

              }

              //Feststellen, ob E-Mail festgelegt ist
              wenn (emailRegex.test(validateRuleArr[i])) {
                wenn (!email()) {
                  brechen;
                } anders {
                  Tipps entfernen();
                }

              }

              // Feststellen, ob das Telefon eingestellt ist
              wenn (phoneRegex.test(validateRuleArr[i])) {
                wenn (!Telefon()) {
                  brechen;
                } anders {
                  Tipps entfernen();
                }

              }

              // Bestimmen, ob der Mindestwert gesetzt ist, if (minRegex.test(validateRuleArr[i])) {
                wenn (!eval(validateRuleArr[i])) {
                  brechen;
                } anders {
                  Tipps entfernen();
                }

              }

              // Bestimmen Sie, ob der Maximalwert gesetzt ist, wenn (maxRegex.test(validateRuleArr[i])) {
                wenn (!eval(validateRuleArr[i])) {
                  brechen;
                } anders {
                  Tipps entfernen();
                }

              }

              // Prüfen, ob die Mindestlänge eingestellt ist if (minlengthRegex.test(validateRuleArr[i])) {
                wenn (!eval(validateRuleArr[i])) {
                  brechen;
                } anders {
                  Tipps entfernen();
                }

              }

              // Prüfen, ob die maximale Länge festgelegt ist if (maxlengthRegex.test(validateRuleArr[i])) {
                wenn (!eval(validateRuleArr[i])) {
                  brechen;
                } anders {
                  Tipps entfernen();
                }

              }

              // Beurteilen Sie den Test mit regulärem Ausdruck, wenn (regexRegex.test(validateRuleArr[i])) {
                wenn (!eval(validateRuleArr[i])) {
                  brechen;
                } anders {
                  Tipps entfernen();
                }

              }

            }

          }

          // Überprüfen Sie, ob es sich um ein Pflichtfeld handelt Funktion required() {
            wenn (el.value == '' || el.value == null) {
              // console.log("darf nicht leer sein");
              tipMsg("darf nicht leer sein");
              gibt false zurück;
            }

            gibt true zurück;
          }

          //Überprüfe, ob es sich um eine E-Mail handelt Funktion email() {
            let emailRule = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
            wenn (!emailRule.test(el.value)) {
              tipMsg("Bitte geben Sie eine gültige E-Mail-Adresse ein");
              gibt false zurück;
            }

            gibt true zurück;
          }

          //Überprüfe, ob es sich um eine Mobiltelefonnummer handelt function phone() {
            lass phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/;
            wenn (!phoneRule.test(el.value)) {
              tipMsg("Bitte geben Sie eine gültige Mobiltelefonnummer ein");
              gibt false zurück;
            }

            gibt true zurück;
          }

          // Minimalwertüberprüfungsfunktion min(num) {
            wenn (el.value < num) {
              tipMsg("Der Minimalwert kann nicht kleiner sein als " + num);
              //console.log('Der Mindestwert kann nicht kleiner sein als '+num);
              gibt false zurück;
            }

            gibt true zurück;
          }

          // Maximalwertüberprüfungsfunktion max(num) {
            wenn (el.value > num) {
              tipMsg("Der Maximalwert kann nicht größer sein als " + num);
              //console.log('Der Maximalwert kann nicht größer sein als '+num);
              gibt false zurück;
            }

            gibt true zurück;
          }

          // Funktion zur Überprüfung der Mindestlänge minlength(length) {
            wenn (el.value.length < Länge) {
              //console.log('Die Mindestlänge kann nicht kleiner sein als '+length);
              tipMsg("Mindestlänge kann nicht kleiner sein als" + Länge);
              gibt false zurück;
            }

            gibt true zurück;
          }

          // Maximale Länge für die Überprüfungsfunktion maxlength(length) {
            wenn (el.value.length > Länge) {
              //console.log('Die maximale Länge kann nicht größer sein als '+length);
              tipMsg("Die maximale Länge kann nicht größer sein als" + Länge);
              gibt false zurück;
            }
            gibt true zurück;
          }

          // Validiere die reguläre Ausdrucksfunktion regex(rules) {
            wenn (!regeln.test(el.value)) {
              tipMsg("Bitte geben Sie das richtige Format ein");
              gibt false zurück;
            }
            gibt true zurück;
          }

          // Eingabeaufforderungsinformationen hinzufügen function tipMsg(msg) {
            Tipps entfernen();
            let tipsDiv = document.createElement('div');
            Lassen Sie curDate = Date.parse(neues Date());
            TippsDiv.innerText = msg;
            tipsDiv.Klassenname = "tipsDiv";
            TippsDiv.id = aktuelles Datum;
            tipsDiv.style.position = "absolut";
            tipsDiv.style.top = el.offsetTop + 45 + 'px';
            TippsDiv.style.left = el.offsetLeft + 'px';
            Dokument.Body.AppendChild(tipsDiv);
            //Timeout festlegen(Funktion(){
            // Dokument.getElementById(curDate).remove();
            //},2000);
          }

          // Entfernen Sie die Tipps Funktion removeTips() {
            wenn (document.getElementsByClassName('tipsDiv')[0]) {
              document.getElementsByClassName('tipsDiv')[0].remove();
            }

          }
        },
      }
    }
  }
</Skript>

<Stil>

  .Eingabe {
    Polsterung unten: 20px;
    schweben: links;
    klar: beides;
    Rand links: 500px;
    Anzeige: Block;

  }

  .check Eingabe {
    Breite: 300px;
    Höhe: 35px;
    Gliederung: keine;
    Hintergrund: #ddd;
  }

  .prüfe Spanne {
    Polsterung links: 20px;
  }

  .tipsDiv {
    Höhe: 27px;
    Zeilenhöhe: 25px;
    Rand: 1px durchgezogen #333;
    Hintergrund: #333;
    Polsterung: 0px 5px;
    Rahmenradius: 4px;
    Farbe: #fff;
    Schriftgröße: 16px;
  }

  .tipsDiv:vor {
    Inhalt: '';
    Anzeige: Block;
    Rahmenbreite: 0 5px 8px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent transparent #000;
    Position: absolut;
    oben: -9px;
    links: 6px;
  }
</Stil>