我在工作中时常使用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. 学习笔记4-pathon的range()函数和list()函数

    使用python的人都知道range()函数很方便,今天再用到他的时候发现了很多以前看到过但是忘记的细节.这里记录一下range(),复习下list的slide,最后分析一个好玩儿的冒泡程序. 这里记 ...

  2. keys()，values()和items()

    a={'a':11,'b':'bb','c':321}for x in a.items(): print(x)  # 每条都输出来print("------------")for ...

  3. Python PyQt5 Pycharm 环境搭建及配置

    PyQt5相关安装 python 版本 python 3.6.3  1.安装PyQt5 执行命令: pip install pyqt5 2.安装PyQt5-tools 执行命令:pip install ...

  4. angular2 学习笔记 (Typescript - Attribute & reflection & decorator)

    更新 : 2018-11-27 { date: Date } 之前好像搞错了,这个是可以用 design:type 拿到的 { date: Date | null } 任何类型一但配上了 | 就 de ...

  5. 理解css相邻兄弟选择器

    今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling se ...

  6. js获取url传递得参数

    方法一:正则法 function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(& ...

  7. 数据结构（C语言版）-第5章 树和二叉树

    5.1  树和二叉树的定义 树(Tree)是n(n≥0)个结点的有限集,它或为空树(n = 0):或为非空树,对于非空树T:(1)有且仅有一个称之为根的结点:(2)除根结点以外的其余结点可分为m(m& ...

  8. pandas的时间戳

    pandas时间: p1=pd.Timestamp(2018, 2, 3) p1输出:2018-02-03 00:00:00 p1输出类型:<class 'pandas._libs.tslib. ...

  9. Vue.js的后端数据支持：使用Express建立app, 并使用MongoDB数据库。

    需要用到的backed tech stack: Node: JavaScript on the server/backend. That's basically what it is, but mor ...

  10. windows上使用composer安装yii2

    切换成中国镜像 composer config -g repo.packagist composer https://packagist.laravel-china.org 在电脑的dos命令中写入: ...