<!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. VC++编译GSL

    目录 第1章 VC++    1 1.1 修改行结束符    1 1.2 修改#include "*.c" 为 #include "*.inl"    2 1. ...

  2. program testy data

    做项目得用数据吧,拿去.... 1.Data.gov搜索   美国政府去年承诺使所有政府数据都能在网上免费获得.这个网站是第一阶段,作为一个门户网站,囊括了从气候到犯罪的一切惊人的信息.   2. 美 ...

  3. base（C# 参考）

    原文地址:https://msdn.microsoft.com/zh-cn/library/hfw7t1ce.aspx base 关键字用于从派生类中访问基类的成员: 调用基类上已被其他方法重写的方法 ...

  4. bfs A strange lift

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1548 There is a strange lift.The lift can stop can at e ...

  5. django 2

    创建一个管理员用户 首先,我们需要创建一个用户可以登录到管理网站. 运行 下面的命令: $ python manage.py createsuperuser 输入你想要的用户名,按回车. Userna ...

  6. js中style,currentStyle和getComputedStyle的区别

    1.style只能获取元素的内联样式,内部样式和外部样式是获取不到的.例子: <div id="test" style="width:100px;height:20 ...

  7. ARM 汇编的一些规范

    A.5.1  文件格式        ARM 源程序文件(即源文件)为文件格式,可以使用任一文本编辑器编写程序代码.         在一个项目中,至少要有一个汇编源文件或C 程序文件,可以有多个汇编 ...

  8. 给Eclipse中hibernate.cfg.xml配置文件加提示

    在hibernate框架需要的jar包中找到hibernate3.jar,并用压缩软件打开,如图: 2 选择org文件夹--打开下一级文件夹 3 点击类型,方便找到dtd文件,下拉查看dtd文件,有两 ...

  9. 算法——js(Fibonacci数列)

    斐波那契数列(Fibonacci sequence),又称黄金分割数列,因数学家列昂纳多·斐波那契(Leonardoda Fibonacci[1]  )以兔子繁殖为例子而引入,故又称为“兔子数列”,指 ...

  10. 集群（cluster）原理（转）

      1.什么是集群 集群(cluster)就是一组计算机,他们作为整体向用户提供一组网络资源.这些单个的计算机系统就是集群的节点(node).一个理想的集群是,用户从不会意识到集群系统底层的节点,在他 ...