JavaScript 基础表单验证示例(纯Js实现)

验证思路

监听每个input控件的焦点离开（onblue），当焦点离开时调用验证函数，验证后修改第三栏文字，显示符合/不符合并返回true/false

实现代码：

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 + 'Msg')
  console.log(regexp);
  console.log(elem.value);
  if (regexp.test(elem.value)) {
    msg.innerHTML = 'ok';
    msg.style.color = 'green';
    return true;
  } else {
    msg.innerHTML = '您的输入不符合规则';
    msg.style.color = 'red';
    return false;
  }
}
// 不为空验证
function vapdateNull(elemName) {
  var elem = document.getElementById(elemName);
  var msg = document.getElementById(elemName + 'Msg');
  console.log(elem.value);
  console.log(msg);
  if (elem.value == '' || elem.value == ' ') {
    msg.innerHTML = '您的输入不能为空';
    msg.style.color = 'red';
    return false;
  } else {
    msg.innerHTML = 'ok';
    msg.style.color = 'green';
    return true;
  }
}

css.css

html {
  font-size: 14px;
}

.table {
  border: 1px grey sopd;
}

.table tr {
  height: 2rem;
}

.table td {
  width: 15rem;
}

以上这篇JavaScript 基础表单验证示例(纯Js实现)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

# js表单验证 # JavaScript表单验证示例详解 # 原生js实现表单的正则验证（验证通过后才可提交） # 原生js 实现表单验证功能 # JavaScript实现表单验证功能 # JS简单表单验证功能完整示例 # JavaScript使用表单元素验证表单的示例代码 # JavaScript实现表单注册、表单验证、运算符功能 # JS实现的简单表单验证功能完整实例 # JS实现的简单表单验证功能示例 # JavaScript实现表单验证 # 为空 # 您的 # 基本工资 # 给大家 # 希望能 # 不符合 # 这篇 # 表单 # 小编 # 大家多多 # 正则表达式 # action # id # form # onsubmit # post # method # css # href # stylesheet

返回目录在线咨询

上一篇：基于OpenCV Python的RGB与深度图像对齐教程
下一篇：免费建站平台自助建站系统整合微信小程序与SEO优化

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

JavaScript 基础表单验证示例(纯Js实现)

您的项目需求