Heim > Artikel > Web-Frontend > Beispielcode für die Implementierung der grundlegenden Formularvalidierung in reinem JavaScript

Beispielcode für die Implementierung der grundlegenden Formularvalidierung in reinem JavaScript

黄舟Original: 2018-05-14 16:14:211444Durchsuche

Der folgende Editor zeigt Ihnen ein Beispiel für die grundlegende JavaScript-Formularüberprüfung (reine Js-Implementierung). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen

Überprüfungsideen

Hören Sie sich den Fokus jeder Eingabe an Steuerung verlassen (onblue), wenn der Fokus geht, rufen Sie die Überprüfungsfunktion auf. Ändern Sie nach der Überprüfung den Text in der dritten Spalte, um Übereinstimmung/Nichteinhaltung anzuzeigen und wahr/falsch zurückzugeben

Implementierungscode:

index.html

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <pnk rel="stylesheet" href="css.css" rel="external nofollow" >
</head>

<body>
  <form id="form" action="" method="post" onsubmit="return vipdate()">
    <table class="table">
      <tr>
        <td>雇员编号</td>
        <td>
          <input type="text" id="empnb" name="empnb" onblur="vapdateEmpnb()">
        </td>
        <td>
          <span id="empnbMsg"></span>
        </td>
      </tr>
      <tr>
        <td>雇员姓名</td>
        <td>
          <input type="text" id="ename" name="ename" onblur="vapdateEname()">
        </td>
        <td>
          <span id="enameMsg"></span>
        </td>
      </tr>
      <tr>
        <td>雇员职位</td>
        <td>
          <input type="text" name="epost" id="epost" onblur="vapdateEpost()">
        </td>
        <td>
          <span id="epostMsg"></span>
        </td>
      </tr>
      <tr>
        <td>雇员日期</td>
        <td>
          <input type="text" name="" id="edate" name="edate" onblur="vapdateEdate()">
        </td>
        <td>
          <span id="edateMsg"></span>
        </td>
      </tr>
      <tr>
        <td>基本工资</td>
        <td>
          <input type="text" name="esalary" id="esalary" onblur="vapdateEsalary()">
        </td>
        <td>
          <span id="esalaryMsg"></span>
        </td>
      </tr>
      <tr>
        <td>佣金</td>
        <td>
          <input type="text" name="ebrok" id="ebrok" onblur="vapdateEbrok()">
        </td>
        <td>
          <span id="ebrokMsg"></span>
        </td>
      </tr>
      <tr>
        <td colspan="3">
          <input type="submit" autofocus="autofocus">
          <input type="reset">
        </td>
      </tr>
    </table>
  </form>
</body>
<script type="text/javascript" src="./FormVapdation.js"></script>

</html>

FormVapdation. js

// 日期选择
function layDate() {

}

// 验证雇员编号,4位纯数字编号
function vapdateEmpnb() {
  return vapdateRegexp("empnb", /^\d{4}$/);
}
// 验证雇员姓名,不为空
function vapdateEname() {
  return vapdateNull("ename");
}
// 验证雇员职位,不为空
function vapdateEpost() {
  return vapdateNull("epost");
}
// 验证雇员日期
function vapdateEdate() {
  return vapdateRegexp("edate", /^\d{4}-\d{2}-\d{2}$/)
}
// 验证基本工资
function vapdateEsalary() {
  return vapdateRegexp("esalary", /^\d+(\.\d{1,2})?$/)
}
// 验证佣金
function vapdateEbrok() {
  return vapdateRegexp("ebrok", /^\d+(\.\d{1,2})?$/)
}

// 提交时全部重新验证
function vapdate() {
  return vapdateEmpnb() && vapdateEname() && vapdateEpost() && vapdateEdate() && vapdateEsalary() && vapdateEbrok();
}
// 正则表达式验证
function vapdateRegexp(elemName, regexp) {
  var elem = document.getElementById(elemName);
  var msg = document.getElementById(elemName + &#39;Msg&#39;)
  console.log(regexp);
  console.log(elem.value);
  if (regexp.test(elem.value)) {
    msg.innerHTML = &#39;ok&#39;;
    msg.style.color = &#39;green&#39;;
    return true;
  } else {
    msg.innerHTML = &#39;您的输入不符合规则&#39;;
    msg.style.color = &#39;red&#39;;
    return false;
  }
}
// 不为空验证
function vapdateNull(elemName) {
  var elem = document.getElementById(elemName);
  var msg = document.getElementById(elemName + &#39;Msg&#39;);
  console.log(elem.value);
  console.log(msg);
  if (elem.value == &#39;&#39; || elem.value == &#39; &#39;) {
    msg.innerHTML = &#39;您的输入不能为空&#39;;
    msg.style.color = &#39;red&#39;;
    return false;
  } else {
    msg.innerHTML = &#39;ok&#39;;
    msg.style.color = &#39;green&#39;;
    return true;
  }
}

css.css

html {
  font-size: 14px;
}

.table {
  border: 1px grey sopd;
}

.table tr {
  height: 2rem;
}

.table td {
  width: 15rem;
}

Das obige ist der detaillierte Inhalt vonBeispielcode für die Implementierung der grundlegenden Formularvalidierung in reinem JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beispielcode für die Verwendung von JavaScript zur Implementierung der Red-Envelope-Grabbing-Funktion auf WeChatNächster Artikel：Beispielcode für die Verwendung von JavaScript zur Implementierung der Red-Envelope-Grabbing-Funktion auf WeChat

In Verbindung stehende Artikel

Mehr sehen