结合天天生鲜的用户注册页面，学习验证表单js

register.js--表单验证源码

$(function(){

	var error_name = false;

	var error_password = false;

	var error_check_password = false;

	var error_email = false;

	var error_check = false; //是否同意页面上的那个协议选框

	$('#user_name').blur(function() { //blur表示失去焦点时去执行check_user_name来验证用户名

		check_user_name();

	});

	$('#pwd').blur(function() {

		check_pwd();

	});

	$('#cpwd').blur(function() {

		check_cpwd();

	});

	$('#email').blur(function() {

		check_email();

	});

	//选定协议勾选框

	$('#allow').click(function() {

		if($(this).is(':checked')) //也可写成if($(this).prop('checked')

		{

			error_check = false;

			$(this).siblings('span').hide(); //也可写成$('.error_tip2').hide()

		}

		else

		{

			error_check = true;

			$(this).siblings('span').html('请勾选同意');

			$(this).siblings('span').show();

		}

	});

	function check_user_name(){

		var len = $('#user_name').val().length; //val() 方法返回或设置被选元素的值，多用于input元素。

		if(len<5||len>20)

		{

			$('#user_name').next().html('请输入5-20个字符的用户名')

			$('#user_name').next().show(); //将上面的提示信息显示出来

			error_name = true;

		}

		else

		{

			$('#user_name').next().hide(); //next()表示同级的下一个元素，也就是提示信息<span>标签

			error_name = false;

		}

	}

	function check_pwd(){

		var len = $('#pwd').val().length;

		if(len<8||len>20)

		{

			$('#pwd').next().html('密码最少8位，最长20位') //表示同级一下标签<span>中显示的文本

			$('#pwd').next().show();

			error_password = true; //为true说明密码错误

		}

		else

		{

			$('#pwd').next().hide();

			error_password = false;

		}

	}

	function check_cpwd(){

		var pass = $('#pwd').val();

		var cpass = $('#cpwd').val();

		if(pass!=cpass)

		{

			$('#cpwd').next().html('两次输入的密码不一致')

			$('#cpwd').next().show();

			error_check_password = true;

		}

		else

		{

			$('#cpwd').next().hide();

			error_check_password = false;

		}		

	}

	function check_email(){

		//18515099823@qq.com

		//以字母为数字开头，(\.[a-z]{2,5})表示邮箱中的.com型的字符,后面的{1，2}不知道啥用

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

		if(re.test($('#email').val())) //如果通过上面的re测试，if语句为真

		{

			$('#email').next().hide();

			error_email = false;

		}

		else

		{

			$('#email').next().html('你输入的邮箱格式不正确')

			$('#email').next().show();

			error_check_password = true;

		}

	}

	//注册按钮的提交

	$('#reg_form').submit(function() {

		check_user_name();

		check_pwd();

		check_cpwd();

		check_email();

		if(error_name == false && error_password == false && error_check_password == false && error_email == false && error_check == false)

		{

			return true;  //返回true就可提交数据

		}

		else

		{

			return false; //返回false，阻止提交

		}

	});

})

　　

register.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" xml:lang="en">

<head>

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

	<title>天天生鲜-注册</title>

	<link rel="stylesheet" type="text/css" href="css/reset.css">

	<link rel="stylesheet" type="text/css" href="css/main.css">

	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

	<script type="text/javascript" src="js/register.js"></script> //表单验证js

</head>

