完成这个综合小案例，对于html、css、javascript的大部分内容复习快结束了。

这里做一个小案例——要实现的功能，以一张图片的形式给出：

首先，写出提交数据之后进入的页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

	<h1><font color="#FF0000">恭喜你 ,提交数据成功</font></h1>

</body>

</html>

接着编写主程序：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript"> 

	//检查用户名

	function checkName(){

		var inputNode = document.getElementById("userName");

		var spanNode = document.getElementById("userId");

		//获取输入框的内容

		var content  = inputNode.value;//注意：可以根据value属性值，来获取前台输入的内容。

		//用户名的规则： 六位的英文与数字组成。数字不能开头

		var reg = /^[a-z][a-z0-9]{5}$/i;

		if(reg.test(content)){

			//符合规则

			spanNode.innerHTML = "正确".fontcolor("green");

			return true;

		}else{

			//不符合规则

			spanNode.innerHTML = "错误".fontcolor("red");

			return false;

		}

	}

	//检查邮箱

	function checkEmail(){

		var email = document.getElementById("email").value;

		var spanNode = document.getElementById("emailspan");

		//编写邮箱的正则       13456@qq.com  13456@qq.net  13456@qq.com.cn

		var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i;

		if(reg.test(email)){

			//符合规则

			spanNode.innerHTML = "正确".fontcolor("green");

			return true;

		}else{

			//不符合规则

			spanNode.innerHTML = "错误".fontcolor("red");

			return false;

		}

	}

	function checkAll(){

		var userName = checkName();

		var email = checkEmail();

		if(userName&&email){

			return true;

		}else{

			return false;

		}

	}

/*

 表单提交的时候是会触发onsubmit事件的，如果onsubmit事件的方法返回是true，那么该表单允许提交，如果返回的是false，该表单不允许提交。

*/

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>正则表达式</title>

</head>

<body>

<form action="success.html" method="get" onsubmit="return checkAll()" > <!--如果表单提交时候触发的方法返回是false,那么该表单不允许提交，如果返回的是true允许提交 -->

			<table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px">

				<tr>

					<td width="25%">姓名:</td>

					<td>

						<input type="text" name="userName" id="userName" onblur="checkName()"/>

                        <span id="userId"></span>

					</td>

				</tr>

				<tr>

					<td >密码:</td><td>

						<input type="password"  name="pwd" id="pwd" onblur="checkPass()"/>

                        <span id="passId"></span>

					</td>

				</tr>

				<tr>

					<td>确认密码:</td><td>

				<input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" />		                <span id="ensure"></span>

					</td>

				</tr>

				<tr>

					<td>邮箱</td><td>

						<input type="text" name="email" id="email" onblur="checkEmail()"/>

                		<span id="emailspan"></span>

					</td>

				</tr>

				<tr>

					<td>性别</td><td>

						<input type="radio" checked="ture" name="gender" id="male" value="male"/>

					男

						<input type="radio" name="gender" value="female"/>

					女</td>

				</tr>

				<tr>

					<td>爱好:</td><td>

						<input type="checkbox"  name="like" />

					eat

						<input type="checkbox" name="like" />

					sleep

						<input type="checkbox" name="like"/>

					play

                    <span id="hobbySpan"></span>

                    </td>

				</tr>

				<tr>

					<td>城市</td><td>

					<select name="city" id="city">

						<option value=""> 请选择</option>

						<option value="bj"> 北京 </option>

						<option value="gz"> 广州 </option>

						<option value="sh"> 上海 </option>

					</select>

                    </td>

				</tr>

				<tr>

					<td>自我介绍</td><td>					<textarea cols="15" rows="5"  name="myInfo" id="myInfo"></textarea></td>

				</tr>

				<tr align="center">

					<td colspan="2"><!--提交按钮-->

					<input type="submit"/>

					</td>

				</tr>

			</table>

		</form>

</body>

</html>

