纯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 }

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