<body>

	<div class="register_con">

		<div class="l_con fl">

			<a class="reg_logo"><img src="data:images/logo02.png"></a>

			<div class="reg_slogan">足不出户  ·  新鲜每一天</div>

			<div class="reg_banner"></div>

		</div>

		<div class="r_con fr">

			<div class="reg_title clearfix">

				<h1>用户注册</h1>

				<a href="#">登录</a>

			</div>

			<div class="reg_form clearfix">

				<form>

				<ul>

					<li>

						<label>用户名:</label>

						<input type="text" name="user_name" id="user_name">

						<span class="error_tip">提示信息</span>

					</li>

					<li>

						<label>密码:</label>

						<input type="password" name="pwd" id="pwd">

						<span class="error_tip">提示信息</span>

					</li>

					<li>

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

						<input type="password" name="cpwd" id="cpwd">

						<span class="error_tip">提示信息</span>

					</li>

					<li>

						<label>邮箱:</label>

						<input type="text" name="email" id="email">

						<span class="error_tip">提示信息</span>

					</li>

					<li class="agreement">

						<input type="checkbox" name="allow" id="allow" checked="checked">

						<label>同意”天天生鲜用户使用协议“</label>

						<span class="error_tip2">提示信息</span>

					</li>

					<li class="reg_sub">

						<input type="submit" value="注 册" name="">

					</li>

				</ul>

				</form>

			</div>

		</div>

	</div>

	<div class="footer no-mp">

		<div class="foot_link">

			<a href="#">关于我们</a>

			<span>|</span>

			<a href="#">联系我们</a>

			<span>|</span>

			<a href="#">招聘人才</a>

			<span>|</span>

			<a href="#">友情链接</a>

		</div>

		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>

		<p>电话：010-****888    京ICP备*******8号</p>

	</div>

</body>

</html>

　　

jqury表单验证的更多相关文章

  1. Jquery表单验证插件validate

    写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

  2. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  3. 玩转spring boot——AOP与表单验证

    AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...

  4. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（33）-MVC 表单验证

    系列目录 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可或缺的,微软的东西还是做得比较人性化的,从webform到MVC,都做到了双向验证 单单的用js实现的前端 ...

  6. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  7. jQuery Validate 表单验证 — 用户注册简单应用

    相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...

  8. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  9. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

随机推荐

  1. 简单HttpClientUtils工具类

    package com.zy.utils; import org.apache.http.HttpEntity; import org.apache.http.HttpStatus; import o ...

  2. Android中自定义ListView实现上拉加载更多和下拉刷新

    ListView是Android中一个功能强大而且很常用的控件,在很多App中都有ListView的下拉刷新数据和上拉加载更多这个功能.这里我就简单记录一下实现过程. 实现这个功能的方法不止一个,Gi ...

  3. ios学习杂记

    commond  + alt + enter Xcode分屏.拖动xib连线

  4. 657. Judge Route Circle机器人能否返回

    ［抄题］: Initially, there is a Robot at position (0, 0). Given a sequence of its moves, judge if this r ...

  5. rtx 二次开发，查找所有部门

    1>rtx二次开发操作类 using System; using System.Collections.Generic; using System.Linq; using System.Text ...

  6. [Training Video - 3] [Groovy in Detail] Non-static and Static variables, objects and object referances

    log.info "starting" // we use class to create objects of a class Planet p1 = new Planet() ...

  7. java技术文章集

    RunOOB Java 教程 深入理解Java 8 Lambda spring MVC配置详解 各种参数传递示例代码 关于spring配置文件中ref属性的设定 Spring注解Annotation的 ...

  8. myisam innodb memory 区别（2）

    1.区别:1) MyISAM管理非事务表.提供高速存储和检索,以及全文搜索能力.MyISAM在所有MySQL配置里被支持,是默认的存储引擎,除非配置MySQL默认使用另外一个引擎.2)MEMORY存储 ...

  9. dd命令使用

    一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意:指定数字的地方若以下列字符结尾,则乘以相应的数字:b=512:c=1:k=1024:w=2 参数注释: 1. ...

  10. C# JackLib系列之自定义鼠标风格的实现

    在我们开发的过程中,有时需要我们来自定义鼠标的形状和大小,刚巧前一阵子正好用到了这个技术,找了好多资料,基本上都是黑白色的鼠标风格实现,而我要的则是自定义大小和彩色风格的光标样式.百度上的资源又太少, ...