<!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. js用ajax和不同页面的php互相传值的方法

    js里的代码:<script> var json; //获取所有class名为zhi的标签 var zhi = document.getElementsByClassName('zhi') ...

  2. 使用分布式数据库集群做大数据分析之OneProxy

    一.十亿数据,轻松秒出 实时监控领域有两个显著的特点,一是数据来源很多而且数据量大,有来自监控摄像头.GPS.智能设备等:二是需要实时处理.我们的客户在做实时处理时,就遇到这样的问题.客户的某个数据表 ...

  3. 20145218 《Java程序设计》第二周学习总结

    Java中的注释格式 单行注释 //注释文字 多行注释 /注释文字/ 文档注释 /**注释文字*/ 注释不仅仅是对代码进行解释,在上一篇博客中也写过,注释也可以用来检查程序中的错误,可以说是一个小窍门 ...

  4. Merkle Tree学习

    /*最近在看Ethereum,其中一个重要的概念是Merkle Tree,以前从来没有听说过,所以查了些资料,学习了Merkle Tree的知识,因为接触时间不长,对Merkle Tree的理解也不是 ...

  5. (01)odoo模型中调用窗体动作

    *模型代码  addons/stock/stock.py  ----------------   #移库单执行移库动作(弹出详细框)    @api.cr_uid_ids_context    def ...

  6. Objective－C（ 三、方法的声明与实现）

    OC方法的声明与实现 oc方法的声明在@interface中 大括号外@end上面 oc方法的实现在@implementation 中@end上面 OC方法中,一个参数对应一个冒号 方法名: 例  f ...

  7. XHR——XMLHttpRequest对象

    创建XMLHttpRequest对象 与之前众多DOM操作一样,创建XHR对象也具有兼容性问题:IE6及之前的版本使用ActiveXObject,IE7之后及其它浏览器使用XMLHttpRequest ...

  8. was7 安装遇到问题(Linux平台Redhat 6)

    1../launchpad.sh 无法启动安装,提示无法找到浏览器 解决:直接进入WAS文件夹,执行install cd WAS ./install 2.安装时中文乱码 设置区域为美国: LANG=e ...

  9. iOS通过openURL打开原生应用与页面（包括电话，短信，safari等）

    [[UIApplication sharedApplication] openURL:url];通过给url不同的值,可以实现调用系统自带 电话/短信/邮箱/浏览器/... 1.调用 电话phone[ ...

  10. 在 CentOS 7 中安装并使用自动化工具 Ansible

    Ansible是一款为类Unix系统开发的自由开源的配置和自动化工具.它用Python写成,类似于Chef和Puppet,但是有一个不同和优点是我们不需要在节点中安装任何客户端.它使用SSH来和节点进 ...