正文

ajax实现提交时校验表单方法(ajax实现表单验证用户注册流程是什么样的)太疯狂了

文章摘要

这篇文章介绍了如何使用JavaScript函数`inserts()`来处理表单提交。函数首先调用`checkForm()`验证表单输入是否合法,包括检查姓名、性别、年龄、政治面貌、联系电话、身份证号及主要诉求等字段。如果任何字段输入不合法,将提示相应错误并返回false;如果所有字段都合法,调用`.ajax()`方法进行表单数据提交。 `.ajax()`方法采用POST方法向指定URL发送表单数据,并通过`.serialize()`方法将表单数据转为JSON格式发送。服务器端接收到数据后,会返回处理结果。在`success`回调函数中,会显示提示信息并重新载入页面;在`error`回调函数中,会显示错误提示。 文章的核心内容是表单验证和数据提交流程的实现,展示了如何通过JavaScript和Ajax技术实现表单数据的快速提交和反馈处理。

 function inserts(){ var flag=checkForm(); if (flag==false) { return; } $.ajax({ //几个参数需要注意一下 type: “POST”,//方法类型 dataType: “json”,//预期服务器返回的数据类型 url: “<%=path %>/soldier/inserts” ,//url data: $(‘#form1′).serialize(), success: function (data) { alert(data.msg); window.location.reload(true); }, error : function() { alert(data.msg); } }); } function checkForm(){ var name=$(“#name”).val(); if (name.trim()==”) { alert(“请输入姓名!”); $(“#name”).focus(); return false; } var sex=$(“#sex”).val(); if (sex.trim()==”) { alert(“请输入性别!”); $(“#sex”).focus(); return false; } else if (sex.trim() !=’男’ && sex.trim() !=’女’) { alert(“请输入合法性别!”); $(“#sex”).val(”); $(“#sex”).focus(); return false; } var age=$(“#age”).val(); if (age.trim()==”) { alert(“请输入年龄!”); $(“#age”).focus(); return false; }else if(age.trim()==0 || age.trim()<=0 || age.trim()>150){ alert(“请输入合法年龄!”); $(“#age”).focus(); return false; } var politics_sstatus=$(“#politics_sstatus”).val(); if (politics_sstatus.trim()==”) { alert(“请输入政治面貌!”); $(“#politics_sstatus”).focus(); return false; } var tel=$(“#tel”).val(); if (tel.trim()==”) { alert(“请输入联系电话!”); $(“#tel”).focus(); return false; }else if(tel.length<11 || tel.length>11){ alert(“请输入合法联系电话!”); $(“#tel”).focus(); return false; } var id_card=$(“#id_card”).val(); if (id_card.trim()==”) { alert(“请输入身份证号码!”); $(“#id_card”).focus(); return false; }else if(id_card.length<18 ||id_card.length>18){ alert(“请输入合法身份证号码!”); $(“#id_card”).focus(); return false; } var appeal=$(“#appeal”).val(); if (appeal.trim()==”) { alert(“请输入主要诉求!”); $(“#appeal”).focus(); return false; } return true; }