简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 4月16号作业php与ajax文本域验证
Blogger Information
Blog 24
fans 0
comment 0
visits 15254
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
4月16号作业php与ajax文本域验证
小蚂蚁的博客
Original
700 people have browsed it

实例

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

  </style>
</head>

  <body>
    <form>
      <table>
        <caption>注册</caption>
  <tr>
    <td><label for="email">邮箱</label></td>
    <td><input type="text" name="email" id="email" autofocus=""></td>
  </tr>
  <tr>
    <td><label for="password1">密码</label></td>
    <td><input type="password" name="password1" id="password1"></td>
  </tr>

  <tr>
    <td><label for="password2">密码</label></td>
    <td><input type="password" name="password2" id="password2"></td>
  </tr>

  <tr>
    <td><label for="">性别</label></td>
    <td>
           <input type="radio" name="gemder" id="male" value="male"><label for="male">男</label>
           <input type="radio" name="gemder" id="male" value="female"><label for="female">女</label>
           <input type="radio" name="gemder" id="select" value="select" checked=""><label for="select">保密</label>
           
    </td>
  </tr>
  <tr>
    <td><label for="level">级别</label></td>
    <td>
     <select name="level" id="level">
     <option value="0" selected="">小白</option>
     <option value="0">中级</option>
     <option value="0">高级</option>
     </select>

    </td>
  </tr>
  <tr>
    <td><label>语言</label></td>
    <td>
    <input type="checkbox" name="lang[]" id="php" value="php" checked=""><label for="php">php</label>
    <input type="checkbox" name="lang[]" id="c++" value="c++" ><label for="c++">c++</label>
    <input type="checkbox" name="lang[]" id="html" value="html"><label for="html">html</label>
    <input type="checkbox" name="lang[]" id="java" value="java"><label for="java">java</label>
    </td>
  </tr>
  <tr>
  <td><label for="comment">简介</label></td>
  <td>
     <textarea name="comment" rows="5" cols="30"></textarea>
        </td>
      </tr>
      <tr>
      <td colspan="2" align="center">
             <button type="submit" name="submit" id="submit" value="submit">提交</button>
      </td>
      </tr>
      </table>
    </form>
      <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
      <script type="text/javascript">
      // 邮箱验证，全部使用ajax完成，请求类型为post但是为了代码可读性操作使用GET
      $('#email').blur(function(){
        // 采用post
        // $.post(url,data,fynction(data)属性
        $.post('admin/check.php?check=email','email='+$('#email').val(),function(data){
         switch(data.status){
          case 0:
          $('td').find('span').remove()
          // prev().focus移到当前焦点
          $('#email').after('<span>').next().text(data.msg).css('color','red').prev().focus()
            break;
            case 1:
            $('td').find('span').remove()
            $('#email').after('<span>').next().text(data.msg).css('color','red')
            break;
              break;
            case 2:
            $('td').find('span').remove()
            $('#email').after('<span>').next().text(data.msg).css('color','green')
            break;
             break;
       }
     
        },'json')
      })

      //密码验证
      $('#password1').blur(function(){
        if ($('#email').val().length == 0) {
          return false
        }
        $.post('admin/check.php?check=password1','password1='+$('#password1').val(),function(data){
          if(data.status == 0) {
            //清空前一次的提示信息
            $('td').find('span').remove()
            //在文本框后面添加信息提示并设置焦点
            $('#password1').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
            //返回调用者
            return false
          }
        },'json') //返回数据为json格式
      })

      //确认密码验证
      $('#password2').blur(function(){
        //如果邮箱或密码没有输入,则什么都不做,直接返回
        if ($('#email').val().length == 0 || $('#password1').val().length == 0) {
          return false
        }
        $.post('admin/check.php?check=password2', {
          password1: $('#password1').val(),
          password2: $('#password2').val()
        }, function(data){
          switch(data.status) {
            case 0:
            $('td').find('span').remove()
            $('#password2').after('<span>').next().text(data.msg).css('color', 'red').prev().focus();
            break;
            case 1:
            $('td').find('span').remove()
            $('#password2').after('<span>').next().text(data.msg).css('color', 'red')
            //确认密码不对,应该将焦点设置到第一次的密码框内
            $('#password1').focus()
            break;
            case 2:
            $('td').find('span').remove()
            $('#password2').after('<span>').next().text(data.msg).css('color', 'green')
            break;
          }
          
        },'json')
      })
      $('#signature').blur(function(){
        
        if ($('#username').val().length==0 || $('#password1').val().length==0 || $('#password2').val().length==0) {
          return false
        }
        
        //POST提交验证个人简介
        $.post('core/reg_check.php?check=signature','signature='+$('#signature').val(),function(data){
          //根据返回状态码在个人简介文本域后添加span元素，即提示信息
          switch(data.status){
            case 0:
            //状态码返回0
            $('td').find('span').remove()
           //该输入框的后面添加一个span标签，并设置文本内容为该状态下的返回数据，设置字体颜色并使输入框激活
            $('#signature').after('<span>').next().text('*'+data.msg).css('color','#5555').prev().focus()
            break
            case 1:
            $('td').find('span').remove()
            $('#signature').after('<span>').next().text('*'+data.msg).css('color','#f0f0f0').prev().focus()
            break
            
            case 2:
            $('td').find('span').remove()
            $('#signature').after('<span>').next().text(data.msg).css('color','#8888')
            break
          }
        },'json')
        
      })
      
      </script>
</body>
</html>

运行实例 »

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


Correction status：Uncorrected

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！