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 相关文章推荐
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
JavaScript模板引擎原理与用法详解
Dec 24 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
Apr 24 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php 错误处理经验分享
2011/10/11 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
浅谈JavaScript编程语言的编码规范
2011/10/21 Javascript
仿猪八戒网左下角的文字滚动效果
2011/10/28 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
基于KMP算法JavaScript的实现方法分析
2013/05/03 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
完美实现bootstrap分页查询
2015/12/09 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
微信小程序 条件渲染详解
2016/10/09 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
jQuery实现移动端图片上传预览组件的方法分析
2020/05/01 jQuery
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Django学习笔记之ORM基础教程
2018/03/27 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
物业公司采购员岗位职责
2013/12/31 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
python基础之类属性和实例属性
2021/10/24 Python