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

基础表单验证（纯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. IIS7.0添加IP地址和域名限制

    IIS7.0默认安装是没有“IP地址和域名限制”功能的,需要我们自己选择安装 1.windows系统的添加方式 控制面板--程序与功能--启用或关闭windows功能--internat inform ...

  2. [BZOJ3027][Ceoi2004]Sweet 容斥+组合数

    3027: [Ceoi2004]Sweet Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 135  Solved: 66[Submit][Status] ...

  3. EntityFramework整理

    最近公司项目需要,想要给订单增加一个状态修改记录. 说起来很简单的需求,但是做的时候,卡了我半天... 问题描述: 修改订单状态保存之前的时候,需要判断,如果新状态不等于旧状态,才做记录,但是在底层的 ...

  4. (10)python 特殊方法

    一.构造方法 在类中定义构造函数 >>> class a: def __init__(self): self.age=42 >>> f=a() >>&g ...

  5. HDU 1029 Ignatius and the Princess IV（数论）

    #include <bits/stdc++.h> using namespace std; int main(){ int n; while(~scanf("%d",& ...

  6. noi题库 1.7 字符串 10到第15题

    10:简单密码 描述 Julius Caesar曾经使用过一种很简单的密码.对于明文中的每个字符,将它用它字母表中后5位对应的字符来代替,这样就得到了密文.比如字符A用F来代替.如下是密文和明文中字符 ...

  7. CodeForces 348C Subset Sums(分块)（nsqrtn）

    C. Subset Sums time limit per test 3 seconds memory limit per test 256 megabytes input standard inpu ...

  8. 谜题12：ABC

    这个谜题要问的是一个悦耳的问题,下面的程序将打印什么呢? public class ABC{ public static void main(String[] args){ String letter ...

  9. CodeForces - 981D Bookshelves

    Discription Mr Keks is a typical white-collar in Byteland. He has a bookshelf in his office with som ...

  10. 【单调队列优化DP】BZOJ1855-[Scoi2010]股票交易

    [题目大意] 已知第i天的股票买入价为每股APi,第i天的股票卖出价为每股BPi(数据保证对于每个i,都有APi>=BPi),第i天的一次买入至多只能购买ASi股,一次卖出至多只能卖出BSi股. ...