我在工作中时常使用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. 修改Anaconda中的Jupyter Notebook默认工作路径

    这二天,安装了anaconda想更改jupyter的工作路径,在网上找了一下 方式1. 打开Windows的cmd,在cmd中输入jupyter notebook --generate-config如 ...

  2. PSFTP用法

    PSFTP是PuTTY SFTP客户端,用于本地与服务器间安全传输文件(使用SSH连接). 1. 启动PSFTP 在Windows命令提示符中输入 set PATH=C:/PSFTP.exe所在路径; ...

  3. Codeforces 444 C - DZY Loves Colors

    C - DZY Loves Colors 思路: 分块,复杂度有点玄学,和普通分块不同的是在这个块被一次染色的时候暴力染整个块. 代码: #pragma GCC optimize(2) #pragma ...

  4. Angular 学习笔记 ( timezone + moment + material date-picker + date pipe + asp.net core )

    参考 : https://stackoverflow.com/questions/29979609/time-conversion-with-timezoneinfo-for-past-years h ...

  5. redhat 7.0 配置Bond

    把/etc/sysconfig/network-scripts/目录下的ifcfg-bond*文件手动移动到/tmp目录. 重启网络:systemctl restart NetworkManager ...

  6. 通过 rufus 创建启动U盘，安装 VMWare Esxi

    现在谁还用光盘安装系统啊. 做出启动盘后,U盘启动进行安装才是王道. https://www.starwindsoftware.com/blog/create-an-esxi-6-5-installa ...

  7. Ubuntu自带截图工具screenshoot

    ​

  8. feign三：覆写feign的默认配置及feign的日志

    feign三:覆写feign的默认配置及feign的日志 默认配置复写 本项目地址:http://192.168.1.103:7601 本例是通过feign调用 eureka项目中的/eureka/a ...

  9. 输出图片格式BARTENDER

    try {                BarTender.Application btApp = new BarTender.Application();                BarTe ...

  10. BGP - 4，BGP的三张表

    1,BGP的三张表      邻居表(adjancy table)      BGP表(forwarding database):BGP默认不做负载均衡,会选出一条最优的,放入路由表      路由表 ...