JS-validation的施用 _JavaScript

JS--validation的使用

下载JS-validation放到程序中

?在程序中引入validation-framework.js文件，修改validation-framework.js中的var ValidationRoot = "/guestbook/js/";然后在修改validation-config.xml文件，指定那些是要验证的，验证的条件是什么

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE validation-config SYSTEM "validation-config.dtd">
<validation-config lang="auto">
	<form id="form1" show-error="alert" show-type="all">
		<field name="name" display-name="姓名" onfail="">
			<depend name="required" />
			<depend name="minLength" param0="2" />
			<depend name="maxLength" param0="20" />
		</field>
		<field name="title" display-name="主题">
			<depend name="required" />
		</field>
		<field name="id" display-name="ID">
			<depend name="required" />
		</field>
		<field name="email" display-name="Email">
			<depend name="required" />
			<depend name="email" />
		</field>	
		<field name="content" display-name="内容">
			<depend name="required" />
		</field>
	</form>

</validation-config>

?下面就是JSP代码（代码中使用还使用了FCKeditor）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		
		<script src="/guestbook/js/validation-framework.js"></script>
	</head>

	<body>
		<script src="/guestbook/fckeditor/fckeditor.js"></script>

		<div align="center">
			添加留言的页面
		</div>
		<form id="form1" name="form1" method="post"
			action="/guestbook/servlet/addMessage"
			onsubmit="retrun doValidate(this)">
			<table width="497" border="0">
				<tr>
					<td width="130">
						姓名：
					</td>
					<td width="350">
						<label>
							<input name="name" type="text" id="name" size="40" maxlength="20" />
						</label>
					</td>
				</tr>
				<tr>
					<td>
						Email：
					</td>
					<td>
						<label>
							<input name="email" type="text" id="email" size="40"
								maxlength="20" />
						</label>
					</td>
				</tr>
				<tr>
					<td>
						电话：
					</td>
					<td>
						<label>
							<input name="phone" type="text" id="phone" size="40"
								maxlength="20" />
						</label>
					</td>
				</tr>
				<tr>
					<td>
						ID：
					</td>
					<td>
						<label>
							<input name="id" type="text" id="id" size="40" maxlength="20" />
						</label>
					</td>
				</tr>
				<tr>
					<td>
						主题：
					</td>
					<td>
						<label>
							<input name="title" type="text" id="title" size="40"
								maxlength="20" />
						</label>
					</td>
				</tr>
				<tr>
					<td>
						内容：
					</td>
					<td>
						<label>
							<script>
  		var editor = new FCKeditor('content'); 
  		editor.BasePath='/fckeditordemo/fckeditor/';
  		editor.Height=200;
  		editor.ToolbarSet='Basic';
  		editor.Create();
  		</script>
						</label>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							<input type="submit" name="submit" id="submit" value="提交" />
						</label>
					</td>
					<td>
						<label>
							<input type="reset" name="reset" id="reset" value="重置" />
						</label>
					</td>
				</tr>
				<tr>
					<td>
						&nbsp;
					</td>
					<td>
						&nbsp;
					</td>
				</tr>
				<tr>
					<td>
						&nbsp;
					</td>
					<td>
						&nbsp;
					</td>
				</tr>
				<tr>
					<td>
						&nbsp;
					</td>
					<td>
						&nbsp;
					</td>
				</tr>
			</table>
		</form>
		<p>
			&nbsp;
		</p>
	</body>
</html>