zoukankan      html  css  js  c++  java
  • validate验证注册表单

    点击预览;

    <%@ 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 {
    	 20%;
    	max- 400px;
    	margin: 80px auto;
    }
    
    .register-form #btn {
    	margin: 35px auto;
    	text-align: center;
    }
    
    .register-form button {
    	 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>
    
  • 相关阅读:
    机器学习周志华- 第六章学习笔记6.1-6.4
    Centos 中 vim 的配置
    github相关的软件安装及配置
    堆/栈的比较 以及 malloc/new动态内存的开辟
    内存管理
    Linux中的搜索命令
    String 类 Copy-On-Write 技术以及使用时存在的风险
    二分查找算法的应用
    二分查找算法
    union关键字 与大小端模式
  • 原文地址:https://www.cnblogs.com/caoleiCoding/p/9124968.html
Copyright © 2011-2022 走看看