表单验证-优快云博客

本文链接：https://blog.youkuaiyun.com/polarman/article/details/745919

实现客户端表单自动验证。只需在表单域添加验证条件即可轻松实现表单验证。

formvalidator.js
------------------------------------------------------
function checkInput(theForm){
if(!theForm.nodeName)
theForm = document.getElementById(theForm);

if(!theForm || theForm == null)
return false;

for( i=0; i<theForm.elements.length; i++ ){
field = theForm.elements[i];
if(!field.getAttribute("validator:name") || field.getAttribute("validator:name")=="")
   field.setAttribute("validator:name", field.name);
//非空项
if(field.getAttribute("validator:notEmptyField") &&
    (field.getAttribute("validator:notEmptyField") == "true" || field.getAttribute("validator:notEmptyField") == true)){
   if(isEmpty(field.value)){
    alert("/"" + field.getAttribute("validator:name") + "/"不可为空！");
    return false;
   }
}
//整数项
if(field.getAttribute("validator:intField") &&
    (field.getAttribute("validator:intField") == "true" || field.getAttribute("validator:intField") == true)){
   if(!isInteger(field.value)){
    alert("/"" + field.getAttribute("validator:name") + "/"必须为整数！");
    return false;
   }
}
//数字项
if(field.getAttribute("validator:numField") &&
     (field.getAttribute("validator:numField") == "true" || field.getAttribute("validator:numField") == true)){
   if(!isDigit(field.value)){
    alert("/"" + field.getAttribute("validator:name") + "/"必须为数字！");
    return false;
   }
}
//最大长度
if(field.getAttribute("validator:maxLength")){
   maxLength = parseInt(field.getAttribute("validator:maxLength"));
   if(lengthLargerThan(field.value, maxLength)){
    alert("/"" + field.getAttribute("validator:name") + "/"长度不可大于" + maxLength + "！");
    return false;
   }
}
//最小长度
if(field.getAttribute("validator:minLength")){
   minLength = parseInt(field.getAttribute("validator:minLength"));
   if(lengthLesserThan(field.value, minLength)){
    alert("/"" + field.getAttribute("validator:name") + "/"长度不可小于" + minLength + "！");
    return false;
   }
}
//固定长度
if(field.getAttribute("validator:fixedLength")){
   fixedLength = parseInt(field.getAttribute("validator:fixedLength"));
   if(!lengthEquals(field.value, fixedLength)){
    alert("/"" + field.getAttribute("validator:name") + "/"长度必须为" + fixedLength + "！");
    return false;
   }
}
//最小值
if(field.getAttribute("validator:minVal")){
   minVal = parseFloat(field.getAttribute("validator:minVal"));
   if(smallerThan(field.value, minVal)){
    alert("/"" + field.getAttribute("validator:name") + "/"不可小于" + minVal + "！");
    return false;
   }
}
//最大值
if(field.getAttribute("validator:maxVal")){
   maxVal = parseFloat(field.getAttribute("validator:maxVal"));
   if(biggerThan(field.value, maxVal)){
    alert("/"" + field.getAttribute("validator:name") + "/"不可大于于" + maxVal + "！");
    return false;
   }
}
//允许有引号
allowQuote = field.getAttribute("validator:allowQuote");
if(!allowQuote || allowQuote == null || allowQuote == false || allowQuote == "false"){
   if(hasQuote(field.value)){
    alert("/"" + field.getAttribute("validator:name") + "/"不可包含引号！");
    return false;
   }
}
//用户自定义验证函数
if(field.getAttribute("validator:validatefunc")){
   funcName = field.getAttribute("validator:validatefunc");
   validatefunc = eval(funcName);
   if(!validatefunc(field)){
    return false;
   }
}
}

return true;
}

function isEmpty(strVal){
if(!strVal || strVal == "")
return true;
else
return false;
}

function isInteger(strVal){
var numPat1 = /^[0-9]+$/;

var matchArray1 = strVal.match(numPat1);
if(matchArray1 != null)
return true;
else
return false;
}

function isDigit(/*String*/strVal)
{
var numPat1 = /^[0-9]+/.?[0-9]*$/;
var numPat2 = /^0{1}[0-9]+.*$/;

var matchArray1 = strVal.match(numPat1);
var matchArray2 = strVal.match(numPat2);
if(matchArray1 != null && matchArray2 == null)
return true;
else
return false;
}

function lengthLargerThan(strVal, maxLength){
if(!strVal || strVal == null)
return false;
if(strVal.length > maxLength)
return true;
else
return false;
}

function lengthLesserThan(strVal, minLength){
if(!strVal || strVal == null)
return true;
if(strVal.length < minLength)
return true;
else
return false;
}

function lengthEquals(strVal, length){
if(!strVal || strVal == null)
return false;
if(strVal.length == length)
return true;
else
return false;
}

function smallerThan(strVal, minVal){
val = parseFloat(strVal);
if(val < minVal)
return true;
else
return false;
}

function biggerThan(strVal, maxVal){
val = parseFloat(strVal);
if(val > maxVal)
return true;
else
return false;
}

function hasQuote(strVal){
if(!strVal || strVal == null)
return false;

if(strVal.indexOf("/"") >= 0 || strVal.indexOf("'") >= 0)
return true;
else
return false;
}

------------------------------------------------------
validatortest.html
------------------------------------------------------
<html>
<head>
<title>表单验证测试</title>
</head>
<SCRIPT LANGUAGE="javascript" src="formvalidator.js"></script>
<SCRIPT LANGUAGE="javascript">

function doSubmit(){
if(!checkInput("form1")){
return;
}

alert("验证通过");
//form1.submit();
}

function dateValidateFunc(field){
var dateStr = field.value;

var datePat = /^(/d{4})(//|-)(/d{1,2})/2(/d{1,2})(/ *)(/d{1,2})(/:)(/d{1,2})/7(/d{1,2})$/;

var matchArray = dateStr.match(datePat)
if (matchArray == null){
alert("/"" + field.getAttribute("validator:name") + "/"必须为时间格式(YYYY-M-D h:m:s)或(YYYY/M/D h:m:s)！");
return false;
}

return true;
}

</script>
<body>
<form method=post id="form1" action="">

<table>
<tr>
   <td>长度介于6--10的字符串</td>
   <td><input type="text" name="fld1" value="" validator:minLength=6 validator:maxLength=10 validator:notEmptyField=true></td>
<tr>
   <td>非空的字符串</td>
   <td><input type="text" name="fld2" value="" validator:name="非空的字符串" validator:notEmptyField=true></td>
</tr>
<tr>
   <td>长度小于6的整数</td>
   <td><input type="text" name="fld3" value="" validator:name="长度小于6的整数" validator:intField=true validator:maxLength=6 validator:notEmptyField=true></td>
</tr>
<tr>
   <td>数字</td>
   <td><input type="text" name="fld4" value="" validator:name="数字" validator:numField=true></td>
</tr>
<tr>
   <td>无引号的字符串</td>
   <td><input type="text" name="fld5" value="" validator:name="无引号的字符串" validator:allowQuote=false validator:notEmptyField=false></td>
</tr>
<tr>
   <td>日期</td>
   <td><input type="text" name="fld6" value="" validator:name="日期" validator:validatefunc="dateValidateFunc"></td>
</tr>

</table>

<table width=100%>
<tr>
   <td width=20><input type="button" value="提交" οnclick="javascript:doSubmit()"></td>
</tr>
</table>
</form>
<body>
</html>