按照视频上写的，我这个为撒子不对啊，求大佬指点指点

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        label{display: block;margin-bottom: 10px;}
        .error{display: none;width: auto;}
        span{
          display: inline-block;
          width: 100px;
        }
        .submit{
          text-align: center;
          cursor: pointer;
          display: block;
          width: 50px;
          padding: 3px 10px;
          background-color: #ccc;
          color: #000;
        }
    </style>
  </head>
  <body>
    <form>
      <label>
        <span>手机号：</span>
        <input type="text" name="telphone" value="">
        <span class="error">请输入正确的手机号</span>
      </label>
      <label>
        <span>验证码：</span>
        <input type="text" name="code" value="">
        <span class="error">请输入正确的验证码</span>
      </label>
      <label>
        <span>密码：</span>
        <input type="password" name="password" value="">
        <span class="error">请重新输入</span>
      </label>

      <label>
        <a class="submit">登录</a>
      </label>
    </form>
  </body>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script>
    $(function() {


      // 表单提交
      $(document).on("click",".submit",function(){
          post();
      })
    })

    // 表单提交
    function post() {
      var postData = $("form").serialize();
      $.ajax({
           type: "POST",
           url: "1.php",
           data: {postData:postData},
           dataType: 'json',
           success: function(data){
                console.log(data);
                if (data.code) {
                  $("input[name="+data.sign+"]").siblings(".error").show();
                }else{
                  console.log("验证成功");
                }

                return false;

            },
            error:function (XMLHttpRequest,textStatus,errorThrown) {
                 console.log(XMLHttpRequest.status);
                 console.log(XMLHttpRequest.readyState);
                 console.log(textStatus);
            }
       });
     return false;
    }
  </script>
</html>

php:

<?php
header("content-type:text/html;charset=utf-8");
parse_str($_POST['postData'],$post);

// 判断手机号是否正确
if (!preg_match('/^1\d{10}$/',$post['telphone'])) {
  echo json_encode(['code'=>1,'sign'=>'telphone']);
  return false;
}
// 判断验证码是否正确

if ($post['code'] != '123456') {
  echo json_encode(['code'=>1,'sign'=>'code']);
  return false;
}

星期9 2018-02-01

源自：正则表达式 4-6 常规项目正则验证

收起

2回答

imooc_澈 2018-02-01 10:44:31

你好，小慕给您测试了一下，程序缺少一个当手机号和验证码都正确时的返回结果，但现有代码的判断逻辑没有问题，代码的逻辑就是先判断手机号，再判断验证码，当手机号不正确时，程序就会返回json数据，后面的代码就不再执行了，当手机号正确，代码继续向下走，再判断验证码是否正确，如果不正确就会提示验证码不正确，如图：

当手机号和验证码都正确的时候，你的逻辑是console.log("验证成功");但是此时因为没有data数据回来，data.code找不到，类似于变量未定义一样，它无法走js里对于data.code的if判断，按f12可以看到js报错，如图：

根据你的逻辑，在php代码后面加上一个数据返回：echo json_encode(['code'=>0,'sign'=>'ok']);就可以了。

如果解决了你的问题，请采纳，祝学习愉快~

收起回答

提问者星期9 #1

'sign'=>'ok' 只能判断 input 的名字等于ok 可是输入框的名字没有等于ok 的啊

2018-02-01 11:21:52
imooc_澈回复提问者星期9 #2

js代码里没有对sign的判断，只有在验证出现错误的时候，才会显示sign的错误提示，当全部都正确的时候除了打印出验证成功以外没有其他操作，这里的sign=ok其实并没有用到，只是小慕个人代码习惯。您也可以在验证都正确时只返回code值为0。

2018-02-01 11:55:46