Home > Article > Web Front-end > Example code for implementing basic form validation in pure JavaScript

Example code for implementing basic form validation in pure JavaScript

黄舟Original: 2018-05-14 16:14:211442browse

The following editor will bring you a JavaScript basic form verification example (pure Js implementation). The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look.

Verification ideas

Monitor the focus of each input control Leave (onblue), when the focus leaves, the verification function is called. After verification, the text in the third column is modified to display compliance/non-compliance and return true/false

implementation Code:

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

The above is the detailed content of Example code for implementing basic form validation in pure JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Sample code for how to use JavaScript to implement the red envelope grabbing function on WeChatNext article：Sample code for how to use JavaScript to implement the red envelope grabbing function on WeChat

See more

Example code for implementing basic form validation in pure JavaScript

Related articles