<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="author" content="liuyi -liuyi.com" />

<meta name="copyright" content="liuyi - liuyi.com" />

<title>liuyi - www.liuyi.com</title>

<style>

input{border:1px solid #ccc;}

input.ok{border:1px solid green;}

input.error{border:1px solid red;}

</style>

<script>

//方便维护

var json = {

	username:/^[a-z_]\w{5,31}$/i,

	pass:/^.{6,32}$/i,

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

	tel:/^(0\d{2,3}-)?[1-9]\d{6,7}$/,

	age:/^(1[89]|[2-9]\d|100)$/

};

window.onload = function(){

	var oFrom = document.getElementById("from1");

	var aInput = oFrom.getElementsByTagName("input");

	//失焦校验

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

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

		if(re){

			(function(re){

				aInput[i].onblur = function(){

					//alert(re)

					checkText(re,this);

				};

			})(re);

		}

	}

	function checkText(re,oText){

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

			oText.className = "ok";

			return true;

		} else {

			oText.className = "error";

			return false;

		}

	}

	oFrom.onsubmit = function(){

		var bOk = true;

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

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

			if(re){

				//做校验

				/*if(re.test(aInput[i].value)){

					aInput[i].className = "ok";

				} else {

					aInput[i].className = "error";

					bOk = false;

					//return false;

				}*/

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

					bOk = false;

				}

			}

		}

		return bOk;

	};

};

</script>

</head>

<body>

<form id="from1" action="http://www.liuyi.com/">

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

	密 码：<input type="text" name="pass" value=""/><br /><br />

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

	座 机：<input type="text" name="tel" value="0214-31661688"/><br /><br />

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

	<input type="submit"  /><br /><br />

</form>

</body>

</html>

　　

表单验证与Json配合的更多相关文章

  1. AJAX（表单验证）/JSON之一

    ## 什么是Ajax AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). 1. 异步通信:浏览器利用独立的线程与服务器进行通信, ...

  2. 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法，日期转换和前台显示格式之间，还有JSON取日期数据格式转换成标准日期格式的问题

    项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...

  3. jQuery表单验证以及将表单序列化为json对象小练习

    jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...

  4. JavaScript自学笔记（1）---表单验证，let和const,JSON文件

    今天开个JS自学笔记,本身JS的语法很简单,如果学过Java或者C系的都很容易,就不讨论了.主要是讨论实际应用的问题. 1.表单验证: a.html自动验证: HTML 表单验证可以通过浏览器来自动完 ...

  5. summernote富文本编辑器配合validate表单验证无法进行表单提交的问题

    1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统（33）-MVC 表单验证

    系列目录 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可或缺的,微软的东西还是做得比较人性化的,从webform到MVC,都做到了双向验证 单单的用js实现的前端 ...

  7. AngularJS中的表单验证

    AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则 ...

  8. ThinkPHP框架表单验证

    对注册到test表的表单进行验证 在注册之前要对表单进行验证: 用户名非空验证,两次输入密码必须一致即相等验证,年龄在18~50之间即范围验证,邮箱格式正则验证. 自动验证是ThinkPHP模型层提供 ...

  9. 表单验证之validform.js使用方法

    一.validform有什么用? 网页上有大量的input需要你进行验证的时候,如果是弹窗的话,需要不停地判断,如果为空,弹窗.如果不是数字,弹窗. 所以要将这么多验证交给一个js去验证. 二.我现在 ...

随机推荐

  1. COM组件（MFC篇）

    目录 第1章创建进程内组件    1 1.1 目标    1 1.2 创建项目    3 1.2.1 VC++6.0    3 1.2.2 VC++2010    4 1.2.3 VC++6.0与VC ...

  2. requestAnimationFrame在Chrome里的实现

    requestAnimationFrame是HTML5游戏和动画必不可少的函数,相对于setTimeout或setInterval它有两个优势,一是它注册的回调函数与浏览器的渲染同步,不用担心Time ...

  3. java 集合（Map3）

    Map接口下的实现类: HashMap 1.存储原理: 向HashMap中添加元素时,首先会调用hashCode(),算的哈希值,然后 算出该元素在哈希表中的存储位置. 情况1 情况2(java  集 ...

  4. java 集合2（迭代器）

    迭代器方法:(把迭代器想象成抓娃娃机的爪子) hasNext()     问是否有元素可遍历,如果有元素可以遍历,返回true,否则返回false 工作原理:这一个迭代的过程是这样的,获取到迭代器时候 ...

  5. const 不再迷茫

    博客地址:http://blog.csdn.net/jiangxinnju github:https://github.com/jiangxincode 首先说明一下const在C和C++中的主要用法 ...

  6. 创建和使用Windows静态链接库

    首先明确这篇文章的目的,我希望大家能够通过这篇文章了解一下如何在实际工作中创建和使用Windows平台下的静态链接库.关于链接库的概念,希望大家参考维基百科"Library"词条( ...

  7. jmeter笔记5

    性能测试是任何分布式或Web应用程序测试计划的重要组成部分.在计划和开发周期中进行性能评价,可以保证交付给客户的应用程序满足客户对于高负载.可用性和可伸缩性的要求.提前确定软件的负载限制可以为适当地进 ...

  8. IDE显示无法打开源文件时解决方案

      解决方法:加上具体地址信息将 #include <qwidgetresizehandler_p.h> 改为 #include <C:\Users\INnoVation\Deskt ...

  9. cf--------(div1)1A. Theatre Square

    A. Theatre Square time limit per test 2 seconds memory limit per test 64 megabytes input standard in ...

  10. 读书笔记2：HTTP协议

    HTTP是什么 HTTP定义 HTTP( Hypertext Transfer Protocol, 超文本传输协议) 是在万维网上进行通信时所使用 的协议方案. HTTP的地位 了解HTTP协议的地位 ...