总结骏汇项目的一些js逻辑问题（一）之数据提交

之前就一直想要总结一下项目里面遇到的js问题，但是因为项目一直在跟进，有些内容其实也一直没有考虑全面，现在确实是项目已经结束，所以特来总结一下自己的在项目里面遇到的一些逻辑问题并总结一些简单轻便的js写法。

首先说一下数据提交的问题，所谓的数据提交就是用ajax请求吧需要传的参数带给请求的url，我建议当传的参数比较多的时候，不要一个一个地传，而是直接定一个param,把你所需要的参数放进去。当然请求的方法我一点也不建议用原生的，建议还是封装一下再用。还有一个问题就是当我要传一个数组对象的时候，不要一个一个地去得，而是用下each方法，把html里面的数据取出来之后，在外面定义一个数组对象，然后把取出来的内容存到变量里面去，然后每次循环都把这个变量存到数组对象中去，这样就可以得到一个数组对象了。下面还是用代码来解释一下我上面所说的这个问题。

 

//封装ajax请求的方法
function sendReq(url, param, callback, failCallback) {
    $.ajax({
        type: "post",
        url: url + "?" + (new Date().getTime()),
        data: param,
        contentType: "application/x-www-form-urlencoded",
        dataType: "json",
        success: function (result) {
            callback && callback(result);
        },
        error: function (e) {
            failCallback && failCallback();
        }
    });
}

//ajax请求参数
var requestParam = {
    name: $.trim($("#name").val()),
    age: $.trim($("#age").val()),
    lovesRules:[]
};

$("#loves .subRule").each(function(){
    var info = $(this);
    var item = {};
    item.run = $.trim(info.find("input[name='run']").val());
    item.swim = $.trim(info.find("input[name='swim']").val());
    item.play = $.trim(info.find("input[name='play']").val());
    requestParam.lovesRules.push(item);
});

//ajax请求调用
sendReq("/Account/Add", requestParam, function (result) {}, function() {});

然后说一下数据提交之前的前端验证的问题，一般情况下如果用validate.js那么验证的时候想要得到最后的验证值，直接return validate验证的那个方法

 

的返回值就可以了，但是如果是手写的方法，那么我们就把所有的方法的返回值都并起来就能得到验证的值了。当然有人会问如果又要用到validate.js，又要用到自己手写的方法

怎么办，我想说也许没有这么麻烦，因为比较难的方法在validate.js里面都可以自定义，所以验证内容的多少决定了我们用哪种方法。下面我就分别用validate和手写方法得到验

证结果判断是否数据提交。

 

submitForm();
submitFormNext();

//表单验证
function initFormValidate(){
    return $("#Form").validate({
        onfocusout:function(element){$(element).valid();},
        onkeyup:function(element,event){
            //去除左侧空格
            var value = this.elementValue(element).replace(/^\s+/g, "");
            $(element).val(value);
        },
        rules:{
            name:{required:true}
        },
        messages:{
            name:{required:"请填写您的姓名"}
        }
    });
}

//validate验证   数据是否提交
function submitForm(){
    if(!initFormValidate().form()){
        return false;
    }
    //数据提交
}

//普通方法验证   数据是否提交
function submitFormNext(){
    var verifyVal = verifyName();
    verifyVal = verifyAge() && verifyVal;
    if(!verifyVal){
        return false;
    }
    //数据提交
}

function verifyName(){
    var name = $.trim($("#name").val());
    if(!name){
        $("#name").parents(".sub-input-box").find(".error").show().html("请填写您的姓名");
        return false;
    }else{
        return true;
    }
}

function verifyAge(){
    var age = $.trim($("#age").val());
    if(!age){
        $("#age").parents(".sub-input-box").find(".error").show().html("请填写您的姓名");
        return false;
    }else{
        return true;
    }
}