首页> 基础笔记 >JS/JQ基础学习 >Jquery Jquery

jQuery表单的应用

作者：小萝卜 2023-03-24 【 jquery 】浏览 267

简介: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动画特效