JSValidation框架简单使用
JSValidation是一个表单验证的框架,可以通过配置xml文件的形式,来完成表单
的验证。下面是个简单的例子。
1,下载JSValidation
http://vdisk.weibo.com/s/mwHY9
2,建立web项目,把validation-framework.js,validation-config.xml,
validation-config.dtd,这3个文件放入你的项目,我放在js目录下
3,建立含有表单的html页面
在网页的前面加上对JSValidation的引用
<script language=”javascript” src=”js/validation-framework.js”></script>
然后是表单的onsubmit事件
onsubmit=”return doValidate(this)”
doValidate()中传this或者表单的id的字符串都可以
表单一定要有id,并与后面的xml文件中的id相同
完整的html代码
<%@ page language=”java” pageEncoding=”utf-8″%>
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Testing for JSValidation</title>
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
<meta http-equiv=”keywords”
content=”keyword1,keyword2,keyword3″>
<meta http-equiv=”description” content=”This is my
page”>
<!–
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
–>
<script language=”javascript” src=”js/validation-
framework.js”></script>
</head>
<body>
username:<%=request.getParameter(“username”)%><br>
password:<%=request.getParameter(“password”)%><br>
<form id=”form1″ action=”index.jsp” name=”form1″
method=”post”
onsubmit=”return doValidate(this)”>
username:
<input name=”username” size=”30″ maxlength=”30″
type=”text” />
<br>
password:
<input name=”password” size=”30″ maxlength=”30″
type=”password” />
<br>
<input name=”submit” value=”提交”
type=”submit”>
</form>
</body>
</html>
<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>Testing for JSValidation</title>
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
<meta http-equiv=”keywords”
content=”keyword1,keyword2,keyword3″>
<meta http-equiv=”description” content=”This is my
page”>
<!–
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
–>
<script language=”javascript” src=”js/validation-
framework.js”></script>
</head>
<body>
username:<%=request.getParameter(“username”)%><br>
password:<%=request.getParameter(“password”)%><br>
<form id=”form1″ action=”index.jsp” name=”form1″
method=”post”
onsubmit=”return doValidate(this)”>
username:
<input name=”username” size=”30″ maxlength=”30″
type=”text” />
<br>
password:
<input name=”password” size=”30″ maxlength=”30″
type=”password” />
<br>
<input name=”submit” value=”提交”
type=”submit”>
</form>
</body>
</html>
4,修改validation-config.xml
将form的id和要验证域的name设置成一致的,每个验证域可以根据自己的需求改变验证方法
下面是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=”username” display-name=”用户名” onfail=”">
<depend name=”required” />
<depend name=”commonChar” />
</field>
<field name=”password” display-name=”密码”>
<depend name=”required” />
<depend name=”commonChar” />
</field>
</form>
</validation-config>
<!DOCTYPE validation-config SYSTEM ”validation-config.dtd”>
<validation-config lang=”auto”>
<form id=”form1″ show-error=”alert” show-type=”all”>
<field name=”username” display-name=”用户名” onfail=”">
<depend name=”required” />
<depend name=”commonChar” />
</field>
<field name=”password” display-name=”密码”>
<depend name=”required” />
<depend name=”commonChar” />
</field>
</form>
</validation-config>
5,最后是修改validation-framework.js
将var ValidationRoot = “”; 改为你xml文件所在的路径
例如,我的web应用的是webproject15
那么就改成 var ValidationRoot = “/webproject15/js/”;
本文固定链接: http://www.test-life.org/?p=300 | 测试之路-My Test Space