欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-05-26 09:03:47
验证思路 监听每个input控件的焦点离开（onblue），当焦点离开时调用验证函数，验证后修改第三栏文字，显示符合/不符合并返回true/false 实现代码...

验证思路

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

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

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

实现代码：

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实现)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇： 抗衰老治疲劳的骨头汤的做法大全

下一篇： vue2中filter()的实现代码

推荐阅读