찾다

집 >php教程 >PHP开发 >PHP+Ajax 기반 폼 검증에 대한 자세한 설명

PHP+Ajax 기반 폼 검증에 대한 자세한 설명

高洛峰
高洛峰원래의
2016-12-23 17:42:041751검색

먼저 페이지를 새로 고치지 않고 키보드 응답을 사용하여 양식 입력이 올바른지 확인합니다.
사용자는 onkeydown 및 onkeyup 이벤트를 통해 응답 이벤트를 트리거합니다. 사용법은 onclick 이벤트와 유사합니다. onkeydown은 키보드의 키를 눌렀을 때 트리거된다는 의미이고, onkeyup은 그 반대이며, 키보드의 키를 누른 다음 떼면 트리거된다는 의미입니다.
두 가지 일반적인 호출 방법:
(1) 페이지 요소에 이벤트를 추가합니다. 사용자가 정보 입력을 완료하고 아무 키나 클릭하면 onkeydown 이벤트가 트리거되고 Refer() 함수가 호출됩니다.
이 방법은 가장 간단하고 직접적이며 다음 형식을 사용합니다. 

<script type="text/javascript">
   ...
   function refer(){
   ...
   }
</script>
<input type="text" onkeydown="refer()"/>

(2) window.onload를 통해 로드하면 페이지가 로드되면 이벤트가 로드됩니다. 사용자가 정보를 입력하면 문자가 입력될 때마다 이 이벤트가 발생합니다. 이벤트에 의해 호출되는 함수에서는 사용자의 입력 정보를 판단합니다. 

