我爱爷爷奶奶教案:表单验证方式的通用化
来源:百度文库 编辑:中财网 时间:2024/05/13 08:38:35
在上一篇“Web页面表单域验证方式的改进“中,我们通过把验证法则(正则表达式和是否必填字段)写在表单域中,将验证过程和验证法则成功的分离,从而减少了重复代码,使验证变得简单易行,在实际使用中,我们可以把验证过程放在一个JS文件中,对于全输入验证界面,在页面的表单验证部分只需要调用其中的checkForm函数就能进行有效验证,页面上不再需要书写重复性高的JS验证代码;对于复杂的表单,比如其中含有复选框或是需要两个文本框比较的地方,这种方法也可让你不写通用验证代码而把主要精力放在特殊的验证上。这些能减轻不少工作量,让繁琐的工作变得轻松愉快起来。
下面我们看一看这种用法的实际使用。
首先,我们可以把验证过程放在一个JS文件中,具体代码如下:
formchecker.js
/**//**
* Check form
*/
function checkForm(vform) {
for(var i=0;i {
if(vform.elements[i].type=="text") {
var checkResult=checkTextBox(vform.elements[i]);
var name=vform.elements[i].getAttribute("name");
if(checkResult) {
document.getElementById(name+"Msg").className="feedbackHide";
}
else {
document.getElementById(name+"Msg").className="feedbackShow";
vform.elements[i].focus();
return false;
}
}
}
return true;
}
/**//**
* Check text field in the form
*/
function checkTextBox(vTextBox) {
var validChar=vTextBox.getAttribute("validChar");
var isRequired=vTextBox.getAttribute("isRequired");
var inputValue=vTextBox.value;
if(isRequired!="true" && inputValue.length<1) {
return true;
}
else {
var regexStr="^"+validChar+"$";
var regex=new RegExp(regexStr);
return regex.test(inputValue);
}
}
/**//**
* Remove Extra Char in textbox
*/
function removeExtraChar(vTextBox,event) {
var maxlength=parseInt(vTextBox.getAttribute("maxlength"));
var inputValue=vTextBox.value;
if(inputValue.length>=maxlength) {
event.keyCode=9;
}
}
下面想验证一个用户登录页面,它的页面部分代码如下:
<% @ page contentType="text/html; charset=UTF-8" %>
"我的事务备忘录"用户登录页面
type="text/css" />
<%
String msg = (String) request.getAttribute("Msg");
if (msg != null) {
out.print(msg);
}
%>
请注意其中没有任何页面验证的JS代码,只有在表单验证的地方调用formchecker.js中的函数。
下面我们看一看这种用法的实际使用。
首先,我们可以把验证过程放在一个JS文件中,具体代码如下:
formchecker.js
下面想验证一个用户登录页面,它的页面部分代码如下:
8 用户登录: |
请注意其中没有任何页面验证的JS代码,只有在表单验证的地方调用formchecker.js中的函数。