我在工作中时常使用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. Visual Studio常用设置

    ●Visual Studio 2008以后,修改代码中大括号的颜色:Tools-->Environment-->Fonts and Colors-->右边[Display items ...

  2. MYSQL常用函数（系统信息函数）

    DATABASE()   返回当前数据库名 BENCHMARK(count,expr)  将表达式expr重复运行count次 CONNECTION_ID()   返回当前客户的连接ID FOUND_ ...

  3. Codeforces 801B - Valued Keys

    B. Valued Keys 题目链接:http://codeforces.com/contest/801/problem/B time limit per test 2 seconds memory ...

  4. lua --- 逻辑运算符小结

    lua中的逻辑运算符,认为只有false.nil为假,其他的都为真(包括0.空串) a and b    -- 如果a为false,则返回a,否则返回b a or b   -- 如果a为true,则返 ...

  5. C# 读取配置文件方法

    如 xml中写: <?xml version="1.0" encoding="utf-8" ?> <config> <serv_i ...

  6. compile FFMPEG under windows

    这个文章应该算是中文版最好的了.但是还有一些需要修正. 特别是winsock2的处理 win10 msys2 vs2015 ffmpeg3.2.2 编译 这个英文版的才是最好的 Building ff ...

  7. ERROR org.redisson.client.handler.CommandDecoder - Unable to decode data. channel

    一.异常出现的场景 某一天下午,测试突然跑过来说,IOS系统APP访问500,Android没问题.我的第一反应是那就奇怪了,调的接口都是一样的,莫非和系统有关系.而且这个错误重启服务后,过一段时间才 ...

  8. Confluence 6 如何考虑设置一个空间的主页

    这空间是干什么的?空间主页是访问你空间的用户最先看到的页面.如果你在这个页面中包含一些你空间是干什么的内容能够帮助你的用户更加容易的访问你的空间,同时也能够让你的用户更加容易了解你正在工作的事情.你可 ...

  9. PHP用PDO

    $pdo = new PDO('mysql:host=localhost;dbname=jmyp','root','root'); $pdo->exec('set names utf8'); $ ...

  10. mysql知识点总结

    一.mysql_connect(),在php7已移除,有mysqli_connect(),pdo,代替. <?php header("Content-type:text/html;ch ...