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

基础表单验证（纯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. AC日记——魔方 洛谷 P2007

    魔方 思路: 模拟: 代码: #include <cstdio> #include <cstring> #include <iostream> #include & ...

  2. GridView的TemplateField

    BoundField只能显示一个单独的数据字段.如果我们想要在一个GridView列中显示两个或者更多的数据字段的值的时候该怎么办呢? 1. GridView的一列同时显示数据源中的两个字段 现需要显 ...

  3. Django+ openpyxl 导出文件，设置表头／内容格式

    之前使用xlrd.xlrt处理文件的导入导出,这两个主要用于excel2003格式的文件的读写,并且xlrt最多可以写入256行,大于256行会报错 找了新插件openpyxl,对它找到针对某一行设置 ...

  4. 让IE6/IE7/IE8支持CSS3属性的8种方法介绍

    我们都知道,IE浏览器暂不支持CSS3的一些属性.国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的 ...

  5. Windows下python的第三方库的安装

    D:\Python27\Scripts\pip.exe install beautifulsoup4

  6. python requests的安装与简单运用(转)

    http://www.cnblogs.com/fightformylife/p/4134986.html http://cn.python-requests.org/zh_CN/latest/ htt ...

  7. 洛谷 P3690 Link Cut Tree

    题目背景 动态树 题目描述 给定N个点以及每个点的权值,要你处理接下来的M个操作.操作有4种.操作从0到3编号.点从1到N编号. 0:后接两个整数(x,y),代表询问从x到y的路径上的点的权值的xor ...

  8. []ARC098

    咕咕咕 C:普及组难度的题 D:给定$a_{1\cdots n}$,求有多少$1\leq l\leq r\leq n$满足$x_l+\cdots+x_r=x_l\text^\cdots\text^x_ ...

  9. [CF403D]Beautiful Pairs of Numbers

    题意:给定$n,k$,对于整数对序列$\left(a_1,b_1\right),\cdots,\left(a_k,b_k\right)$,如果$1\leq a_1\leq b_1\lt a_2\leq ...

  10. 【博弈论】【SG函数】【找规律】Divide by Zero 2017 and Codeforces Round #399 (Div. 1 + Div. 2, combined) E. Game of Stones

    打表找规律即可. 1,1,2,2,2,3,3,3,3,4,4,4,4,4... 注意打表的时候,sg值不只与剩下的石子数有关,也和之前取走的方案有关. //#include<cstdio> ...