簡單 ajax+php的正則驗證
阿新 • • 發佈：2018-12-20
HTML 登錄檔單
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/base.css" /> <link rel="stylesheet" type="text/css" href="css/register.css" /> <title>使用者登錄檔單驗證</title> <script src="js/jquery.js"></script> </head> <body> <div class="wrapper container"> <h2>使用者註冊</h2> <form onsubmit="return post(this)"> <p class="clearfix"> <label class="one">手機號碼：</label> <input name="telphone" class="text" placeholder="請輸入手機號" /> <label class="error">請輸入正確的手機號</label> </p> <p class="clearfix"> <label class="one" >校驗碼：</label> <input name="code" class="code" type="text" placeholder="請輸入手機6位校驗碼" /> <input class="get_code" type="button" value="獲取驗證碼" /> <label class="error">請填寫手機接收到的6位數校驗碼</label> </p> <p class="clearfix"> <label class="one">登入密碼：</label> <input name="password" type="password" class="text" placeholder="請輸入6-16位密碼" /> <label class="error">密碼在6-16個字元之間</label> </p> <p class="clearfix"> <label class="one">確認密碼：</label> <input name="c_password" type="password" class="text" placeholder="請再次輸入密碼" /> <label class="error">確認密碼和密碼不一致</label> </p> <p class="clearfix"> <label class="one">姓名：</label> <input name="name" type="text" class="text" placeholder="請輸入2-6位中文" /> <label class="error">請輸入2-6位中文</label> </p> <p class="clearfix"> <label class="one">身份證：</label> <input name="idcard" type="text" class="text" placeholder="請輸入18位二代身份證號碼" /> <label class="error">請輸入18位二代身份證號碼</label> </p> <p class="clearfix"> <label class="one">郵箱：</label> <input name="email" type="text" class="text" placeholder="請輸入Email郵箱" /> <label class="error">Email郵箱不正確</label> </p> <p class="clearfix"><input class="submit" type="submit" value="立即註冊"/></p> </form> </div> <script type="text/javascript"> function post(obj){ var postData = $(obj).serialize(); $.post('php/check.php',{postData:postData},function(data){ if(data.code){ $("input[name="+data.sign+"]").siblings('.error').show(); }else{ location.href = 'ok.html'; } },'json'); return false; } </script> </body> </html>
php後臺處理
<?php parse_str($_POST['postData'], $post); if (!preg_match('/^1\d{10}$/', $post['telphone'])) { echo json_encode(['code' => 1, 'sign' => 'telphone']); return; } if ($post['code']!='123456') { echo json_encode(['code' => 1, 'sign' => 'code']); return; } if (!preg_match('/^.{6,16}$/', $post['password'])) { echo json_encode(['code' => 1, 'sign' => 'password']); return; } if ($post['c_password']!=$post['password']) { echo json_encode(['code' => 1, 'sign' => 'c_password']); return; } if (!preg_match('/^[\x80-\xff]{6,18}$/', $post['name'])) { echo json_encode(['code' => 1, 'sign' => 'name']); return; } if (!preg_match('/^\d{18}$/', $post['idcard'])) { echo json_encode(['code' => 1, 'sign' => 'idcard']); return; } if (!preg_match('/^[\da-z]+([\._\-]*[\da-z]+)*@[\da-z]+([\.\-][\da-z]+)*\.[a-z]+$/i', $post['email'])) { echo json_encode(['code' => 1, 'sign' => 'email']); return; } //將合法資料寫入資料庫 echo json_encode(['code' => 0]); //postData telphone=1&code=1&password=1&c_password=&name=&idcard=1&email= // ["telphone"]=> // ["code"]=> // ["password"]=> // ["c_password"]=> // ["name"]=> // ["idcard"]=> // ["email"]=>
程式碼並不完整，主要缺乏js檔案 css樣式檔案。樣式不在可忽略。