javascript综合小案例，校验用户注册信息提交的更多相关文章

  1. 一个ssm综合小案例-商品订单管理----写在前面

    学习了这么久,一直都是零零散散的,没有把知识串联起来综合运用一番 比如拦截器,全局异常处理,json 交互,RESTful 等,这些常见技术必须要掌握 接下来呢,我就打算通过这么一个综合案例把这段时间 ...

  2. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  3. 【JavaScript定时器小案例】常见的几种定时器实现的案例

    [JavaScript定时器小案例]常见的几种定时器实现的案例 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 在日常开发 ...

  4. javascript常用小案例

    常用javascript小案例 样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往 ...

  5. JavaScript基础--小案例：在网页指定位置弹出错误信息(十二)

    案例分析:点击按钮后,在网页上指定区域,提示错误信息!5秒后,错误信息提示自动消失! <script languag="javascript" type="text ...

  6. 使用 Struts2 校验器校验用户注册信息

    基于验证框架的输入校验 一.创建一个struts2项目testValidators.Struts2 初体验:http://www.cnblogs.com/likailan/p/3280820.html ...

  7. 使用 Struts2 校验器校验用户注册信息的例子

    转自:https://blog.csdn.net/jin2005006/article/details/53999562 基于验证框架的输入校验 一.创建一个struts2项目testValidato ...

  8. Javascript 使用小案例

    十四.cookie相关 1 <!DOCTYPE html> <html> <head> <script> function setCookie(cnam ...

  9. 《java入门第一季》之面向对象综合小案例

    需求: /*     教练和运动员案例         乒乓球运动员和篮球运动员.         乒乓球教练和篮球教练.         跟乒乓球相关的人员都需要学习英语.         分析,这 ...

随机推荐

  1. Redis出现多线程调用时抛出 [B cannot be cast to java.lang.Long] 异常

    原因分析: 多个线程同时调用了同一个jedis对象,导致内存数据被多个线程竞争,产生数据混乱 (或者大家都用通一个redis获取同一个实例,登录同一个账号使用缓存时报错) 解决方案:每个线程都new出 ...

  2. 聊聊LightProbe原理实现以及对LightProbe数据的修改

    0x00 前言 最近工作比较忙,所以文章已经很久没有更新了.这篇小文的主题也是在出差的高铁上想到,因为最近和一些朋友聊天,发现他们中很多人的项目中都使用了多个实时光源.细问之下主要是某些物体,例如角色 ...

  3. 剑指架构师系列-ActiveMQ队列的使用

    安装ActiveMQ只需要下载包后解压,然后就可以启动与关闭ActiveMQ了,如下: ./activemq start ./activemq stop 访问管理页面: http://10.10.20 ...

  4. Node.js 控制台

    稳定性: 4 - 冻结 {Object} 用于打印输出字符到 stdout 和 stderr.和多数浏览器提供的 console 对象函数一样,Node 也是输出到 stdout 和 stderr. ...

  5. [BBS]搭建开源论坛之JForum安装使用札记

    本文作者:sushengmiyan 本文地址:http://blog.csdn.net/sushengmiyan/article/details/47761303 目录 目录 BBS搭建开源论坛之JF ...

  6. 剑指Offer——知识点储备-故障检测、性能调优与Java类加载机制

    剑指Offer--知识点储备-故障检测.性能调优与Java类加载机制 故障检测.性能调优 用什么工具可以查出内存泄露 (1)MerroyAnalyzer:一个功能丰富的java堆转储文件分析工具,可以 ...

  7. Hibernate之实体关系映射

    延迟加载与即时加载 例如Person类和Email类是一对多关系,如果设为即时加载,当加载Person时,会自动加载Email,如果设置为延迟加载,当第一次调用person.getEmails()时才 ...

  8. Android双击退出

    重写返回键 private long tempTime = 0; /** * 双击退出 */ @Override public void onBackPressed() { long firstCli ...

  9. Java程序员必备知识-多线程框架Executor详解

    为什么引入Executor线程池框架 new Thread()的缺点 每次new Thread()耗费性能 调用new Thread()创建的线程缺乏管理,被称为野线程,而且可以无限制创建,之间相互竞 ...

  10. 21 FragmentTabHost +Fragment代码案例

    注意头导航标签过多会被压缩并 结构 MainActivity.java package com.qf.day21_fragmenttabhost_demo1; import com.qf.day21_ ...