我在工作中时常使用form验证，在目前的公司做的表单验证用的angular的form组件，对于一个有追求的前端，或者应用在移动端写个form验证，引入angular或者jquery组件等验证，难免显得臃肿，最好是原生js吧，轻量。幸运 的等到这一课，加上之前所学，慢慢融合根据需求，应用到工作项目中。。。

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="author" content="智能社 - zhinengshe.com" />

<meta name="copyright" content="智能社 - zhinengshe.com" />

<title>智能社 - www.zhinengshe.com</title>

<style>

input{ border:1px solid #ccc;}

.ok{ border-color:green;}

.error{ border-color:red;}

</style>

<script src="checkForm.js"></script>

<script>

window.onload = function(){

	checkForm("form1");

};

</script>

</head>

<body>

<form id="form1" action="http://www.zhinengshe.com/">

	用户名：<input type="text" name="username" value=""/><br /><br />

	电话号码：<input type="text" name="tel" value="010-84025890"/><br /><br />

	邮箱：<input type="text" name="email" value="chen00jian@sina.com"/><br /><br />

	年龄：<input type="text" name="age" value=""/><br /><br />

	<input type="submit"/>

</form>

</body>

</html>

　　

//版权 北京智能社©, 保留所有权利

var json = {

    username:/^[a-z][a-z0-9_\-$]{,}$/i,

    tel:/^([-]\d{,}-)?[-]\d{,}$/,

    email:/^\w+@[a-z0-\-]+(\.[a-z]{,}){,}$/i,

    age:/^([-]|[-]\d|)$/

};

function checkForm(id){

    var oForm = document.getElementById(id);

    var aInput = oForm.children;

    for(var i = ; i < aInput.length; i++){

        var re = json[aInput[i].name];

        if(re){

            (function(re){

                aInput[i].onblur = function(){

                    checkText(re,this);

                };

            })(re);

        }

    }

    function checkText(re,oText){

        if(re.test(oText.value)){

            oText.className = "ok";

            return true;

        } else {

            oText.className = "error";

            return false;

        }

    }

    oForm.onsubmit = function(){

        var bOk = true;

        for(var i = ; i < aInput.length; i++){

            var re = json[aInput[i].name];

            if(re){

                if(checkText(re,aInput[i]) == false){

                    bOk = false;

                }

            }

        }

        if(bOk == false){

            return false;

        }

    };

}

原生js（form）验证，可以借鉴下思路，应用到工作中的更多相关文章

  1. [待优化笔记]原生JS实现验证框架 checkFun

    ;(function(){ /** 验证框架 checkFun * 使用方法: * <input class="required" type="text" ...

  2. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  3. 原生JS 表单提交验证器

    转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...

  4. 原生js的联动全选

    开发应用中有很多工具可以使用,下面介绍一个原生js写的联动全选思路!!! <!DOCTYPE html> <html lang="en"> <head ...

  5. 原生js基础问题的一些备忘

    1.在原生js里面  window.onload=function(){}  这个就相当于jquery中 $(document).ready(function(){}); 这样 2.getElemen ...

  6. 【转】Eclipse去除js(JavaScript)验证错误

    这篇文章主要是对Eclipse去除js(JavaScript)验证错误进行了介绍.在Eclipse中,js文件常常会报错.可以通过如下几个步骤解决 第一步:去除eclipse的JS验证:将window ...

  7. 原生js制作表单验证，基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

  8. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  9. 原生js实现拖动滑块验证

    拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. EditText取消焦点

    EditText取消焦点: 在父容器添加: android:focusable="true" android:focusableInTouchMode="true&quo ...

  2. Gradle实现编译差异

    今天开发组长问了这么一个问题,如何实现通过gradle编译动态设置代码里的一些值.可能这么说不太明白,下面说依稀具体需求. 开发中有两个服务器:一个用于测试版本.一个用于线上版本发布,这两个服务器地址 ...

  3. git 命令详解

    初始化仓库 git init命令将目录初始化为一个仓库 git init 目录名 git 撤销commit git reset --hard <commit_id> git push or ...

  4. Jmeter 接口测试知识梳理——持续集成篇

    Jmeter 使用也有很长时间了,但是一直没有做一下知识梳理,近期会对公司同事做一下这方面的培训,借此机会,把使用过程中应用到的知识,或是遇到的问题,整理出来,方便大家学习! Jmeter + Ant ...

  5. python中文件的读和写操作

    一.打开文件 data = open("yesterday",encoding="utf-8").read() # python默认的打字符编码是unicode ...

  6. ubuntu 16.04 下安装smplayer视频播放器

    安装平台:ubuntu 16.04 1.sudo apt-add-repository ppa:rvm/smplayer 2.sudo apt-get update 3.sudo apt-get in ...

  7. boke例子：用户登录

    boke例子:用户登录 1.首先创建user表,authority表(角色),user_authority,表(用户角色表) Authority实体类,需要继承:GrantedAuthority类, ...

  8. 怎么从bam文件中提取出比对OR没比对上的paired reads | bamToFastq | STAR

    折腾这么多都是白瞎,STAR就有输出没有别对上的pair-end reads的功能 参见:How To Filter Mapped Reads With Samtools I had the same ...

  9. 20181013xlVba计算优秀率及合格率

    Sub 计算高一优秀合格率() Dim Wb As Workbook Dim Sht As Worksheet Dim oSht As Worksheet Dim dOs As Object 'Out ...

  10. Agile敏捷开发Planning Poker简介

    ​​关注嘉为科技,获取运维新知 一.为什么不用“人天”? 传统的IT项目,尤其是软件开发项目,往往使用“人天”来作为工作量评估的量词.甚至是代表一种评估方式.在软件项目开发经典著作<人月神话&g ...