Ajax Jquery 提交验证页面数据

时间:2022-11-05 17:09:07
$(function(){
//需要检查为空的输入框的id数组
var nullCheckArray = new Array(
"username",
"password",
"tel"
);
//需要检查数组类型的输入框的id数组
var numberCheckArray = new Array(
"age",
"sex",
"tel"
);

$("#submit").click(function(){
//检查为空
checkNull(nullCheckArray);
//检查数字类型
checkNumber(numberCheckArray);
//提交数据
userInfoPost(/user/add.do);
});

//检查输入框是否为空
function checkNull(idList){
if(idList != null && idList.length > 0){
for(var i = 0;i < idList.length;i++){
var elem = $("#"+idList[i]);
var val = elem.val();
if($.trim(val) == ""){
alert(elem.prev().text+"不能为空!");
return false;
}
}
return true;
}else{
return false;
}
}

//监听输入框输入类型
function checkNumber(idList){
if(idList != null && idList.length > 0){
for(var i = 0;i < idList.length;i++){
var elem = $("#"+idList[i]);
//失去焦点事件
elem.blur(function(){
var val = elem.val();
if(!$.isNumeric(val)){
alert(elem.prev.text+"为数字类型");
return false;
}
});
}
return true;
}else{
return false;
}
}

//根据id获取一个input元素的值
function V(id){
return $.trim($("#"+id).val());
}

//提交用户信息
function userInfoPost(url){
//取值
var username = V("username");
var password = V("password");
var age = V("age");
var sex = V("sex");
var tel = V("tel");
//封装js对象
var userInfo = {
"username" : username,
"password" : password,
"age" : age,
"sex" : sex,
"tel" : tel,
};
//提交
$.ajax({
type : "post",
url : url,
data : userInfo,
success : function(data){
//接收服务端返回值
alert(data);
//设置文本框不可编辑
$(".user-info input[type=text]").each(function(){
$(this).attr("readonly","readonly");
$(this).attr("disabled","disabled");
});
//显示一个div
$("#div1").css("display","block");
//隐藏一个div
$("#div2").css("display","none");
}
});
}
});