Exemple de code pour implémenter la validation de formulaire de base en JavaScript pur-js tutoriel-php.cn

Exemple de code pour implémenter la validation de formulaire de base en JavaScript pur

黄舟

Libérer： 2018-05-14 16:14:21

original

1460 Les gens l'ont consulté

L'éditeur suivant vous apportera un exemple de vérification de formulaire de base JavaScript (implémentation Js pure). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil

Idées de vérification

Écoutez l'objectif de chaque entrée control Leave (onblue), lorsque le focus quitte, la fonction de vérification est appelée. Après vérification, le texte de la troisième colonne est modifié pour afficher conformité/non-conformité et renvoyer vrai/faux

<.>

Code d'implémentation :

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>

Copier après la connexion

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;
  }
}

Copier après la connexion

css.css

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!