收集表單字段控件
html:

    <!--下拉列表 var x=document.getElementById("mySelect").value;-->
    <select name="selectOne">
        <option>Apple</option>
        <option>Orange</option>
        <option>Pineapple</option>
        <option>Banana</option>
    </select><br><br>
    <!--輸入框-->
    <input type="text"  name="text1"  placeholder="我叫text" required>
    <input type="tel"  name="tel1"   placeholder="我叫tel" >
    <input type="email"  name="email1"  placeholder="我叫email" required><br><br>
    <!--復(fù)選框-->
    <input type="checkbox" name="checkbox1" value="box2" />box1
    <input type="checkbox" name="checkbox1" value="box3" required/>box2<br><br>
    <!--單選框-->
    <input type="radio" name="colors" value="red" required/>紅色
    <input type="radio" name="colors"  value="blue" required/>藍(lán)色
    <input type="radio" name="colors"  value="green" required/>綠色<br><br>

    <input type="submit"  name="" value="提交"/>

js代碼

function isEmpty(target) {
        if(typeof target==="undefined" || target===null || target===""){
            return true;
        }else  if(typeof target==="string"){
            return target.trim() ==="";
        }else {
            return false;
        }
    }

    function pushFormValue(name,value,isRequired,type) {
        var _data={},
            Mobile = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/,
            Email=/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
        if( !isEmpty(name) && isRequired && isEmpty(value)){
            requiredInfo.push(name);
        }
        if(!isEmpty(name)&&!isEmpty(value)){
            _data.name=name;
            _data.value=$.trim(value);
            _data.formType=type;
            if(type=="tel"){
                if(!Mobile.test(_data.value)){
                    checkInfo.push("手機(jī)號(hào)碼格式不對(duì)");
                }
            }
            if(type=="email"){
                if(!Email.test($.trim(_data.value))){
                    checkInfo.push("郵箱格式不對(duì)");
                }
            }
            formData.push(_data);
        }
    }

    function dealMoreNameToSingle(type) {
        var returnArr=[],
            selector="input[type="+type+"]";
        $(selector).map(function (index,_item) {
            var formName=$(_item).attr('name'),
                isRequired=$(_item).attr('required'),
                _newObj={};
            if(!isEmpty(formName)){
                if(returnArr.length==0){
                    _newObj={name:formName,isRequired:isRequired};
                    returnArr.push(_newObj);
                }else{
                    var isExist=false;
                    for(var i=0;i<returnArr.length;i++){
                        if(returnArr[i].name==formName){
                            if(!returnArr[i].isRequired && isRequired){
                                returnArr[i].isRequired=isRequired;
                            }
                            isExist=true;
                            break;
                        }
                    }

                    if(!isExist){
                        _newObj={name:formName,isRequired:isRequired};
                        returnArr.push(_newObj);
                    }
                }
            }

        });
        returnArr.map(function (item,index) {
            var formName=item.name,
                formNameValue="",
                isRequired=item.isRequired,
                selector="";

            if(type=='checkbox'){
                var leastOne=false;
                selector="input[name="+formName+"]";
                $(selector).map(function (index,_item) {
                    if($(_item).prop('checked')){
                        leastOne=true;
                        formNameValue=$(_item).val();
                        pushFormValue(formName,formNameValue,isRequired,type);
                    }
                });

                if(!leastOne){
                    pushFormValue(formName,formNameValue,isRequired,type);
                }
            }else{
                selector="input[name="+formName+"]:checked";
                formNameValue=$(selector).val();
                pushFormValue(formName,formNameValue,isRequired,type);
            }

        });
    }

    function dealSingleName(type) {
        var selector='';
        if(type=="select"){
            selector='select';
        }else{
            selector="input[type="+type+"]";
        }

        $(selector).map(function (index,_item) {
            var formName=$(_item).attr('name'),
                    formNameValue=$(_item).val(),
                    isRequired=$(_item).attr('required');
            pushFormValue(formName,formNameValue,isRequired,type);
        });
    }

    var formData=[],
        requiredInfo=[],
        checkInfo=[];

    function bindDom() {
        $("input[type='submit']").click(function (e) {
            e.preventDefault();

            formData=[];
            requiredInfo=[];
            checkInfo=[];

            dealSingleName('select');
            dealSingleName('text');
            dealSingleName('tel');
            dealSingleName('email');

            dealMoreNameToSingle("checkbox");
            dealMoreNameToSingle("radio");

            console.log(JSON.stringify(formData));
            if(checkInfo.length>0){
                alert(checkInfo.toString());
            }else if(requiredInfo.length>0){
                alert("你還有"+ requiredInfo.length +"個(gè)("+requiredInfo.toString()+")必填的輸入框沒(méi)有填寫(xiě)");
            }else{
//                submitData(formData);
            }
        });
    }

    $(function () {
        bindDom();
    })

效果：
1：對(duì)控件的required（必填項(xiàng)）進(jìn)行驗(yàn)證
2：對(duì)電話，郵箱進(jìn)行驗(yàn)證
3：關(guān)鍵點(diǎn)是利用<input type='xxxx' name="xxx" required/> 中type屬性來(lái)進(jìn)行區(qū)分驗(yàn)證赖捌；