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


Posted in Javascript onJuly 20, 2017

验证思路

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

Javascript 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
web页面数据展示新想法(json)
Jun 08 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
React Router基础使用
Jan 17 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
Jun 05 Javascript
微信小程序中如何使用flyio封装网络请求
Jul 03 Javascript
JS实现简易留言板增删功能
Feb 08 Javascript
js 事件的传播机制(实例讲解)
Jul 20 #Javascript
详谈for循环里面的break和continue语句
Jul 20 #Javascript
js is_valid_filename验证文件名的函数
Jul 19 #Javascript
vue Render中slots的使用的实例代码
Jul 19 #Javascript
详解vue前后台数据交互vue-resource文档
Jul 19 #Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 #Javascript
深入理解vue Render函数
Jul 19 #Javascript
You might like
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
php精度计算的问题解析
2019/06/21 PHP
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
jquery常用函数与方法汇总
2015/09/01 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
jQuery 中ajax异步调用的四种方式
2016/06/28 Javascript
JSON 数据格式详解
2017/09/13 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
python学习之编写查询ip程序
2016/02/27 Python
python字符串中的单双引
2017/02/16 Python
Python算法之图的遍历
2017/11/16 Python
python使用turtle绘制国际象棋棋盘
2019/05/23 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
python里反向传播算法详解
2020/11/22 Python
Python爬虫进阶之爬取某视频并下载的实现
2020/12/08 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
会计实习生自我鉴定
2013/12/12 职场文书
投资协议书范本
2014/04/21 职场文书
就业协议书盖章的注意事项
2014/09/28 职场文书
法院干警四风问题自我剖析材料
2014/09/29 职场文书
财务总监岗位职责
2015/02/03 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL