fmj.me

FMJ.me

一个靠自学的菜鸟,只会html+css,JavaScript是什么鬼?php?我靠,好高大上!

冯美杰就是我。单纯的个人博客,只做记录,别无其他。

鄂ICP备15002105号

Powered By Z-BlogPHP,Theme By zblog模板

当前位置:网站首页 技术学习 正文

ajax验证表单提交

FMJ发布于1年前 (2019-03-28) 589 浏览 1 评论

ajax这个东西很多人都说很简单,对于我来说一直没弄懂过。

今天工作需要要写一个ajax的表单验证,硬着头皮一边看教程一边写,算是折腾出来了。把代码详细加注释发出来,免得以后忘记了...

html代码:

<form id="myform" method="post" onsubmit="return false" action="##">
      <input type="text" name="title" id="title" class="txt"  value="" size="28" tabindex="1" placeholder="输入您的手机号码">
      <input name="sumbit" type="submit" tabindex="6" value="提交" class="button" />
</form>

js代码(需要引入JQ库):

$("#myform").submit(function(){
    var regs = /^1[3|4|5|7|8][0-9]\d{8}$/;
    var phone = $("input[name='D1']").val();
    //验证是否填写
    if(phone == ""){
        alert("请输入你的手机号码!");
        return false
    }
    //验证手机号码格式是否正确
    if (!regs.test(phone)){
        alert("输入正确的手机号!");
        return false
    }else{
        $.ajax({
            type:"post",//类型
            url:"表单提交url",//提交地址
            data: $("#myform").serialize(),//数据绑定
            dataType:"html",//返回类型
            //返回成功后的提示
            success:function(msg){
                alert("提交成功,请静候客服的回电");
                return false;
            },
            //返回错误的提示
            error:function(result){
                alert("参数错误");
            }
        })
    }
});

大概框架就是这么个意思,里面能玩的东西就太多了。

ajax 表单提交

上一篇: 淘宝的又一种套路

下一篇: 小爱同学!

已有1位网友发表了看法:

  • 029shouji.com

    029shouji.com  评论于 [2019-05-02 14:13:11]  回复

    我和你一样哈,只会自学没人带,只会静态语言,动态好难

取消回复欢迎 发表评论:

请填写验证码