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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
Jun 18 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
JavaScript常用标签和方法总结
Sep 01 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 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 return语句的另一个作用
2014/07/30 PHP
php中in_array函数用法探究
2014/11/25 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
关于JS解构的5种有趣用法
2019/09/05 Javascript
python if not in 多条件判断代码
2016/09/21 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
python让函数不返回结果的方法
2020/06/22 Python
Django中Aggregation聚合的基本使用方法
2020/07/09 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
送给他或她的礼物:FUN.com
2018/08/17 全球购物
《云雀的心愿》教学反思
2014/02/25 职场文书
防火标语大全
2014/10/06 职场文书
客服专员岗位职责
2015/02/10 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
基于Python的EasyGUI学习实践
2021/05/07 Python
如何用python清洗文件中的数据
2021/06/18 Python
Python实现滑雪小游戏
2021/09/25 Python