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

基础表单验证（纯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. [BZOJ2005][Noi2010]能量采集 容斥+数论

    2005: [Noi2010]能量采集 Time Limit: 10 Sec  Memory Limit: 552 MBSubmit: 4394  Solved: 2624[Submit][Statu ...

  2. Asp.net中web.config配置文件详解

    Web.config文件是一个XML文本文件,它用来储存 ASP.NET Web 应用程序的配置信息(如最常用的设置ASP.NET Web 应用程序的身份验证方式),它可以出现在应用程序的每一个目录中 ...

  3. Codeforces 1023 C.Bracket Subsequence-STL(vector) (Codeforces Round #504 (rated, Div. 1 + Div. 2, based on VK Cup 2018 Fi)

    C. Bracket Subsequence ... 代码: 1 //C 2 #include<iostream> 3 #include<cstdio> 4 #include& ...

  4. POJ 1163.The Triangle-动态规划

    The Triangle Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 50122   Accepted: 30285 De ...

  5. Codeforces 702A Maximum Increase(dp)

    题目链接:http://codeforces.com/problemset/problem/702/A 题意: 给你N个数,a[0], a[1], a[2], ....., a[n-1],让你找出最长 ...

  6. Maven学习笔记2

    Maven安装配置 1.下载Maven 官方地址:http://maven.apache.org/download.cgi 将下载的压缩包解压到你要安装 Maven 的文件夹.假设你解压缩到文件夹 – ...

  7. zoj3988

    zoj3988 题意 如果一个集合 \(\{i,j\}\) 满足 \(i\neq j\) 且 \(a[i]+a[j]\) 是素数,则称之为素数集合. 给出一些数字,这些数字可以组成多种素数集合,从这些 ...

  8. LCA+差分【p4427】[BJOI2018]求和

    Description master 对树上的求和非常感兴趣.他生成了一棵有根树,并且希望多次询问这棵树上一段路径上所有节点深度的\(k\) 次方和,而且每次的\(k\) 可能是不同的.此处节点深度的 ...

  9. CentOS 7安装tensorflow 1.6

    pip3 install tensorflow-gpu==1.6 1.6 依赖于cuda 9.0 cuDNN 7,并且前提需要下载和安装nvidia驱动. 安装驱动 nvidia 驱动地址: http ...

  10. Longest Absolute File Path -- LeetCode

    Suppose we abstract our file system by a string in the following manner: The string "dir\n\tsub ...