首页新闻找找看学习计划

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
疯撩汝心的主页 疯撩汝心 | 菜鸟二级 | 园豆:217
提问于:2018-05-30 16:19
< >
分享
最佳答案
0

直接把ajax写成方法,用的时候调用方法不就行了吗。。。。

奖励园豆:5
刘凌枫羽 | 菜鸟二级 |园豆:355 | 2018-06-01 09:05

  

<input type="text" name="mobile" placeholder="请输入手机号/邮箱" class="phone"  />

目前只是同时验证手机号和邮箱的格式

疯撩汝心 | 园豆:217 (菜鸟二级) | 2018-06-01 10:17

@疯撩汝心: 判断一下,用“||”来判断,只要是手机号或者是邮箱都可以通过不就行了吗

刘凌枫羽 | 园豆:355 (菜鸟二级) | 2018-06-01 10:27

@疯撩汝心: 建议用非空验证加正则表达式验证

刘凌枫羽 | 园豆:355 (菜鸟二级) | 2018-06-01 10:29

@刘凌枫羽: $("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位时的验证出不来,能不能看看?

疯撩汝心 | 园豆:217 (菜鸟二级) | 2018-06-01 10:37

@疯撩汝心: 手机位数直接不等于11不就好了吗,为什么还有大于和小于呢

刘凌枫羽 | 园豆:355 (菜鸟二级) | 2018-06-01 10:46

@刘凌枫羽: 不等于11位,有些邮箱小于11位,也是不等11位,还是提示手机的错误

疯撩汝心 | 园豆:217 (菜鸟二级) | 2018-06-01 10:49

@疯撩汝心: if(reg.test(phoneVal) || regb.test(emailVal)){
$('.error').html('正确!').css('color','#f90');
$('.phone').css("border","1px solid #f90");
return false;
}

刘凌枫羽 | 园豆:355 (菜鸟二级) | 2018-06-01 10:57

@疯撩汝心: 不管是手机号还是邮箱,只要有一个通过验证就为true,没必要验证长度的

刘凌枫羽 | 园豆:355 (菜鸟二级) | 2018-06-01 10:58

@刘凌枫羽: 那如果手机号没有输入完整,那怎么办呢?

疯撩汝心 | 园豆:217 (菜鸟二级) | 2018-06-01 11:01

@疯撩汝心: 那就不能通过正则表达式验证,直接提示不合法就可以了

刘凌枫羽 | 园豆:355 (菜鸟二级) | 2018-06-01 11:02

@疯撩汝心: 我觉得这些提示就够了,你要是想提示长度的话,我觉得只能是两个input才能完美完成,因为邮箱要是和手机号一样长的话就不能确定提示谁的验证了

刘凌枫羽 | 园豆:355 (菜鸟二级) | 2018-06-01 11:10

@刘凌枫羽: 两个input的话那还好,但是要求就是在一个input里面写

疯撩汝心 | 园豆:217 (菜鸟二级) | 2018-06-01 11:12

@疯撩汝心: 必须要长度提示还是什么情况

刘凌枫羽 | 园豆:355 (菜鸟二级) | 2018-06-01 11:12

@刘凌枫羽: 因为这是手机和邮箱,提示的话肯定有冲突,所以就让它默认其中一个提示

疯撩汝心 | 园豆:217 (菜鸟二级) | 2018-06-01 11:19

@疯撩汝心: 那就一个提示就够了,按我上面说的就可以了啊

刘凌枫羽 | 园豆:355 (菜鸟二级) | 2018-06-01 11:20

@刘凌枫羽: 确实可以,但是多一位或者少一位的话,它不能提示,怎么办?

疯撩汝心 | 园豆:217 (菜鸟二级) | 2018-06-01 11:30

@疯撩汝心: 提示信息都写成一样的,格式错误什么的

刘凌枫羽 | 园豆:355 (菜鸟二级) | 2018-06-01 11:32

@刘凌枫羽: 那我先试试看,你会不会用两个函数写这个

疯撩汝心 | 园豆:217 (菜鸟二级) | 2018-06-01 11:33

@疯撩汝心: 两个函数是啥意思

刘凌枫羽 | 园豆:355 (菜鸟二级) | 2018-06-01 11:34

@刘凌枫羽: 就是把这两个验证放在两个函数里,验证哪个执行哪个

疯撩汝心 | 园豆:217 (菜鸟二级) | 2018-06-01 11:35

@疯撩汝心: 反正总得先知道他输入的是那种,用函数也一样,要么就在页面上给一个选择项,可以选择手机号或是邮箱登陆

刘凌枫羽 | 园豆:355 (菜鸟二级) | 2018-06-01 11:41
其他回答(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             });
Aylin-online | 园豆:202 (菜鸟二级) | 2018-05-30 16:30
0

以post方式把form内容serialize()成json格式提交就可以了

chengeng | 园豆:292 (菜鸟二级) | 2018-05-30 16:59
0

不太明白你什么意思? 后台返回ajax?

表单提交: 参数校验通过后 $("#from").submit()
或者ajax请求 data参数可以用jQuery的 $("#from").serialize() 然后发送ajax请求

、熙和 | 园豆:1486 (小虾三级) | 2018-05-30 17:25

 其实就是这样写的代码需要写两次ajax ,怎么改才能只需要写一次ajax

支持(0) 反对(0) 疯撩汝心 | 园豆:217 (菜鸟二级) | 2018-05-30 17:42

@疯撩汝心: 不好意思还是没明白为何要两次ajax
难道不是校验参数通过后调用一次ajax就完成的?

支持(0) 反对(0) 、熙和 | 园豆:1486 (小虾三级) | 2018-05-30 17:47

@、熙和: 是的。只需要调用一次ajax,但是我这个代码好像需要两次,手机号通过一次,邮箱通过还一次

支持(0) 反对(0) 疯撩汝心 | 园豆:217 (菜鸟二级) | 2018-05-31 08:50

@、熙和: <input type="text" name="mobile" placeholder="请输入手机号/邮箱" class="phone"  />

同时验证手机号和邮箱的格式

支持(0) 反对(0) 疯撩汝心 | 园豆:217 (菜鸟二级) | 2018-06-01 09:04
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);

拿去用不谢!!!

DanBrown | 园豆:1496 (小虾三级) | 2018-05-31 09:19
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册