文章摘要
这篇文章介绍了如何使用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;
}
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;
}
© 版权声明
文章版权归作者所有,未经允许请勿转载。