————————————————————————————————————————————

基础表单验证（纯js）

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

验证思路

  • 监听每个input控件的焦点离开（onblue），当焦点离开时调用验证函数，验证后修改第三栏文字，显示符合/不符合并返回true/false

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

实现代码：

index.html

 <!DOCTYPE html>

 <html>

 <head>

     <title></title>

     <link rel="stylesheet" href="css.css">

 </head>

 <body>

     <form id="form" action="" method="post" onsubmit="return vilidate()">

         <table class="table">

             <tr>

                 <td>雇员编号</td>

                 <td>

                     <input type="text" id="empnb" name="empnb" onblur="validateEmpnb()">

                 </td>

                 <td>

                     <span id="empnbMsg"></span>

                 </td>

             </tr>

             <tr>

                 <td>雇员姓名</td>

                 <td>

                     <input type="text" id="ename" name="ename" onblur="validateEname()">

                 </td>

                 <td>

                     <span id="enameMsg"></span>

                 </td>

             </tr>

             <tr>

                 <td>雇员职位</td>

                 <td>

                     <input type="text" name="epost" id="epost" onblur="validateEpost()">

                 </td>

                 <td>

                     <span id="epostMsg"></span>

                 </td>

             </tr>

             <tr>

                 <td>雇员日期</td>

                 <td>

                     <input type="text" name="" id="edate" name="edate" onblur="validateEdate()">

                 </td>

                 <td>

                     <span id="edateMsg"></span>

                 </td>

             </tr>

             <tr>

                 <td>基本工资</td>

                 <td>

                     <input type="text" name="esalary" id="esalary" onblur="validateEsalary()">

                 </td>

                 <td>

                     <span id="esalaryMsg"></span>

                 </td>

             </tr>

             <tr>

                 <td>佣金</td>

                 <td>

                     <input type="text" name="ebrok" id="ebrok" onblur="validateEbrok()">

                 </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="./FormValidation.js"></script>

 </html>

FormValidation.js

 // 日期选择

 function layDate() {

 }

 // 验证雇员编号,4位纯数字编号

 function validateEmpnb() {

     return validateRegexp("empnb", /^\d{4}$/);

 }

 // 验证雇员姓名,不为空

 function validateEname() {

     return validateNull("ename");

 }

 // 验证雇员职位,不为空

 function validateEpost() {

     return validateNull("epost");

 }

 // 验证雇员日期

 function validateEdate() {

     return validateRegexp("edate", /^\d{4}-\d{2}-\d{2}$/)

 }

 // 验证基本工资

 function validateEsalary() {

     return validateRegexp("esalary", /^\d+(\.\d{1,2})?$/)

 }

 // 验证佣金

 function validateEbrok() {

     return validateRegexp("ebrok", /^\d+(\.\d{1,2})?$/)

 }

 // 提交时全部重新验证

 function validate() {

     return validateEmpnb() && validateEname() && validateEpost() && validateEdate() && validateEsalary() && validateEbrok();

 }

 // 正则表达式验证

 function validateRegexp(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 validateNull(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 solid;

 }

 .table tr {

     height: 2rem;

 }

 .table td {

     width: 15rem;

 }

JavaScript | 基础表单验证（纯Js）的更多相关文章

  1. 第一百五十四节，封装库--JavaScript，表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  2. 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证

    封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...

  3. 第一百五十二节，封装库--JavaScript，表单验证--年月日注入

    封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...

  4. 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全

    封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...

  5. 第一百五十节，封装库--JavaScript，表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  6. 第一百四十九节，封装库--JavaScript，表单验证--验证用户名

    封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...

  7. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  8. JavaScript：基础表单验证

    在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个 ...

  9. JavaScript：表单验证模型

    之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...

随机推荐

  1. 安装配置Elasticserch的方法

    1.安装java环境 先查看环境是否安装 yum list installed |grep java 如果存在自带的环境则卸载 yum -y remove java--openjdk* 查看安装包 y ...

  2. 【转】jenkins插件pipeline使用介绍

    摘要: pipeline字面意思就是流水线,将很多步骤按顺序排列好,做完一个执行下一个.下面简单介绍下如何使用该插件帮我们完成一些流水线型的任务 pipeline字面意思就是流水线,将很多步骤按顺序排 ...

  3. CF 612C. Replace To Make Regular Bracket Sequence【括号匹配】

    [链接]:CF [题意]:给你一个只含有括号的字符串,你可以将一种类型的左括号改成另外一种类型,右括号改成另外一种右括号 问你最少修改多少次,才能使得这个字符串匹配,输出次数 [分析]: 本题用到了栈 ...

  4. 树状数组优化DP 【模拟赛】删区间

    哇,难受得一匹. 看到题的一瞬间竟然只想到了\(n^3\)的区间\(DP\) 一.\(40pts\) 设\(f[i][j]\)代表删去\(i\)到\(j\)这一段区间的最小代价和. 然后直接写普通的区 ...

  5. 简单工厂模式（Factory）

    设计模式序言:这是开始学习设计模式的第一步,也是相对简单的一个设计模式,简单工厂设计模式. 简单工厂就是将业务进行封装,减少代码之间的耦合度,使代码更易于扩展和维护. 以下是简单工厂设计模式的图解: ...

  6. [UOJ164]V

    线段树真是好东西... 每个线段树节点维护四个标记:$a,b,maxa,maxb$,$(a,b)$表示对子树内的所有数执行$x'=\max(x+a,b)$,$maxa,maxb$是历史最大标记,初始时 ...

  7. [CF842E]Nikita and game

    [CF842E]Nikita and game 题目链接: CF842E 博客地址: [CF842E]Nikita and game - skylee 题目大意: 一棵树初始只有一个编号为\(1\)的 ...

  8. (转)[Unity3D]关于Assets资源目录结构管理

    分享个我们项目常用的目录结构,微调过很多次,最终到了这个版本.个人认为这种管理资源方式是不错的.欢迎探讨各个细节~ 更新于2013.5.30   Asserts   --Editor 自写的灵活方便插 ...

  9. 每天一个linux命令12之top

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是一个动态显示过程,即可以通过用户按键来不断刷新 ...

  10. Linux下使用xargs得到字符串作为参数进行输出、awk得到字符串作为参数进行输出

    背景: cat test.txt 实例: 1.xargs cat test.txt | xargs -i echo {} cat test.txt | xargs -I {} echo {} 大小写i ...