首页> 基础笔记 >JS/JQ基础学习 >Jquery Jquery
jQuery表单的应用
作者:小萝卜 2023-03-24 【 jquery 】 浏览 275
简介:input 匹配所有input,textarea,select和button元素 集合元素 查找所有的input元素: $(":input") :text 匹配所有的单行文本框. 集合元素 查找所有文本框: $(":text") :password 匹配所有密码框. 集合元素 查找所有密码框: $(":password") :radio 匹配所有单选按钮. 集合元素 查找所有单选按钮 :checkbox 匹配所有复选框 集合元素 查找所有复选框: $(":checkbox") :submit 匹配所有提交按钮. 集合元素 查找所有提交按钮: $(":submit")
选择器 |
描述 |
返回值 |
示例 |
:input |
匹配所有input,textarea,select和button元素 |
集合元素 |
查找所有的input元素: $(":input") |
:text |
匹配所有的单行文本框. |
集合元素 |
查找所有文本框: $(":text") |
:password |
匹配所有密码框. |
集合元素 |
查找所有密码框: $(":password") |
:radio |
匹配所有单选按钮. |
集合元素 |
查找所有单选按钮 |
:checkbox |
匹配所有复选框 |
集合元素 |
查找所有复选框: $(":checkbox") |
:submit |
匹配所有提交按钮. |
集合元素 |
查找所有提交按钮: $(":submit") |
:image |
匹配所有图像域. |
集合元素 |
匹配所有图像域: $(":image") |
:reset |
匹配所有重置按钮. |
集合元素 |
查找所有重置按钮: $(":reset") |
:button |
匹配所有按钮.这个包括直接写的元素button. |
集合元素 |
查找所有按钮: $(":button") |
:file |
匹配所有文件域. |
集合元素 |
查找所有文件域: $(":file") |
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style type="text/css">
table,td{border-collapse:collapse;}
td{padding:10px;}
span{font-size:14px;}
</style>
</head>
<body>
<form action="userAdd.php" method="post" id="f">
<table border='1'>
<tr><td>用户名:</td><td><input remind="请输入8~18的字母数字下划线" type="text" name="username"><span></span></td></tr>
<tr><td>密码:</td><td><input remind="6~18位的非空白字符" type="password" name="password"><span></span></td></tr>
<tr><td>邮箱:</td><td><input remind="请输入正确的email邮箱" type="text" name="email"><span></span></td></tr>
<tr><td>手机号:</td><td><input remind="请输入您的手机号" type="text" name="phone"><span></span></td></tr>
<tr><td></td><td><input type="submit" value="注册"></td></tr>
</table>
</form>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//将第二个td 加宽
$('tr td:eq(1)').width(400);
//检测变量
var CU = false;
var CP = false;
var CE = false;
var CS = false;
//用户名丧失焦点
$('input[name=username]').blur(function(){
//获取用户的值
var v = $(this).val();
//正则匹配
var reg = /^\w{8,18}$/;
var t = $(this);
//检测
if(!reg.test(v)){
$(this).next().html('格式有误').css('color','red');
CU = false;
}else{
//检测用户名是否存在
$.ajax({
url:'checkUser.php',
data:{username:v},
type:'post',
async:false,
success:function(data){
if(data == 1){
t.next().html('ok').css('color','green');
CU = true;
}else{
t.next().html('用户名已经存在').css('color','red');
CU = false;
}
}
});
// $.post('checkUser.php', {username:v}, function(data){
// if(data == 1){
// t.next().html('ok').css('color','green');
// CU = true;
// }else{
// t.next().html('用户名已经存在').css('color','red');
// CU = false;
// }
// })
}
})
//密码丧失焦点
$('input[name=password]').blur(function(){
//获取值
var v = $(this).val();
//正则定义
var reg = /^\S{6,18}$/;
//检测
if(!reg.test(v)){
$(this).next().html('格式错误').css('color','red');
CP = false;
}else{
$(this).next().html('ok').css('color','green');
CP = true;
}
})
//邮箱验证
$('input').focus(function(){
var r = $(this).attr('remind');
$(this).next().html(r).css('color','green');
})
//丧失焦点
$('input[name=email]').blur(function(){
//获取值
var v = $(this).val();
//正则检测
var reg = /^\w+@\w+\.(com|cn|com\.cn|org|hk|edu|net)$/;
if(!reg.test(v)){
$(this).next().html('格式错误').css('color','red');
CE = false;
}else{
$(this).next().html('ok').css('color','green');
CE = true;
}
})
//丧失焦点
$('input[name=phone]').blur(function(){
//
var v = $(this).val();
//
var reg = /^1\d{10}$/;
//
if(!reg.test(v)){
$(this).next().html('格式错误').css('color','red');
CS = false;
}else{
$(this).next().html('ok').css('color','green');
CS = true;
}
})
//绑定表单的提交事件
$('#f').submit(function(){
//在脚本中触发元素的丧失焦点事件
$('input[name=email]').trigger('blur');
$('input[name=phone]').trigger('blur');
$('input[name=password]').trigger('blur');
$('input[name=username]').trigger('blur');
console.log(CU)
console.log(CP)
console.log(CE)
console.log(CS)
//判断检测变量
if(CU && CP && CE && CS){
return true;
}
return false;
})
</script>
</body>
</html>
很赞哦! (0)
上一篇:jQuery表格的应用
下一篇:jQuery动画特效