点击预览;

<%@ page language="java" contentType="text/html; charset=UTF-8"

	pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

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

<title>用户注册</title>

<link rel="stylesheet" href="css/bootstrap.min.css">

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

<script type="text/javascript" src="js/bootstrap.min.js"></script>

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

<script type="text/javascript" src="js/messages_zh.js"></script>

<script>

	$().ready(function() {

		// 在键盘按下并释放及提交后验证提交表单

		$("#signupForm").validate({

			rules : {

				username : {

					required : true,

					minlength : 2

				},

				password : {

					required : true,

					minlength : 5

				},

				confirm_password : {

					required : true,

					minlength : 5,

					equalTo : "#password"

				},

				email : {

					required : true,

					email : true

				},

				agree : "required"

			},

			messages : {

				username : {

					required : "请输入用户名",

					minlength : "用户名必需由两个字母组成"

				},

				password : {

					required : "请输入密码",

					minlength : "密码长度不能小于 5 个字母"

				},

				confirm_password : {

					required : "请输入密码",

					minlength : "密码长度不能小于 5 个字母",

					equalTo : "两次密码输入不一致"

				},

				email : "请输入一个正确的邮箱",

				agree : "请接受我们的声明"

			}

		});

	});

</script>

<style type="text/css">

.error {

	color: red;

}

.register-form {

	width: 20%;

	max-width: 400px;

	margin: 80px auto;

}

.register-form #btn {

	margin: 35px auto;

	text-align: center;

}

.register-form button {

	width: 49%;

}

</style>

</head>

<body>

	<div class="register-form">

		<form id="signupForm" method="get" action="getInfo.jsp">

			<div class="form-group">

				<label for="username">用户名</label> <input class="form-control" id="username"

					name="username" type="text">

			</div>

			<div class="form-group">

				<label for="password">密码</label> <input class="form-control" id="password"

					name="password" type="password">

			</div>

			<div class="form-group">

				<label for="confirm_password">验证密码</label> <input class="form-control"

					id="confirm_password" name="confirm_password" type="password">

			</div>

			<div class="form-group">

				<label for="email">Email</label> <input class="form-control" id="email" name="email"

					type="email">

			</div>

			<div class="form-group">

				<label for="agree">请同意我们的声明：</label><a href="#">中华人民共和国互联网管理条例</a><input class="radio-inline" type="checkbox"

					 id="agree" name="agree">

			</div>

			<div class="form-group">

				<button type="submit" class="btn btn-default">Submit</button>

				<button type="reset" class="btn btn-default">Reset</button>

			</div>

		</form>

	</div>

</body>

</html>

validate验证注册表单的更多相关文章

  1. 第一百八十四节，jQuery-UI，验证注册表单

    jQuery-UI,验证注册表单 html <form id="reg" action="123.html" title="会员注册" ...

  2. jquery validate 一个注册表单的应用

    先看页面 前端表单代码  register.html <form class="mui-input-group" id="regForm"> < ...

  3. jQuery validate验证隐藏表单(hidden)域

    validate很不错的一个jQuery表单验证插件.升级到了1.9版的后,发现隐藏表单域验证全部失效,特别是在jquery.ui.tabs.min.js构造的Tabs里的验证!网上一搜,也没查到是怎 ...

  4. 20151222jquery学习笔记--验证注册表单

    $(function () { $('#search_button').button({ icons : { primary : 'ui-icon-search', }, }); $('#reg'). ...

  5. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

  6. 【转】Validate + Boostrap tooltip 表单验证示例

    一.工具准备: 1.boostrap: 下载地址 http://getbootstrap.com/ jquery: jQuery版本需大于或等于1.8.0  jquery.validate.min.j ...

  7. 模拟js中注册表单验证

    示例1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  8. 4.前端注册表单验证 && 表单回填

    表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...

  9. 使用jquery插件validate制作的表单验证案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. HttpContext.Current为NULL

    总结:HttpContext.Current是基于System.Runtime.Remoting.Messaging.CallContext这个类,子线程和异步线程都无法访问到主线程在CallCont ...

  2. php设计模式课程---1、什么是设计模式

    php设计模式课程---1.什么是设计模式 一.总结 一句话总结:经典场景的经典解决方法. 经典场景的经典解决方法 1.设计模式使用的通俗场景有哪些? 比如:拍电影时,常用设计模式 感情狗血剧:误会模 ...

  3. 一 Django框架介绍——用pycharm创建Django项目

    Django框架介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVC的软件设计模式,即模型M,视图V和控制器C.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内 ...

  4. python--17个新手常见Python运行时错误

    当初学 Python 时,想要弄懂 Python 的错误信息的含义可能有点复杂.这里列出了常见的的一些让你程序 crash 的运行时错误. 1)忘记在 if , elif , else , for , ...

  5. OpenCV——非线性滤波器

    参考: PS 图像特效,非线性滤波器 // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_IN ...

  6. Agc003_E Sequential operations on Sequence

    传送门 题目大意 $1,2...n,n$个数从小到大排列,有$m$此操作,每次操作给定一个参数$x$,将当且数列作为循环节无限地展开下去,再取前$x$个作为新的数列,求最终的数列每个数出现的次数. $ ...

  7. 无旋Treap - BZOJ1014火星人 & 可持久化版文艺平衡树

    !前置技能&概念! 二叉搜索树 一棵二叉树,对于任意子树,满足左子树中的任意节点对应元素小于根的对应元素,右子树中的任意节点对应元素大于根对应元素.换言之,就是满足中序遍历为依次访问节点对应元 ...

  8. IronPython for ASP.NET 部署注意事项

    用 IronPython for ASP.NET 开发的网站,在部署时,除了发布 bin 目录下的 IronPython.dll, IronMath.dll, Microsoft.Web.IronPy ...

  9. 【转】Pro Android学习笔记（十六）：用户界面和控制（4）：ImageView控件

    目录(?)[-] XML片段 代码设置ImageView ImageView是基础的控件,它是android.widget.ImageView的继承类. XML片段      <LinearLa ...

  10. Spring 学习十五 AOP

    http://www.hongyanliren.com/2014m12/22797.html 1: 通知(advice): 就是你想要的功能,也就是安全.事物.日子等.先定义好,在想用的地方用一下.包 ...