纯js自定义表单验证(数据较多时)

在需要验证的input上的class加required

    <style type="text/css">
        .required-on{
            border-color: #ff0007 !important;
        }
        .required-radio-chexboox:after{
            content: "O";
            color: #ff0007!important;
            font-size: 18px;
        }
    </style>


 function checkform(){
        var clas = document.getElementsByClassName("required");
        //console.log(clas);
        var flag = true;
       for(var i=0;i<clas.length;i++){
           for(var a=0;a<clas[i].classList.length;a++){
               if(clas[i].classList[a] === "required-on"){
                   clas[i].classList.remove("required-on");
               }
               if(clas[i].classList[a] === "required-radio-chexboox"){
                   clas[i].classList.remove("required-radio-chexboox");
                   flag = false;
               }
           }
           //console.log(clas[i]);
          // console.log(clas[i].type,"type")
           if(clas[i].type === "radio" || clas[i].type === "checkbox"){
               var val = $('input[name='+clas[i].name+']:checked').val();
               if(val === undefined){
                   clas[i].classList.add("required-radio-chexboox");
               }
           }
           if(clas[i].value === ""){
               switch (clas[i].type) {
                   case "text":
                   clas[i].classList.add("required-on");
                   break;
                   case "number":
                   clas[i].classList.add("required-on");
                   break;
               }
               //clas[i].classList.add("required-on");
                //console.log(clas[i].type);
               flag = false;
           }
       }
        if(!flag){
            layer.msg('请将带有红色标记的补充完整!', {icon: 5});
        }
        //var formData = $('inputForm').serializeArray();
       // document.getElementById("inputForm").submit();
        //console.log(formData,flag);
        return flag
    }

效果图(样式可以自定义)