冯美杰就是我。单纯的个人博客,只做记录,别无其他。
Powered By wordpress ,Theme By 天兴工作室
ajax验证表单提交
fmj 发布于 2019年03月28日 82 浏览 0 评论
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("参数错误"); } }) } });
大概框架就是这么个意思,里面能玩的东西就太多了。
猜你喜欢
- 02-19 ajax加载出来的html绑定js事件
×
欢迎评论
冯美杰就是我。单纯的个人博客,只做记录,别无其他。
Powered By wordpress ,Theme By 天兴工作室