6、表单选择器的使用示例
<!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 = /{1,30}@{1,65}.{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>
页:
[1]