最近频繁的使用表单验证，于是自己写了一段表单验证的JS，愿跟大家分享。本人初学JS，写的不好，还请指教！当然，比起JQuery的validate差的实在太远..


     var a = [];
var index = 0;

function checkValue(arr,msg){
for(var i in a)a[i].parentNode.removeChild(a[i]);//移除错误信息元素
var flag = true;
for(var i=0;i<arr.length;i++){
var obj = document.getElementById(arr[i].id);//得到当前元素
var type = obj.type;//元素的类型
var parentObj = document.getElementById(arr[i].id).parentNode;//当前元素的父级元素
var msg = '';
if(type=='text' || type=='select-one'){ //类型为文本框或者下拉菜单
if(obj.value=='' && arr[i].required !=undefined && arr[i].required==true){//验证非空
var tips = document.createElement('font');
tips.color='red';
tips.size='-1';
if(arr[i].reMsg!=undefined)msg=arr[i].reMsg;
else msg='此项不能为空';
tips.innerHTML = msg;
a[index]=parentObj.appendChild(tips);//添加错误信息在当前元素的后边
index++;
flag = false;
}
else{
if(type=='text'){//验证最小长度、最大长度
if(arr[i].reg==undefined && arr[i].reg!=''){
var isMin = arr[i].minL!=undefined && typeof(arr[i].minL)=='number';
var isMax = arr[i].maxL!=undefined && typeof(arr[i].maxL)=='number'
if(isMin && isMax){
if(obj.value.length < arr[i].minL || obj.value.length > arr[i].maxL){
var tips = document.createElement('font');
     tips.color='red';
     tips.size='-1';
if(arr[i].minMsg!=undefined){
     tips.innerHTML = arr[i].minMsg.split('*')[0]
     +arr[i].minL+arr[i].minMsg.split('*')[1]
     +',且不能大于'+arr[i].maxL+'个字符';
}
else tips.innerHTML = '此项不能小于'
     +arr[i].minL
     +'个字符,且不能大于'+arr[i].maxL+'个字符';
a[index]=parentObj.appendChild(tips);
index++;
flag = false;
}
}
else if(isMin){
if(obj.value.length < arr[i].minL){
var tips = document.createElement('font');
     tips.color='red';
     tips.size='-1';
     if(arr[i].minMsg!=undefined){
     tips.innerHTML = arr[i].minMsg.split('*')[0]
     +arr[i].minL+arr[i].minMsg.split('*')[1];
     }
     else tips.innerHTML = '此项不能小于'+arr[i].minL+'个字符';
a[index]=parentObj.appendChild(tips);
index++;
flag = false;
}
}
else if(isMax){
if(obj.value.length > arr[i].maxL){
var tips = document.createElement('font');
     tips.color='red';
     tips.size='-1';
     if(arr[i].maxMsg!=undefined){
     tips.innerHTML = arr[i].maxMsg.split('*')[0]
     +arr[i].maxL+arr[i].maxMsg.split('*')[1];
     }
     else tips.innerHTML = '此项不能大于'+arr[i].maxL+'个字符';
a[index]=parentObj.appendChild(tips);
index++;
flag = false;
}
}
}
else{//匹配正则表达式
// var reg = new RegExp(arr[i].reg);
flag = arr[i].reg.test(obj.value);
// flag = reg.test(obj.value);
if(!flag){
var tips = document.createElement('font');
     tips.color='red';
     tips.size='-1';
if(arr[i].regMsg!=undefined)tips.innerHTML = arr[i].regMsg;
else tips.innerHTML = '此项输入不合法';
a[index]=parentObj.appendChild(tips);
index++;
}
}
}
}
}
else if(type=='radio' || type=='checkbox'){//验证单选、多选是否选中
var r_arr = document.getElementsByName(obj.name);
var num = 0;
for(var k=0;k< r_arr.length;k++){
if(r_arr[k].checked==true)num++;
}
if(num==0){
var tips = document.createElement('font');
     tips.color='red';
     tips.size='-1';
     tips.innerHTML = arr[i].msg;
a[index]=parentObj.appendChild(tips);
index++;
flag = false;
}
}
}
return flag;
}  <!-- Created by TopStyle Trial - www.topstyle4.com -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script src="validate.js"></script>
<script>
function checkForm(form){
var arr = [
{id:'text',minL:6,minMsg:'账号不能小于*个字符',maxL:10,maxMsg:'账号不能大于*个字符',required:true,reMsg:'请输入帐号',reg:/[0-9_]+$/,regMsg:'帐号只能为数字'},
{id:'sel',required:true,reMsg:'请选择下拉'},
{id:'radio',msg:'请选择性别'},
{id:'checkbox1',msg:'请至少选中一个'}]
return checkValue(arr);
}
</script>
</head><body>
<form action="" id="form" onsubmit="return checkForm(form);">
<table align="center"  width="50%" border="1">
<tr>
<td align="right">name:</td>
<td><input type="text" id='text' /></td>
</tr>
<tr>
<td align="right">select:</td>
<td><select id="sel"><option value="">请选择</option><option value="1">hello</option></select></td>
</tr>
<tr>
<td align="right">radio:</td>
<td>
<input type="radio" id="radio" name="rad" value="man"/>男
<input type="radio" name="rad" value="wuman" />女
</td>
</tr>
<tr>
<td align="right">checkbox</td>
<td>
<input type="checkbox" id="checkbox1" name="checkbox" value="1"/>1
<input type="checkbox" id="checkbox2" name="checkbox" value="2"/>2
</td>
</tr>
<tr>
<td align="center" colspan="2"><input type="submit" value="submit" /></td>
</tr>
</table>
</form>
</body>
</html>

解决方案 »

  1.   

    说几个问题：
    1.楼主做判断说有验证规则的情况下处理验证规则，没有的情况下验证长度，但是如果有验证规则且验证通过，但长度 超出时这个信息是正确的吗？比如name字段我输入10个以上的字符时，是不会报错的
    2.然后就是函数规划的问题，楼主设计时的思路是我发现一个错误信息立马让其显示，其实可以吧验证错误信息和显示错误信息分开来，这样就不会重复出现var tips = document.createElement('font');
     tips.color='red';
     tips.size='-1';
     if(arr[i].regMsg!=undefined)tips.innerHTML = arr[i].regMsg;
     else tips.innerHTML = '此项输入不合法';
     a[index]=parentObj.appendChild(tips);3.可以尝试加bulr事件，在文本域失去焦点的同时也对该文本域做验证纯属个人看法，楼主可参考