window.onload = function(){
 $(&#39;regname&#39;).onkeydown = function (){
  name = $(&#39;regname&#39;).value;
 }
}

onkeydown 이벤트를 사용하면 148abe006775c52e28d07bbe171fd752 키(event.keyCode==13), 스페이스 바(event.keyCode==32), ca92b3c4521180d6a70d03d3dfb34279 ; 키, cfb97f17c481891d4a21525de725c898 키 등. 이는 onkeydown 이벤트의 keyCode 속성을 사용하여 달성됩니다. KeyCode 속성은 사용자가 어떤 키를 눌렀는지 알고 있습니다.

두 번째, 등록 정보 확인
범용 함수, 트리거된 id 요소 객체를 반환합니다. 

function $(id){
 return document.getElementById(id);
}
window.onload事件，表示当前窗口被载入时触发。function(){...}表示当前页面被载入时所要进行的操作。
window.onload = function(){
 ...
}

function() 함수 분석
첫 번째로 사용자 이름 텍스트 상자에 초점을 맞춥니다. 사용자 작업을 용이하게 합니다. 다음으로 검출할 5개 데이터의 결과를 나타내는 5개의 변수를 선언합니다. 테스트 데이터가 검증되면 변수 값을 "yes"로 설정합니다. 

$(&#39;regname&#39;).focus();
var cname1,cname2,cpwd1,cpwd2;  //声明了5个变量，表示要检测的5项数据chkreg()函数是每一次触发键盘事件后都要调用的，该函数判断5个变量的值，只有当所有变量都为"yes"时，注册按钮才会被激活。 
function chkreg(){
 if((cname1 == &#39;yes&#39;) && (cname2 == &#39;yes&#39;) && (cpwd1 == &#39;yes&#39;) && (cpwd2 == &#39;yes&#39;)){
  $(&#39;regbtn&#39;).disabled = false;
 }else{
  $(&#39;regbtn&#39;).disabled = true;
 }
}

사용자가 등록 이름을 입력하면 이 함수는 각 입력에 대해 정규화를 수행합니다. 사용자는 결과에 따라 다른 cname1 값을 판단하고 설정합니다. 

$(&#39;regname&#39;).onkeyup = function (){
 name = $(&#39;regname&#39;).value;  //获取注册名称
 cname2 = &#39;&#39;;
 if(name.match(/^[a-zA-Z_]*/) == &#39;&#39;){
  $(&#39;namediv&#39;).innerHTML = &#39;<font color=red>必须以字母或下划线开头</font>&#39;;
  cname1 = &#39;&#39;;
 }else if(name.length <= 3){
  $(&#39;namediv&#39;).innerHTML = &#39;<font color=red>注册名称必须大于3位</font>&#39;;
  cname1 = &#39;&#39;;
 }else{
  $(&#39;namediv&#39;).innerHTML = &#39;<font color=green>注册名称符合标准</font>&#39;;
  cname1 = &#39;yes&#39;;
 }
 chkreg(); //调用chkreg()函数，判断5个变量是否正确
}

사용자 이름 텍스트 상자가 포커스를 잃으면, 즉 사용자가 입력을 완료하고 페이지의 다른 요소로 이동할 때 사용자 이름이 반복되는지 감지합니다. 사용자 이름 판단은 Ajax 기술을 사용하여 chkname.php를 호출하고(이 페이지의 사용자 이름 확인 코드는 추후 게시 예정) chkname.php의 반환 값을 기준으로 판단 결과가 div 태그에 표시됩니다. 

$(&#39;regname&#39;).onblur = function(){
 name = $(&#39;regname&#39;).value;  //获取注册名称
 if(cname1 == &#39;yes&#39;){ //当用户名称的格式输入合格后才进行这一步
  xmlhttp.open(&#39;get&#39;,&#39;chkname.php?name=&#39;+name,true);  //open()创建XMLHttpRequest初始化连接，Ajax创建新的请求
  xmlhttp.onreadystatechange = function(){  //当指定XMLHttpRequest为异步传输时(false),发生任何状态的变化，该对象都会调用onreadystatechange所指定的函数
   if(xmlhttp.readyState == 4){  //XMLHttpRequest处理状态，4表示处理完毕
    if(xmlhttp.status == 200){ //服务器响应的HTTP代码，200表示正常
     var msg = xmlhttp.responseText;  //获取响应页的内容
     if(msg == &#39;1&#39;){  //chkname.php页面查找数据库，数据库没有该用户返回1
      $(&#39;namediv&#39;).innerHTML="<font color=green>恭喜您，该用户名可以使用!</font>";
      cname2 = &#39;yes&#39;;
     }else if(msg == &#39;2&#39;){ //数据库存在该用户返回0
      $(&#39;namediv&#39;).innerHTML="<font color=red>用户名被占用！</font>";
      cname2 = &#39;&#39;;
     }else{
      $(&#39;namediv&#39;).innerHTML="<font color=red>"+msg+"</font>";
      cname2 = &#39;&#39;;
     }
    }
   }
  }
  xmlhttp.send(null);
  chkreg(); //检测是否激活注册按钮
 }
}

비밀번호를 확인할 때 비밀번호의 길이를 제한하는 것 외에도 비밀번호의 강도를 판단할 수도 있습니다. 

$(&#39;regpwd1&#39;).onkeyup = function(){
 pwd = $(&#39;regpwd1&#39;).value;
 pwd2 = $(&#39;regpwd2&#39;).value;
 if(pwd.length < 6){
  $(&#39;pwddiv1&#39;).innerHTML = &#39;<font color=red>密码长度最少需要6位</font>&#39;;
  cpwd1 = &#39;&#39;;
 }else if(pwd.length >= 6 && pwd.length < 12){
  $(&#39;pwddiv1&#39;).innerHTML = &#39;<font color=green>密码符合要求。密码强度：弱</font>&#39;;
  cpwd1 = &#39;yes&#39;;
 }else if((pwd.match(/^[0-9]*$/)!=null) || (pwd.match(/^[a-zA-Z]*$/) != null )){
  $(&#39;pwddiv1&#39;).innerHTML = &#39;<font color=green>密码符合要求。密码强度：中</font>&#39;;
  cpwd1 = &#39;yes&#39;;
 }else{
  $(&#39;pwddiv1&#39;).innerHTML = &#39;<font color=green>密码符合要求。密码强度：高</font>&#39;;
  cpwd1 = &#39;yes&#39;;
 }
 if(pwd2 != &#39;&#39; && pwd != pwd2){
  $(&#39;pwddiv2&#39;).innerHTML = &#39;<font color=red>两次密码不一致!</font>&#39;;
  cpwd2 = &#39;&#39;;
 }else if(pwd2 != &#39;&#39; && pwd == pwd2){
  $(&#39;pwddiv2&#39;).innerHTML = &#39;<font color=green>密码输入正确</font>&#39;;
  cpwd2 = &#39;yes&#39;;
 }
 chkreg();
}

두 번째 비밀번호 판단은 비교적 간단합니다. 두 번째 비밀번호 입력이 첫 번째 입력과 같은지 판단하면 됩니다. 

$(&#39;regpwd2&#39;).onkeyup = function(){
 pwd1 = $(&#39;regpwd1&#39;).value;
 pwd2 = $(&#39;regpwd2&#39;).value;
 if(pwd1 != pwd2){
  $(&#39;pwddiv2&#39;).innerHTML = &#39;<font color=red>两次密码不一致!</font>&#39;;
  cpwd2 = &#39;&#39;;
 }else{
  $(&#39;pwddiv2&#39;).innerHTML = &#39;<font color=green>密码输入正确</font>&#39;;
  cpwd2 = &#39;yes&#39;;
 }
 chkreg();
}

위 항목을 반드시 입력해야 하며, 더 자세한 정보를 입력하고 싶다면 "상세정보 버튼"을 클릭하세요. 

$(&#39;morebtn&#39;).onclick = function(){
 if($(&#39;morediv&#39;).style.display == &#39;&#39;){
  $(&#39;morediv&#39;).style.display = &#39;none&#39;;
 }else{
  $(&#39;morediv&#39;).style.display = &#39;&#39;;
 }
}

이메일 형식 확인 , 문자열을 입력하려면 @ 및 .이 포함되어야 하며, 이 두 문자열의 위치는 시작이나 끝이거나 서로 연결될 수 없습니다. 

$(&#39;email&#39;).onkeyup = function(){
 emailreg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
 $(&#39;email&#39;).value.match(emailreg);
 if($(&#39;email&#39;).value.match(emailreg) == null){
  $(&#39;emaildiv&#39;).innerHTML = &#39;<font color=red>错误的email格式</font>&#39;;
  cemail = &#39;&#39;;
 }else{
  $(&#39;emaildiv&#39;).innerHTML = &#39;<font color=green>输入正确</font>&#39;;
  cemail = &#39;yes&#39;;

 }
 chkreg();

3. 사용자 이름(chkname.php) 감지 

<?php
session_start();
include_once "conn/conn.php";
$reback = &#39;0&#39;;
$sql = "select * from tb_member where name=&#39;".$_GET[&#39;name&#39;]."&#39;";
$num = $conne->getRowsNum($sql);
if($num == 1){
 $reback = &#39;2&#39;;
}else if($num == 0){
 $reback = &#39;1&#39;;
}else{
 $reback = $conne->msg_error();
}
echo $reback;
?>

넷째, XMLHttpRequest 함수 초기화

// JavaScript Document
var xmlhttp = false;
if (window.XMLHttpRequest) {          //Mozilla、Safari等浏览器
 xmlhttp = new XMLHttpRequest();
} 
else if (window.ActiveXObject) {         //IE浏览器
 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
  try {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e) {}
 }
}


PHP+Ajax 기반 Form Validation에 대한 자세한 설명은 PHP 중국어 홈페이지를 참고해주세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：php+ajax 등록 실시간 확인 기능다음 기사：php+ajax 등록 실시간 확인 기능

관련 기사

더보기