简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > PHP+AJAX表单验证--2018年4月18日19点23分
Blogger Information
Blog 16
fans 0
comment 2
visits 13440
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
PHP+AJAX表单验证--2018年4月18日19点23分
Alan_繁华
Original
576 people have browsed it

功能描述

  • 用户输入邮箱判断是否为空，是否符合邮箱正则，邮箱是否已注册

  • 输入密码不能为空，长度为6--10位

  • 验证密码不能为空，需要和第一次密码相等

  • 当所有资料按照要求填写完后，用户可以提交到后台，完成用户注册

HTML代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PHP+AJAX表单验证</title>
    <style>
        table {
            background-color: wheat;
            box-shadow: 3px 3px 3px #888;
            border-radius: 3%;
            padding: 15px;
            margin: 30px auto;
        }
        table td {
            padding: 8px;
        }
        table caption {
            font-size: 1.5em;
            margin-bottom: 10px;
        }
        textarea {
            resize: none;
        }
        form table button {
            width: 100px;
            height: 30px;
            cursor: pointer;
            border: none;
            background-color: skyblue;
            color: white;
        }
        form table button:hover {
            background-color: orangered;
            color: white;
            font-size:1.1em;
        }
    </style>
</head>
<body>

    <form>
        <table>
            <caption>用户注册</caption>
            <tr>
                <td><label for="email">邮箱：</label></td>
                <td><input type="text" name="email" id="email" value="" autofocus=""></td>
            </tr>
            <tr>
                <td><label for="password1">密码：</label></td>
                <td><input type="password" name="password1" id="password1" value=""></td>
            </tr>
            <tr>
                <td><label for="password2">确认：</label></td>
                <td><input type="password" name="password2" id="password2" value=""></td>
            </tr>
            <tr>
                <td><label for="secret">性别：</label></td>
                <td>
                    <input type="radio" name="gender" id="male" value="male" ><label for="male">男</label>
                    <input type="radio" name="gender" id="female" value="female" ><label for="female">女</label>
                    <input type="radio" name="gender" id="secret" value="secret" checked ><label for="secret">保密</label>
                </td>
            </tr>
            <tr>
                <td><label for="level">级别：</label></td>
                <td>
                    <select name="level" id="level>
                        <option value="0">小白</option>
                        <option value="1" selected>初级</option>
                        <option value="2">中级</option>
                        <option value="3">高级</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="php">语言：</label>
                </td>
                <td>
                    <input type="checkbox" name="lang[]" id="php" value="php" checked><label for="php">PHP</label>
                    <input type="checkbox" name="lang[]" id="java" value="java"><label for="java">JAVA</label>
                    <input type="checkbox" name="lang[]" id="c" value="c"><label for="c">C</label>
                    <input type="checkbox" name="lang[]" id="python" value="python"><label for="python">python</label>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center"><button type="submit" value="提交" id="submit">提交</button></td>
            </tr>

        </table>
    </form>
    <div id="data"></div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        // 验证邮箱是否正确
        $('#email').blur(function () {
            $.post('admin/check.php?check=email','email='+$('#email').val(),function (data) {
                switch (data.status){
                    case 'success':
                        $('td').find('span').remove()
                        $('#email').after('<span>').next().text(data.msg).css('color', 'green')
                        break
                    default:
                        $('td').find('span').remove()
                        $('#email').after('<span>').next().text(data.msg).css('color', 'red').prev().focus()
                        break;
                }
            },'json')
        })
        //验证是否输入密码，并且长度为6--10位之间
        $('#password1').blur(function () {
            if($('#email').val().length == 0){
                return false
            }
            $.post('admin/check.php?check=password1','password1='+$('#password1').val(),function (data) {
                if(data.status == 'error'){
                    $('td').find('span').remove()
                    $('#password1').after('<span>').next().text(data.msg).css('color', 'red').prev().focus()
                }
            },'json')
        })

        //验证二次密码是否相等
        $('#password2').blur(function () {
            if($('#email').val().length == 0 || $('#password1').val().length == 0){
                return false
            }else if($('#password1').val().length < 6 || $('#password1').val().length > 10) {
                return false
            }
            $.post('admin/check.php?check=password2',{
                password1:$('#password1').val(),
                password2:$('#password2').val()
            },function (data) {
                if(data.status == 'error'){
                    $('td').find('span').remove()
                    $('#password2').after('<span>').next().text(data.msg).css('color', 'red').prev().focus()
                }else{
                    $('td').find('span').remove()
                    $('#password2').after('<span>').next().text(data.msg).css('color', 'green')
                }
            },'json')
        })
        //提交所有数据到后台
        $('#submit').on('click',function () {
            $.post('admin/check.php?check=submit',{
                email:$('#email').val(),
                password1:$('#password1').val(),
                gender:$('#gender').val(),
                level:$('#level').val(),
                lang:$("input[name='lang']:checked").val()
            },function (data) {
                console.log(data)
            },'json')
        })


    </script>
</body>
</html>

运行实例 »

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


PHP后台代码实例

<?php
/*
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018\4\16 0016
 * Time: 22:59
 */
    $check = $_GET['check'];
    if(!empty($check)){

        switch ($check){
            //校验邮箱
            case 'email':
                $email = $_POST['email'];
                $pattern = "/^([0-9A-Za-z\\-_\\.]+)@([0-9a-z]+\\.[a-z]{2,3}(\\.[a-z]{2})?)$/i";
                if(empty($email)){//验证邮箱是否为空
                    exit(json_encode(['status'=>'error','msg'=>'邮箱不能为空']));
                }
                elseif (!preg_match($pattern,$email)){//验证邮箱格式是否正确
                    exit(json_encode(['status'=>'error','msg'=>'邮箱格式错误']));
                }elseif (in_array($email,['alan@php.cn','11@php.cn'])){//查看邮箱是否被注册
                    exit(json_encode(['status'=>'error','msg'=>'邮箱已占用']));
                }else{
                    exit(json_encode(['status'=>'success','msg'=>'验证通过']));
                }
                break;
                //验证密码1是否为空
            case 'password1':
                $password1 = $_POST['password1'];
                if(empty($password1)){//验证密码1是否为空
                    exit(json_encode(['status'=>'error','msg'=>'密码不能为空']));
                }elseif (strlen($password1) <6 || strlen($password1) >10){
                    exit(json_encode(['status'=>'error','msg'=>'密码为6-10位']));
                }
                break;
                //校验密码2是否为空并且是否和密码1相等
            case 'password2':
                $password1 = $_POST['password1'];
                $password2 = $_POST['password2'];
                if(empty($password2)){//验证密码2是否为空
                    exit(json_encode(['status'=>'error','msg'=>'验证不能为空']));
                }elseif ($password1 != $password2){//验证确认密码和第一次密码是否相等
                    exit(json_encode(['status'=>'error','msg'=>'二次密码不相等']));
                }else{
                    exit(json_encode(['status'=>'success','msg'=>'验证通过']));
                }
                break;
                //获取要用户提交数据
            case 'submit':
                $email = $_POST['email'];
                $password1 = $_POST['password1'];
                $password2 = $_POST['password2'];
                $gender = $_POST['gender'];
                $level = $_POST['level'];
                $lang =     $_POST['lang'];

                $arr = [];
                $arr['email'] = $email;
                $arr['password1'] = $password1;
                $arr['gender'] = $gender;
                $arr['level'] = $level;
                $arr['lang'] = $lang;
                exit(json_encode(['status'=>'success','data'=>$arr]));
                break;

            default:
                exit(json_encode(['status'=>'error','msg'=>'其他错误']));
        }
    }

运行实例 »

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


Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！