JavaScript 基础表单验证示例(纯Js实现)
时间:2019-03-30
本文章向大家介绍JavaScript 基础表单验证示例(纯Js实现),主要包括JavaScript 基础表单验证示例(纯Js实现)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
验证思路
监听每个input控件的焦点离开(onblue),当焦点离开时调用验证函数,验证后修改第三栏文字,显示符合/不符合并返回true/false
实现代码:
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实现)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 一个小实验,验证一个大受欢迎数据库的容器化
- 【选择题】Java基础测试四(15道)
- GO语言并发编程之互斥锁、读写锁详解
- GO语言标准错误处理机制error用法实例
- spring框架复习大纲【面试+提高】
- Go语言中的Array、Slice、Map和Set使用详解
- go的websocket实现原理与用法详解
- go语言base64加密解密的方法
- Go语言轻量级线程Goroutine用法实例
- Go语言的队列和堆栈实现方法
- Go语言使用sort包对任意类型元素的集合进行排序的方法
- TiDB 源码阅读系列文章(五)TiDB SQL Parser 的实现
- [go语言]吐槽:怎么样实现支持并发访问的数据集合更好?
- 利用缓冲信道来实现网游帐号验证消息的分发和等待
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 简单学习PHP中的层次性能分析器
- 常见乱码问题分析
- 深入理解 Vue 模板渲染:Vue 模板反编译
- 彻底搞懂 etcd 系列文章(七):etcd gRPC 服务 API
- NIFI 开发注解详述
- [已解决]java请求爬取https网站报错javax.net.ssl.SSLHandshakeException的解决办法
- 面经手册 · 第7篇《ArrayList也这么多知识?一个指定位置插入就把谢飞机面晕了!》
- JsonPath实践(六)
- 自定义Processor组件
- Android开发第三讲,布局管理器
- Android 开发第四讲 TextView的基本使用
- Android 开发第五讲 学习Button了解Button属性
- Android开发第六讲EditText 编辑框
- Android 开发第七讲 RadioButton (单选按钮)
- linux内核写时复制机制源代码解读