<!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. PS去掉图片上的文字的6种基本方法，动态教程

    1.使用仿制图章工具去除文字这是比较常用的方法.具体的操作是,选取仿制图章工具,按住Alt键,在无文字区域点击相似的色彩或图案采样,然后在文字区域拖动鼠标复制以复盖文字.要注意的是,采样点即为复制的起 ...

  2. linux 下 `dirname $0`

    [`],学名叫“倒引号”, 如果被“倒引号”括起来,  表示里面需要执行的是命令.比如 `dirname $0`,  就表示需要执行   dirname $0  这个命令 [“”] , 被双引号括起来 ...

  3. android内存泄露小谈

    在做android的时候,用的语言大部分情况下都是java.以前最开始做的是编译器开发, 大部分情况都是用c语言和x86与arm架构的汇编,后来接触到ios用的是OC.对比之下, 感觉还是java用起 ...

  4. 【C#】获取当前系统桌面、我的照片、我的文档等路径

    获取当前系统桌面.我的照片.我的文档等路径   using System; using System.Collections.Generic; using System.ComponentModel; ...

  5. 琐碎的总结 css jQuery js 等等。。。

    jQuery  outerWidth(true)支持ie7 不错不错css  BFC   a {display:inline-block}  有用,block不是很有效果                ...

  6. WPF:xmal 静动态资源

    <StackPanel.Resources> <SolidColorBrush x:Key="myBrush" Color="Teal"/&g ...

  7. 127. 126. Word Ladder *HARD* -- 单词每次变一个字母转换成另一个单词

    127. Given two words (beginWord and endWord), and a dictionary's word list, find the length of short ...

  8. linux查看是否已安装GCC及安装GCC

    输入:gcc -v;如果提示未找到命令即表示没有安装 使用:yum install gcc即可

  9. CSS样式设置记录

    在不懂php和wordpress的情况下,需要按照样式内容用php+wordpress+mysql做个网站,网页上有许多样式需要设置,包括颜色字体等要跟要求一致,记录下今天的结果. <div i ...

  10. struts2视频学习笔记 13-14（自定义局部和全局类型转换器（转换Date格式））

    课时13 自定义类型转换器 局部(对某个action类) package tutorial; import java.util.Date; public class HelloWorld { priv ...