js+html+php实现判断邮箱格式和是否为空(有提示)

最新推荐文章于 2021-11-13 14:58:41 发布

原创最新推荐文章于 2021-11-13 14:58:41 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #php #email #div #function #input

本文介绍了一个HTML表单与JavaScript进行邮箱验证，同时与PHP后端进行交互的过程，展示了如何在前端实现基本的用户输入验证，并通过表单提交数据到PHP脚本进行处理。

这个是HTML的

<html>
    <head>
        <script type="text/javascript">
    function panduan(){
        var reg=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        var email=document.getElementById('text').value;
        if(email.length==''){
            document.getElementById('div').innerHTML="请输入邮箱";
            document.getElementById('text').focus();
            return false;
        }
        if(!reg.test(email)){
           document.getElementById('div').innerHTML="请输入正确的邮箱";
           return false;
        }else{
            document.getElementById('div').innerHTML="ok";
            return button;
        }
        
        }
    function panduan1(){
        var reg=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        var email=document.getElementById('text').value;
        if(email.length==""){
            alert('请输入邮箱');
            document.getElementById('text').focus();
            return false;
        }
        if(!reg.test(email)){
           alert('请输入正确的邮箱');
           document.getElementById('text').focus();
           return false;
        }else{
            document.getElementById('div').innerHTML="ok";
            return true;
        }
        
        }
    
        </script>
    </head>
    <body>
            <form id="from" name="from" action="save.php" method="post">
            请输入邮箱：<br />
            <input type="text" id="text" name="text" onblur="panduan()"/>
            <input type="submit" id="submit" name="submit" value="按钮" onclick=" return panduan1()"/>
            <div id="div" name="div" style="color: red;font-size:small;"></div>
        </form>
    </body>
</html>

这个是PHP的

<?php
$email=isset($_POST['text'])?trim($_POST['text']):"";
echo $email;    
?>