我在工作中时常使用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. HDU 3949 XOR

    3949 思路: 线性基,线性基的每个元素尽可能小 将k转换成二进制与排好序的线性基相对应 如果线性基的个数小于n,说明n个元素线性相关,所以可以构成0,k要减1 代码: #pragma GCC op ...

  2. Java 动态图片压缩

    今天收到领导的一个任务,说是图片太大导致服务器那边无法解析,要求图片大小大于102*126就压缩大小为102*126.同时文件是以Base64字符串的形式传过来的.具体压缩方法如下: /** * 图片 ...

  3. 雷林鹏分享：jQuery EasyUI 数据网格 - 创建子网格

    jQuery EasyUI 数据网格 - 创建子网格 使用数据网格(datagrid)的详细视图,用户可以展开一行来显示附加的详细信息. 任何内容都可以加载作为行详细,子网格也可以动态加载. 本教程将 ...

  4. gradle ----> 安装和使用

    1.安装gradle 参考官网教程:https://gradle.org/install/ 安装的前提:要求安装jdk1.7或者以上 比较重要的一步:配置环境变量,把gradle的bin目录的全路径配 ...

  5. 基于AngularJS的Onsen UI --Onsen UI学习笔记

    AngularJS与Onsen UI的结合,Onsen UI应用程序实际上是一个AngularJS 1应用程序. <!doctype html><html lang="en ...

  6. LeetCode--007--整数反转(java)

    给出一个 32 位的有符号整数,你需要将这个整数中每位上的数字进行反转. 示例 1: 输入: 123 输出: 321  示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出 ...

  7. LeetCode--367--有效的完全平方数

    问题描述: 给定一个正整数 num,编写一个函数,如果 num 是一个完全平方数,则返回 True,否则返回 False. 说明:不要使用任何内置的库函数,如  sqrt. 示例 1: 输入:16 输 ...

  8. linux进程管理之信号控制

    使用信号控制进程 ====================================================================================kill,ki ...

  9. 全站从http升级到https（WordPress博客）

    最近几年HTTPS取代HTTP已经成为大趋势,HTTP是超文本传输协议,信息是明文传输的,而HTTPS是安全超文本传输协议,需要证书和提供安全连接,换句话说,HTTPS是嵌套了SSL加密的HTTP连接 ...

  10. Confluence 6 修改空间名字和标识

    希望修改空间名称: 在空间名称的边上,选择  图标. 输入新的空间名称,然后单击 保存(Save). 标识(Logo )- 修改空间的名称和标识. 重新组织(Reorder) - 拖动来从新组织快捷链 ...