PHP开发之旅-表单验证

Posted 2020-09-11 输过败过不曾怕过

一、创建表单

<form name = "login" method = "post" action="contact.php?action=login" class="bootstrap-frm">
    <h1>联系我们</h1>
    <label>
    	<span>微信* :</span>
    	<input id="wechat" type="text" name="wechat" placeholder="微信" class="form-control input-lg"/>
    	<p class="panduan" id="umessage1"></p>
    </label>

    <label>
    	<span>QQ* :</span>
    	<input id="qq" type="text" name="qq" placeholder="QQ" class="form-control input-lg" />
    	<p class="panduan" id="umessage2"></p>
    </label>

    <label>
    	<span>科目 :</span>
    	<input id="course" type="text" name="course" placeholder="科目" class="form-control input-lg" />
    </label>

    <label>
    	<span>作业要求 :</span>
    	<textarea id="work" name="work" placeholder="作业要求" class="form-control input-lg"></textarea>
    </label>
    
    <label>
    	<span>联系邮箱* :</span>
    	<input id="email" type="text" name="email" placeholder="联系邮箱" class="form-control input-lg" />
    	<p class="panduan" id="umessage3"></p>
    </label>

    <label>
    	<span>验证码 :</span>
    	<input id="checkCode" type="text" name="checkCode" placeholder="验证码" class="form-control input-lg" />
    	<img src="checkcode.php" onclick="this.src=‘checkcode.php?Math.random()‘"/>  
        <div class="yzmtips" style="color:red"></div>
        <p class="panduan" id="umessage4"></p>
    </label>

    <label>
    	<span> </span>
    	<input type="submit" class="button" value="Send" />
    </label>
    <center>
    <div> 
    	<img src="image/weixingongzonghao.jpeg">
    	<img src="image/qq.jpeg">
    </div>	
    <div>
    	<span style="margin-right: 25px;">微信：asessay</span>
    	<span>QQ：1635676033</span>
    </div>
    </center>
</form>

 二、PHP获取表单提交内容并进行判断

if ($_GET[‘action‘] == ‘login‘) {
	//开启Session  
	session_start();
	//获取session中的验证码并转为小写  
    $sessionCode=strtolower($_SESSION[‘code‘]); 
    //获取输入的验证码  
    $code=strtolower($_POST[‘checkCode‘]);  
    // echo $sessionCode;

	$pattern = "/^([0-9A-Za-z\\-_\\.]+)@([0-9a-z]+\\.[a-z]{2,3}(\\.[a-z]{2})?)$/i";
	//判断是否相等  
    if($sessionCode==$code){  
		if ($_POST[‘wechat‘] == null || $_POST[‘qq‘] == null || $_POST[‘email‘] == null || (!preg_match( $pattern, $_POST[‘email‘] ))) {
			echo "<script>alert(‘提交失败！‘);</script>";
		} else {
		// $smtp->sendmail($smtpemailto, $smtpusermail, $mailsubject, $mailbody, $mailtype); 
			// echo "<script>alert(‘提交成功！‘);</script>";
		// }
			
	        $smtp->sendmail($smtpemailto, $smtpusermail, $mailsubject, $mailbody, $mailtype); 
	        echo "<script type=‘text/javascript‘>alert(‘提交成功!‘);</script>";  
	    } 
    }else{  
            echo "<script type=‘text/javascript‘>alert(‘验证码错误!‘);</script>";  
    } 
}

三、js控制表单验证

<script type="text/javascript">
	var error=new Array();
	var regex = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
	$(document).ready(function(){
	  $(‘input[name="wechat"]‘).blur(function(){
	  	var wechat=$(this).val();
		if(wechat==‘‘){
			var wechat = "您输入的微信号为空！";
			$(‘#umessage1‘).text(wechat);
		}else{
			$(‘#umessage1‘).text(‘‘);
		}
	  });
	  $(‘input[name="qq"]‘).blur(function(){
	  	var qq=$(this).val();
		if(qq==‘‘){
			var qq = "您输入的QQ号码为空！";
			$(‘#umessage2‘).text(qq);
		}else{
			$(‘#umessage2‘).text(‘‘);
		}
	  });
	  $(‘input[name="email"]‘).blur(function(){
	  	var email=$(this).val();
		if(email==‘‘ || !(regex.test(email))){
			var email = "您输入的电子邮件地址不合法！";
			$(‘#umessage3‘).text(email);
		}else{
			$(‘#umessage3‘).text(‘‘);
		}
	  });
	  $(‘input[name="checkCode"]‘).blur(function(){
	  	var checkCode=$(this).val();
		if(checkCode==‘‘){
			var checkCode = "您输入的验证码为空！";
			$(‘#umessage4‘).text(checkCode);
		}else{
			$(‘#umessage4‘).text(‘‘);
		}
	  });
	});
</script>