博主信息
博文 29
粉丝 1
评论 1
访问量 29442
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
ajax提交数据到服务器实战 2018-4-11
谦谦允水的博客
原创
736人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>php中文网</title>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<form id="login">
		<p> <label for="phone">电话号码:</label><input  name="phone" id="phone" type="text"></p>
		<p><label for="id">身份证号码:</label> <input name="id"  id="id" type="text"></p>
		<p><label for="name">中文姓名:</label> <input name="name"  id="name" type="text"></p>
		<p><label for="carId">车牌号:</label> <input name="carId"  id="carId" type="text"></p>
		<p><label for="code">推荐码:</label> <input name="code"  id="code" type="text"></p>
		<button>提交</button>
	</form>
		<!-- <button>提交</button> -->

</body>
<script>
//电话号码验证
var a,c,d,e,f;

$('#phone').blur(function(){
	$(this).val('13000000001');
	if( /^1[3578]\d{9}$/.test(this.value)){
		$('p:first span').empty();
		$('p:first').append('<span style="color:green">ok</span>')
		a=true;
	}else {
		$('p:first span').empty();
		$('p:first').append('<span style="color:red">on</span>');
		 a=false;

	}

})

//身份证号码验证
$('#id').blur(function(){
	$(this).val('500381199601153484');
	var yue=this.value.slice(10,14);
	if(yue=='0231'||yue=='0230'){
		$(this).next().empty();//选中同级标签的后面一个,prev()是前面一个
		$(this).after('<span style="color:red">最多2月29日哟</span>')//添加到当前标签后面
		 c=false;
	}	
	if(/^[1-9]\d{5}(19)\d{2}((0)[1-9]|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(this.value)){
		$(this).next().empty();
		$(this).after('<span style="color:green">ok</span>');
		c=true;
	}else{
			$(this).next().empty();
			$(this).after('<span style="color:red">格式错误</span>');
			 c=false;
	}
})
//姓名认证
$("#name").blur(function(){
	$(this).val('海贼王');
	if(/^[\u4e00-\u9fa5]{2,8}$/.test(this.value)){
		$(this).next().empty();
		$(this).after('<span style="color:green">ok</span>')
		d=true;
	}else{
		$(this).next().empty();
		$(this).after('<span style="color:red">请输入2~8位的中文姓名</span>')	
		 d=false;
	}
})
//车牌号验证
$('#carId').blur(function(){
	$(this).val('bbb111');
	var car=this.value.toUpperCase();
	$(this).val(car);
	if(/^[A-Z]{1}[A-Z_0-9]{4}[A-Z_0-9学警]$/.test(car)){
		$(this).next().empty();
		$(this).after('<span style="color:green">ok</span>')	
		e=true;	
	}else{
		$(this).next().empty();
		$(this).after('<span style="color:red">请输入正确的车牌号如:FBR208</span>')	
		 e=false;
	}
})
//推荐码必须输入
$('#code').blur(function(){
	$(this).val('php520');
	var code=this.value.toLowerCase();
	$(this).val(code);
	if(/^(php520)$/.test(code)){
		$(this).next().empty();
		$(this).after('<span style="color:green">ok</span>')	
		f=true;		
	}else{
		$(this).next().empty();
		$(this).after('<span style="color:red">请输入推荐码:php520</span>')	
		 f=false;	
	}
})

//发送请求
$('button').on('click',function(){
	if(a===false||c===false||d===false||e===false||f===false||a===undefined||c===undefined||d===undefined||e===undefined||f===undefined){
		alert('您填写的信息有误,请根据提示修改');
		return false;
	}
	$.ajax({
		url:'api/login.php',
		// type:'GET',
		type:'post',
		// data:{
		// 	phone:$('#phone').val(),
		// 	id:$('#id').val(),
		// 	name:$('#name').val(),
		// 	carId:$('#carId').val(),
		// 	code:$('#code').val(),
		// 	state:0
		// },
		// data:$('#login').serializeArray(),
		data:$('#login').serialize(),
		success:function(res){
			console.log(res);
		},
		error:function(xhr,status,error){
			alert(error);
		}
	})
	return false;
})
</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

二、php源码

实例

<?php 
@header('Content-type: text/html;charset=UTF-8');
    // print_r(111);exit('5255');
	error_reporting(E_ALL^E_NOTICE^E_WARNING);
	$phone=['13833333333','130363085489','13000000000'];
	$id=['500381199601153484','00000000000000000'];
	$name=['海贼王','路飞'];
	$carId=['BBB1111','A99999'];
	$p1=$_POST['phone'];
	$i1=$_POST['id'];
	$n1=$_POST['name'];
	$c1=$_POST['carId'];

	$p=$_GET['phone'];
	$i=$_GET['id'];
	$n=$_GET['name'];
	$c=$_GET['carId'];	
	if($_SERVER['REQUEST_METHOD']=='GET'){
		echo  $_GET['phone'],isset($_GET['id'])?$_GET['id']:'请输入身份证...';
		echo $_GET['phone'];
		if(in_array($p,$phone)){
			echo "电话号码已经注册";
		}else if(in_array($i,$id)){
			echo "身份证号码已经注册";
		}else if(in_array($n,$name)){
			echo "姓名相同";
		}else if(in_array($c,$carId)){
			echo "车牌号相同";
		}		
	}else{
		if(in_array($p1,$phone)){
			echo "电话号码已经注册";
			// echo 0;
			// echo "string";
		}else if(in_array($i1,$id)){
			echo "身份证号码已经注册";
		}else if(in_array($n1,$name)){
			echo "姓名相同";
		}else if(in_array($c1,$carId)){
			echo "车牌号相同";
		}
	}
 ?>

运行实例 »

点击 "运行实例" 按钮查看在线实例

360截图20180411174721380.jpg

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学