纯JavaScript实现基础表单验证的示例代码-js教程-PHP中文网

首页

web前端

js教程

纯JavaScript实现基础表单验证的示例代码

黄舟

May 14, 2018 pm 04:14 PM

javascriptjs验证

下面小编就为大家带来一篇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 + &#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;
}

以上是纯JavaScript实现基础表单验证的示例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

C和JavaScript：连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1）C 代码编译成WebAssembly模块，引入到JavaScript环境中，增强计算能力。2）在游戏开发中，C 处理物理引擎和图形渲染，JavaScript负责游戏逻辑和用户界面。

从网站到应用程序：JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

Python vs. JavaScript：比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。