<!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. jQuery图片延迟加载插件jQuery.lazyload使用方法（转）

    使用方法 1.引用jquery和jquery.lazyload.js到你的页面 <script src="jquery-1.11.0.min.js"></scri ...

  2. 1029c语言文法2理解

    program → external_declaration | program external_declaration <程序>→ <外部声明>|<程序>< ...

  3. ERROR 1130: Host 'root@localhost' is not allowed to connect to MySQL server

    连接mysql时遇到的错误. 原因:该用户没有权限连接访问mysql数据库 解决方法:网站上搜了好多,试了都没有用.最终在登陆的信息页面用root用户登陆时不输入root密码即可.

  4. 笔记7：winfrom的一些知识点（一）

    一.MDI窗体 private void 添加窗体ToolStripMenuItem_Click(object sender, EventArgs e) { Form2 frm1 = new Form ...

  5. struts2在pom.xml中的配置

    <dependencies> <dependency> <groupId>org.apache.struts</groupId> <artifac ...

  6. md5算法原理一窥（其一）

    首先,需要了解的事,md5并不是传说中的加密算法,只是一种散列算法.其加密的算法并不是我们说所的那样固定不变,只是一种映射的关系. 所以解密MD5没有现成的算法,只能用穷举法,把可能出现的明文,用MD ...

  7. springMVC 验证器

    采用Hibernate-validator来进行验证,Hibernate-validator实现了JSR-303验证框架支持注解风格的验证.首先我们要到http://hibernate.org/val ...

  8. webapi方式

    随笔 - 112  文章 - 0  评论 - 334 ASP.NET MVC学习系列(二)-WebAPI请求   继续接着上文 ASP.NET MVC学习系列(一)-WebAPI初探 来看看对于一般前 ...

  9. WebAPI用法

    ASP.NET Web API(一):使用初探,GET和POST数据[Parry] HttpClient + ASP.NET Web API, WCF之外的另一个选择[dudu] 通过这两篇文章让我了 ...

  10. CentOS hadoop启动错误 JAVA_HOME is not set and could not be found

    ... Starting namenodes on [] localhost: Error: JAVA_HOME is not set and could not be found. localhos ...