6、表单选择器的使用示例

Sian · 发表于 2016-2-19 17:51:21

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8"/>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<style>
		body{
			font-size: 15px;
		}
		label{
			width: 65px;
			display: inline-block;
			text-align: right;
		}
		label.gender{
			width: 15px;
		}
		input{
			width: 220px;
		}
		input.gender{
			width: 15px;
		}
		#submit-element{
			width: 285px;
			text-align: center;
		}
		#submit{
			width: 80px;
			margin: 10px auto;
		}
	</style>
	<script>
	// 1、表单元素选择器
		//:input 选取input、textarea、select和button元素
		//:text 选取所有单行文本框<input type="text"/>
		//:password 选取所有密码框<input type="password"/>
		//:radio 选取所有的单选按钮
		//:checkbox 选取所有的复选框
		//:submit 选取所有的提交按钮
		//:image 选取所有的图像域
		//:reset 选取所有的重置按钮
		//:button 选取所有的按钮
		//:file 选取所有的文件域
		//:hidden 选取所有的隐藏域
	// 2、表单属性选择器
		//:enable 选取所有的可用元素
		//:disabled 选取所有的不可用元素<input disabled/>
		//:checked 选取所有的处于选中状态的单选框和复选框
		//:selected 选取所有处于选中状态的option元素
		
		// 用户名检测
		function checkName(){
			// 去除两端的空格字符
			var string = $.trim($('#username').val());
			var message = "";
			if (string.length < 3) message = "用户名不能少于3个字符";
			$('#username-element span').text(message);
			return message.length;
		}
		// 密码检测
		function checkPass(){
			// 密码允许存在空格字符
			var string = $('#password').val();
			var message = "";
			if (string.length < 6) message = "密码不能小于6位";
			$('#password-element span').text(message);
			return message.length;
		}
		// 重复密码检测
		function checkRepass(){
			// 获取密码值
			var password = $('#password').val();
			var string = $('#repassword').val();
			var message = "";
			if (string.length == 0) message = "重复密码不能为空";
			if (string != password) message = "两次密码不一致";
			$('#repassword-element span').text(message);
			return message.length;
		}
		// 检测邮件
		function checkEmail(){
			// 邮箱不区分大小写，先全部转换的成小写字母
			var string = $('#email').val();
			string = string.toLowerCase();
			// 正则表达式
			var para = /[a-z0-9\-]{1,30}@[a-z0-9\-]{1,65}.[a-z]{2,4}/;
			var message = "";
			if(para.test(string) == false) message = "邮箱格式不正确";
			$('#email-element span').text(message);
			return message.length;
		}
		$(document).ready(function(){
			$(':text:eq(0)').blur(checkName);		// 用户名检测
			$(':password:first').blur(checkPass); 	// 密码检测
			$(':password:last').blur(checkRepass);	// 重复密码检测
			$('#email').blur(checkEmail);			// 邮箱检测
			$(':submit').click(function(){
				if(checkName()) return false;
				if(checkPass()) return false;
				if(checkRepass()) return false;
				if(checkEmail()) return false;
				return true;
			});
		});
	</script>
</head>
<body>
<form action="index.html" method="get" accept-charset="utf-8">
	<div id="username-element">
		<label for="username">用户名:</label>
		<input id="username" type="text" name="username" />
		<span class="checkResult"></span>
	</div>
	<div id="password-element">
		<label for="password">密码:</label>
		<input id="password" type="password" name="password"/>
		<span class="checkResult"></span>
	</div>
	<div id="repassword-element">
		<label for="repassword">重复密码:</label>
		<input id="repassword" type="password" name="repassword"/>
		<span class="checkResult"></span>
	</div>
	<div id="email-element">
		<label for="email">邮箱:</label>
		<input id="email" type="text" name="email"/>
		<span class="checkResult"></span>
	</div>
	<div id="sex-element">
		<label for="sex">性别:</label>
		<label for="man" class="gender">男</label>
		<input id="man" class="gender" type="radio" name="sex"/>
		<label for="woman" class="gender">女</label>
		<input id="woman" class="gender" type="radio" name="sex" checked />
	</div>
	<div id="submit-element">
		<input id="submit" type="submit" value="注册"/>
	</div>
</form>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 6、表单选择器的使用示例