ajax实现提交时校验表单方法

2023-08-01 15:14:03 62

本文实例为大家分享了ajax提交时校验表单的方法，供大家参考，具体内容如下

方法一：

代码示例：

巧妙设计之处：ajax提交的话，不能够进行校验拦截，设置一个flag来判断，很巧妙的设计之处，故收藏！

functioninserts(){
varflag=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);
}
});
}
functioncheckForm(){
varname=$("#name").val();
if(name.trim()==''){
alert("请输入姓名！");
$("#name").focus();
returnfalse;
}
varsex=$("#sex").val();
if(sex.trim()==''){
alert("请输入性别！");
$("#sex").focus();
returnfalse;
}elseif(sex.trim()!='男'&&sex.trim()!='女'){
alert("请输入合法性别！");
$("#sex").val('');
$("#sex").focus();
returnfalse;
}
varage=$("#age").val();
if(age.trim()==''){
alert("请输入年龄！");
$("#age").focus();
returnfalse;
}elseif(age.trim()==0||age.trim()<=0||age.trim()>150){
alert("请输入合法年龄！");
$("#age").focus();
returnfalse;
}
varpolitics_sstatus=$("#politics_sstatus").val();
if(politics_sstatus.trim()==''){
alert("请输入政治面貌！");
$("#politics_sstatus").focus();
returnfalse;
}
vartel=$("#tel").val();
if(tel.trim()==''){
alert("请输入联系电话！");
$("#tel").focus();
returnfalse;
}elseif(tel.length<11||tel.length>11){
alert("请输入合法联系电话！");
$("#tel").focus();
returnfalse;
}
varid_card=$("#id_card").val();
if(id_card.trim()==''){
alert("请输入身份证号码！");
$("#id_card").focus();
returnfalse;
}elseif(id_card.length<18||id_card.length>18){
alert("请输入合法身份证号码！");
$("#id_card").focus();
returnfalse;
}
varappeal=$("#appeal").val();
if(appeal.trim()==''){
alert("请输入主要诉求！");
$("#appeal").focus();
returnfalse;
}
returntrue;
}

页面效果：

方法二：

这是一个登陆的ajax校验

代码示例：

页面的提交按钮：

js逻辑：

分析：当用户点击按钮的时候，会


varredirectUrl="${redirect}";
varLOGIN={
/*
3、进行账号密码的校验
*/
checkInput:function(){
if($("#loginname").val()==""){
alert("用户名不能为空");
$("#loginname").focus();
returnfalse;
}
if($("#nloginpwd").val()==""){
alert("密码不能为空");
$("#nloginpwd").focus();
returnfalse;
}
returntrue;
},
/*
4、进行登录
1.当账号密码校验不为空的时候进行后台校验
*/
doLogin:function(){
$.post("/user/login",$("#formlogin").serialize(),function(data){
if(data.status==200){
alert("登录成功！");
if(redirectUrl==""){
location.href="http://localhost:8082";
}else{
location.href=redirectUrl;
}
}else{
alert("登录失败，原因是："+data.msg);
$("#loginname").select();
}
});
},
/*
2、进行登录校验
*/
login:function(){
if(this.checkInput()){
this.doLogin();
}
}

};
/*
1、页面初始化的时候校验表单的数据
1.当用户点击登录的时候，绑定一个click事件
2.调用LOGIN对象的login方法，进行账号密码校验
*/
$(function(){
$("#loginsubmit").click(function(){
LOGIN.login();
});
});

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

ajax实现提交时校验表单方法

热门推荐

随机推荐