本文介绍了一款用于网页表单验证的JavaScript脚本，它能够检查文本输入字段是否为空，并验证数值字段是否符合预设范围。通过简单的函数调用即可实现对表单的有效验证。
in form_utils.js
// A utility function that returns true if a string contains only
// whitespace characters.
function isblank(s)
...{
for(var i = 0; i < s.length; i++) ...{
var c = s.charAt(i);
if ((c != ' ') && (c != ' ') && (c != ' ')) return false;
}
return true;
}
// This is the function that performs form verification. It will be invoked
// from the onSubmit() event handler. The handler should return whatever
// value this function returns.
function verify(f)
...{
var msg;
var empty_fields = "";
var errors = "";
// Loop through the elements of the form, looking for all
// text and textarea elements that don't have an "optional" property
// defined. Then, check for fields that are empty and make a list of them.
// Also, if any of these elements have a "min" or a "max" property defined,
// then verify that they are numbers and that they are in the right range.
// Put together error messages for fields that are wrong.
for(var i = 0; i < f.length; i++) ...{
var e = f.elements[i];
if (((e.type == "text") || (e.type == "textarea") || (e.type == "password")) && !e.optional) ...{
// first check if the field is empty
if ((e.value == null) || (e.value == "") || isblank(e.value)) ...{
empty_fields += " " + e.name;
continue;
}
// Now check for fields that are supposed to be numeric.
if (e.numeric || (e.min != null) || (e.max != null)) ...{
var v = parseFloat(e.value);
if (isNaN(v) ||
((e.min != null) && (v < e.min)) ||
((e.max != null) && (v > e.max))) ...{
errors += "- The field " + e.name + " must be a number";
if (e.min != null)
errors += " that is greater than " + e.min;
if (e.max != null && e.min != null)
errors += " and less than " + e.max;
else if (e.max != null)
errors += " that is less than " + e.max;
errors += ". ";
}
}
}
}
// Now, if there were any errors, display the messages, and
// return false to prevent the form from being submitted.
// Otherwise return true.
if (!empty_fields && !errors) ...{
return true;
}
msg = "______________________________________________________ "
msg += "The form was not submitted because of the following error(s). ";
msg += "Please correct these error(s) and re-submit. ";
msg += "______________________________________________________ "
if (empty_fields) ...{
msg += "- The following required field(s) are empty:"
+ empty_fields + " ";
if (errors) msg += " ";
}
msg += errors;
alert(msg);
return false;
}
//-->
使用时的调用方法
<script src="./form_utils.js"></script>
<script language=JAVASCRIPT type=text/javascript>
<!--
function verifyForm(f)
...{
// alert("Verifying form...");
if (verify(document.forms[0]) == true) ...{
document.getElementById('key_alpha').value =
document.getElementById('username').value;
document.getElementById('resolvname_value').value = "key.alpha:" +
document.getElementById('dm.key.alpha').value;
return true;
} else ...{
return false;
}
}
//-->
</script>
</p>
<form name=RegisterUser onSubmit="return verifyForm(this);"
action="/prs" method=post>
......
</form>
扫一扫
1006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
