javascript - 使用ajax提交表单,表单自带过滤失效
大家讲道理
大家讲道理 2017-04-11 10:47:36
[JavaScript讨论组]

做了一个表单,在HTML里边做了一些过滤,然后用$.ajax提交
问题是,点击submit按钮以后就直接调用ajax了,表单自带的过滤都失效了

//这里限制11位数字

//这里限制2-10位数字

  $('input[type=submit').on('click',function(){
    $.ajax({
      type:"GET",
      url:'newinvest/invest'+'?'+$('form').serialize(),
      success:formCallback()
    });
  });

这种情况应该怎么解决呢?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(2)
高洛峰
 $('form').on('submit',function(){
    $.ajax({
      type:"GET",
      url:'newinvest/invest'+'?'+$('form').serialize(),
      success:formCallback()
    });
  });
高洛峰

“表单自带的过滤”是?这个我不清楚,所以没法谈感受!不过代码可以这样组织:

$('input[type=submit').on('click',function(e){
    //检查各个数据是否正确,可以调用你说的“自带的过滤”方法检查输入是否合法
    if(数据不正确){
        return false;
    }
    //如果检查正确,再继续发送ajax
    $.ajax({
      type:"GET",
      url:'newinvest/invest'+'?'+$('form').serialize(),
      success:formCallback()
    });
});

修正:

那你应该拦截的是表单的submit事件,调整html:

<form id="ffff">
      <label for="name">姓名</label>
      <input type="text" id="name" name="name" autofocus="true" required="true"/>
      <select id="gender" name="gender">
        <option value="男">先生</option>
        <option value="女">女士</option>
      </select>
    </p>
    <p>
      <label for="tel">手机号码</label>
      <input id="tel" name="tel" type="text" placeholder="请输入您的手机号码" pattern="\d{11}" required="true"/>//这里限制11位数字
    </p>
    <p>
      <label for="amount">借款金额</label>
      <input id="amount" name="amount" type="number" placeholder="请输入金额" pattern="\d{2,10}" required="true"/>//这里限制2-10位数字
      <label for="period">借款期限</label>
      <input type="text" name="period" id="period" placeholder="请输入天数" pattern="\d{1,3}" required="true"/>
    </p>
    <p>
      <label for="province">所在地区</label>
      <select name="province" id="province">
      </select>
      <label for="city">城市</label>
      <select name="city" id="city">
      </select>
</form>
$('#ffff').on('submit',function(){
    $.ajax({
      type:"GET",
      url:'newinvest/invest'+'?'+$('form').serialize(),
      success:formCallback()
    });
  });
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号