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 相关文章推荐
ParseInt函数参数设置介绍
Jan 02 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
Dec 18 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 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
Laravel 5框架学习之表单
2015/04/08 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
Javascript valueOf 使用方法
2008/12/28 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
vue鼠标悬停事件实例详解
2019/04/01 Javascript
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
详解python单例模式与metaclass
2016/01/15 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
学生会竞聘书范文
2014/03/31 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
开学第一天的感想
2015/08/10 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
Mysql中mvcc各场景理解应用
2022/08/05 MySQL