分别在前端和后端实现对表单(E-mail和 Telphone)的验证
废话不多,代码如下...
前端实现利用正则表达式对e-mail和telphone的验证
regex_form_relizea.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前端实现正则表达式验证</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div class="">
e-mail: <input type="text" id="e-mail" name="e-mail" placeholder="e-mail">
telphone: <input type="text" id="tel" name="tel" placeholder="telphone">
<input type="submit" id="sub" name="sub" value="提交">
</div>
<script>
$(document).ready(function(){
var regex = /^\w+@\w+\.com|cn$/;
var retel = /^[1][3578][0-9]{9}$/;
var flag = true;
var msg = '';
$("#sub").click(function(){
var con = $("#e-mail").val();
if(!regex.test(con)){
msg += '你的e-mail格式输入不正确,';
flag = false;
}
var tel = $("#tel").val();
if(!retel.test(tel)){
msg += '并且你的telphone号码输入也有误!!';
flag = false;
}
if(flag){
msg += '正在提交,请稍后...';
alert(msg);
}else{
msg += '请重新输入!';
alert(msg);
}
window.location.reload(); //刷新页面,避免上一次输入错误操作影响用户重新输入
});
})
</script>
</body>
</html>
regex_later_form.php文件 (用户表单界面)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>后端进行校验的前端页面</title>
</head>
<body>
<?php session_start(); if(!isset($_SESSION['mail'])){ //将用户上一次的邮箱和tel保存在session中,提高用户体验效果
$_SESSION['mail'] = null;
$_SESSION['tel'] = null;
}?>
<form class="" action="regex_later_realize.php" method="post">
e-mail: <input type="text" name="e-mail" placeholder="e-mail" value="<?php echo $_SESSION['mail'] ?>">
telphone: <input type="text" name="tel" placeholder="telphone" value="<?php echo $_SESSION['tel'] ?>">
<input type="submit" name="sub" value="提交">
</form>
</body>
</html>
regex_later_realize.php文件(对提交的e-mail和tel进行验证)
<?php
session_start();
$regex_mail = "/^\w+@\w+\.com|cn$/";
$regex_tel = "/^[1][3578][0-9]{9}$/";
if(!isset($_POST['sub'])){
$url = 'http:'.'\\'.'\\'.'www.baidu.com';
header("refresh: 0; url=$url");
print('非法进入,正在退出');
}else{
if(!empty($_POST['e-mail']) && !empty($_POST['tel'])){
$mail = $_POST['e-mail'];
$tel = $_POST['tel'];
$_SESSION['mail'] = $mail;
$_SESSION['tel'] = $tel;
if(preg_match($regex_mail, $mail)){
if(preg_match($regex_tel, $tel)){
$url = 'success.html';
header("refresh: 0; url = $url");
print("完成注册正在跳转");
exit;
}else{
$url = 'regex_later_form.php';
header("refresh: 2; url = $url");
print("电话号码填写错误,请重新填写!!");
exit;
}
}else{
if(preg_match($regex_tel, $tel)){
$url = 'regex_later_form.php';
header("refresh: 2; url = $url");
print("邮箱地址填写错误,请重新填写!!");
exit;
}else{
$url = 'regex_later_form.php';
header("refresh: 2; url = $url");
print("邮箱地址和电话号码填写错误,请重新填写!!");
exit;
}
}
}else{
$mail = $_POST['e-mail'];
$tel = $_POST['tel'];
$_SESSION['mail'] = $mail;
$_SESSION['tel'] = $tel;
if(empty($_POST['e-mail']) && empty($_POST['tel'])){
$url = 'regex_later_form.php';
header("refresh: 2; url = $url");
print("没有填写邮箱地址和电话号码,请重新填写!!");
exit;
}else if(empty($_POST['e-mail'])){
$url = 'regex_later_form.php';
header("refresh: 2; url = $url");
print("没有填写邮箱地址,请重新填写!!");
exit;
}else{
$url = 'regex_later_form.php';
header("refresh: 2; url = $url");
print("没有填写电话号码,请重新填写!!");
exit;
}
}
}
?>
success.html 提交成功跳转到的页面(这里很简单)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>yeah! you have finished!!</h1>
</body>
</html>
这样就实现了前端和后端对提交表单的数据不同的正则表达式的验证方法