form 表单提交
0
[已解决问题]
解决于 2018-06-01 14:18
$(".sub input").click(function(){
var phoneVal = $('.phone').val();
var drage=$(".drag_text").html();
reg=/^1[3|4|5|7|8][0-9]\d{4,8}$/i;//验证手机正则(输入前7位至11位)
if(phoneVal == '' && phoneVal.length <= 0){
$('.error').html('输入框不能为空！').css("color","#f90");
$('.phone').css("border","1px solid #f90");
return false;
}else if(phoneVal.length<11 && phoneVal.length>0){
$(".error").html("手机号长度错误！").css("color","#f90");
$('.phone').css("border","1px solid #f90");
return false;
}
else if(!reg.test(phoneVal)) {
$('.error').html('手机号错误！').css('color','#f90');
$('.phone').css("border","1px solid #f90");
}else{
$('.error').html("输入正确").css("color","#1d8f0a");
$('.phone').css("border","1px solid #1d8f0a");
if(drage !== "验证通过"){
$("#Iy").html("请滑动验证");
return false;
}
else{
$("#Iy").html("");
return true;
}
return false;
}
var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if(phoneVal !== "" && phoneVal.length>11){
if (!reg.test(phoneVal )) {
$('.error').html('邮箱格式不正确，请重新输入！').css('color','#f90');
return false;
}else{
$('.error').html('输入正确！').css('color','#1d8f0a');
$(".phone").css("border","1px solid #1d8f0a");
if(drage !== "验证通过"){
$("#Iy").html("请滑动验证");
return false;
}
else{
$("#Iy").html("");
return true;
}
return false;
}
}
})
上面代码怎么用form 表单提交 ，写两个函数、只从后台返回一个ajax
最佳答案
0
直接把ajax写成方法，用的时候调用方法不就行了吗。。。。
奖励园豆：5
<input type="text" name="mobile" placeholder="请输入手机号/邮箱" class="phone" />
目前只是同时验证手机号和邮箱的格式
@疯撩汝心: 判断一下，用“||”来判断，只要是手机号或者是邮箱都可以通过不就行了吗
@疯撩汝心: 建议用非空验证加正则表达式验证
@刘凌枫羽: $("form").submit(function(){
var phoneVal = $('.phone').val();
var drage=$(".drag_text").html();
var reg=/^1[3|4|5|7|8][0-9]\d{4,8}$/i;//验证手机正则(输入前7位至11位)
var regb = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if(phoneVal == '' && phoneVal.length <= 0){
$('.error').html('输入框不能为空！').css("color","#f90");
$('.phone').css("border","1px solid #f90");
return false;
}else if(phoneVal.length<11){
$(".error").html("手机号长度不够").css("color","#f90");
$('.phone').css("border","1px solid #f90");
return false;
} else if(!reg.test(phoneVal) && phoneVal.length<11){
$('.error').html('手机号错误！').css('color','#f90');
$('.phone').css("border","1px solid #f90");
return false;
}else if(!regb.test(phoneVal) && phoneVal.length>11){
$('.error').html('邮箱格式不正确，请重新输入！').css('color','#f90');
$('.phone').css("border","1px solid #f90");
return false;
}else{
// alert("正确");
$('.phone').css("border","1px solid #1d8f0a");
$('.error').html('输入成功！').css('color','#1d8f0a');
if(drage !== "验证通过"){
$("#Iy").html("请滑动验证");
return false;
}else {
$("#Iy").html("");
return true;
}
return false;
}
})
我写到这的时候，还有一个邮箱小于11位时的验证出不来，能不能看看？
@疯撩汝心: 手机位数直接不等于11不就好了吗，为什么还有大于和小于呢
@刘凌枫羽: 不等于11位，有些邮箱小于11位，也是不等11位，还是提示手机的错误
@疯撩汝心: if(reg.test(phoneVal) || regb.test(emailVal)){
$('.error').html('正确！').css('color','#f90');
$('.phone').css("border","1px solid #f90");
return false;
}
@疯撩汝心: 不管是手机号还是邮箱，只要有一个通过验证就为true，没必要验证长度的
@刘凌枫羽: 那如果手机号没有输入完整，那怎么办呢？
@疯撩汝心: 那就不能通过正则表达式验证，直接提示不合法就可以了
@疯撩汝心: 我觉得这些提示就够了，你要是想提示长度的话，我觉得只能是两个input才能完美完成，因为邮箱要是和手机号一样长的话就不能确定提示谁的验证了
@刘凌枫羽: 两个input的话那还好，但是要求就是在一个input里面写
@疯撩汝心: 必须要长度提示还是什么情况
@刘凌枫羽: 因为这是手机和邮箱，提示的话肯定有冲突，所以就让它默认其中一个提示
@疯撩汝心: 那就一个提示就够了，按我上面说的就可以了啊
@刘凌枫羽: 确实可以，但是多一位或者少一位的话，它不能提示，怎么办？
@疯撩汝心: 提示信息都写成一样的，格式错误什么的
@刘凌枫羽: 那我先试试看，你会不会用两个函数写这个
@疯撩汝心: 两个函数是啥意思
@刘凌枫羽: 就是把这两个验证放在两个函数里，验证哪个执行哪个
@疯撩汝心: 反正总得先知道他输入的是那种，用函数也一样，要么就在页面上给一个选择项，可以选择手机号或是邮箱登陆
其他回答(4)
0
$.ajax({ //几个参数需要注意一下 type: "POST",//方法类型 dataType: "json",//预期服务器返回的数据类型 url: "/users/login" ,//url data: $('#form1').serialize(), success: function (result) { console.log(result);//打印服务端返回的数据(调试用) if (result.resultCode == 200) { alert("SUCCESS"); } ; }, error : function() { alert("异常！"); } });
1 $.ajax({ 2 //几个参数需要注意一下 3 type: "POST",//方法类型 4 dataType: "json",//预期服务器返回的数据类型 5 url: "/users/login" ,//url 6 data: $('#form1').serialize(), 7 success: function (result) { 8 console.log(result);//打印服务端返回的数据(调试用) 9 if (result.resultCode == 200) { 10 alert("SUCCESS"); 11 } 12 ; 13 }, 14 error : function() { 15 alert("异常！"); 16 } 17 });
0
以post方式把form内容serialize()成json格式提交就可以了
0
不太明白你什么意思? 后台返回ajax?
表单提交: 参数校验通过后 $("#from").submit()
或者ajax请求 data参数可以用jQuery的 $("#from").serialize() 然后发送ajax请求
其实就是这样写的代码需要写两次ajax ，怎么改才能只需要写一次ajax
@疯撩汝心: 不好意思还是没明白为何要两次ajax
难道不是校验参数通过后调用一次ajax就完成的?
@、熙和: 是的。只需要调用一次ajax，但是我这个代码好像需要两次，手机号通过一次，邮箱通过还一次
@、熙和: <input type="text" name="mobile" placeholder="请输入手机号/邮箱" class="phone" />
同时验证手机号和邮箱的格式
0
jQuery(function () { com = { post: function (url, options, callback, failCallback, asyncFlag) { if (url == null) { return; } var dfd = $.Deferred(); var opts = $.extend({}, options || {}); var optAsync = true; if (asyncFlag == undefined || asyncFlag == true) { optAsync = true; } else { optAsync = false; } $.ajax({ url: url, data: opts, type: "POST", dataType: "json", async: optAsync, //设为false就是同步请求 success: function (res) { if (res == null) { return; } if(callback){ callback(res); } }, error: function (msg) { com.showAlert(com.error, msg); if (failCallback) { failCallback(msg); } } }); return dfd.promise(); }, } }); com.post(url, options, callback, failCallback, asyncFlag);请求地址,你的参数,成功回调,失败回调,同步异步; var options={}; options["参数名1"]="参数值1"; options["参数名2"]="参数值2"; com.post("/abc", options, function(res){console.log(res)}, function(res){console.log("失败")}, false);
拿去用不谢!!!
