<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>demo.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GBK">
<link type="text/css" rel="stylesheet" href="./validate.css"/>
<script src="./util.js" language="javascript"></script>
<script src="./BaseValidator.js" language="javascript"></script>
<script src="./Field.js" language="javascript"></script>
<script src="./BaseValidator.js" language="javascript"></script>
<script src="./RegexValidator.js" language="javascript"></script>
<script src="./RequiredValidator.js" language="javascript"></script>
<script src="./EmailValidator.js" language="javascript"></script>
<script src="./NumValidator.js" language="javascript"></script>
<script src="./IntValidator.js" language="javascript"></script>
<script src="./NumRangeValidator.js" language="javascript"></script>
<script src="./PlusNumValidator.js" language="javascript"></script>
<script src="./ValidatorFactory.js" language="javascript"></script>
</head>
<body>
<form name="f1" id="f1" action="" method="post">
<table border="1" bordercolor='dodgerblue' align="center">
<tr>
<td>
<input type="button" value="用text进行提示" onclick="alertMode('text')"/>
<input type="button" value="用alert进行提示" onclick="alertMode('alert')"/>
</td>
<td>
<input type="button" value="显示所有错误输入" onclick="setDisplayAll(true)"/>
<input type="button" value="只显示一个错误输入" onclick="setDisplayAll(false)"/>
</td>
</tr>
</table>
<table border="1" bordercolor='dodgerblue' align="center">
<tr>
<td>姓名:</td>
<td>
<input type="text" name="login" id="login"/>
<input type="button" value="取消必须验证" onclick="cancelV('姓名', 'login')"/>
<input type="button" value="增加必须验证" onclick="addV('姓名', 'login')"/>
</td>
</tr>
<!--
<tr>
<td>密码:</td>
<td>
<input type="password" name="password" id="password"/>
<input type="button" value="取消必须验证" onclick="cancelV('密码', 'password')"/>
<input type="button" value="增加必须验证" onclick="addV('密码', 'password')"/>
</td>
</tr>
-->
<tr>
<td>数字范围(45-1000)(支持科学计数法):</td>
<td>
<input type="text" name="numrange" id="numrange"/>
<input type="button" value="取消必须验证" onclick="cancelV('数字范围', 'numrange')"/>
<input type="button" value="增加必须验证" onclick="addV('数字范围', 'numrange')"/>
</td>
</tr>
<tr>
<td>数字(支持科学计数法):</td>
<td>
<input type="text" name="num" id="num" />
<input type="button" value="取消必须验证" onclick="cancelV('数字', 'num')"/>
<input type="button" value="增加必须验证" onclick="addV('数字', 'num')"/>
</td>
</tr>
<tr>
<td>整数(支持科学计数法):</td>
<td>
<input type="text" name="int" id="int"/>
<input type="button" value="取消必须验证" onclick="cancelV('整数', 'int')"/>
<input type="button" value="增加必须验证" onclick="addV('整数', 'int')"/>
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="text" name="email" id="email"/>
<input type="button" value="取消必须验证" onclick="cancelV('邮箱', 'email')"/>
<input type="button" value="增加必须验证" onclick="addV('邮箱', 'email')"/>
</td>
</tr>
<tr>
<td>name与邮箱相同:</td>
<td>
<input type="text" name="email" id="email"/>
<input type="button" value="取消必须验证" onclick="cancelV('邮箱', 'email')"/>
<input type="button" value="增加必须验证" onclick="addV('邮箱', 'email')"/>
</td>
</tr>
<tr>
<td>name与邮箱相同:</td>
<td>
<input type="text" name="email" id="email"/>
<input type="button" value="取消必须验证" onclick="cancelV('邮箱', 'email')"/>
<input type="button" value="增加必须验证" onclick="addV('邮箱', 'email')"/>
</td>
</tr>
<tr>
<td>邮箱和数字同时验证:</td>
<td>
<input type="text" name="num_email" id="num_email"/>
<input type="button" value="取消必须验证" onclick="cancelV('邮箱和数字同时验证', 'num_email')"/>
<input type="button" value="增加必须验证" onclick="addV('邮箱和数字同时验证', 'num_email')"/>
</td>
</tr>
<tr>
<td>正数和0:</td>
<td>
<input type="text" name="plusNum" id="plusNum"/>
<input type="button" value="取消必须验证" onclick="cancelV('正数和0', 'plusNum')"/>
<input type="button" value="增加必须验证" onclick="addV('正数和0', 'plusNum')"/>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="验证" onclick='_check()'/></td>
</tr>
</table>
<table border="1" bordercolor='dodgerblue' align="center">
<tr>
<td align="center" style="color:red">使用方法</td>
</tr>
<tr>
<td>
<pre>
/*1,构造字段对象*/
var nameField = new Field("姓名", "login");
var numrangeField = new Field("数字范围", "numrange");
var numField = new Field("数字", "num");
var intField = new Field("整数", "int");
/*2,有些验证器,需要根据业务要求进行相关设置,此步不是必须的*/
numRangeValidator.setMax(1000);//也可为numRangeValidators[i].setMax(1000);//i<10//i的最大值可通过validatorMaxCount进行设置
numRangeValidator.setMin(45);
/*3,将字段和验证器相关联*/
//第一种写法(调用字段对象的add方法)
nameField.add(requiredValidator);
numrangeField.add(numRangeValidator);
numField.add(numValidator);
intField.add(intValidator);
//第二种写法(调用验证器的add方法)
//requiredValidator.add(nameField,numField,intField);//参数可以为任意个字段对象(Field对象)
//numRangeValidator.add(numrangeField);
//numValidator.add(numField);
//intValidator.add(intField);
说明:可以通过validator.logout(intField);方法来取消关联,此功能在动态验证页面中十分有用.
/*4,提交表单时,调用validatorFactory的验证方法即可*/
if(!validatorFactory.validate())
{
return false;//验证没通过
}
</pre>
</td>
</tr>
</table>
</form>
<script language="javascript">
function _check()
{
/***
提交表单时,开发人员只需要写下面这些代码
**/
if(!validatorFactory.validate())
{
//alert("验证没通过!");//测试框用的
return false;
}
//alert("验证通过!");//测试框用的
}
function setDisplayAll(v)
{
displayAll_343434343 = v;
}
function cancelV(label, name)//取消必须输入的验证(当然实际情况中也可以取消其它的验证,此处仅为demo)
{
var field = new Field(label, name);
field.logout(requiredValidator);
}
function addV(label, name)//增加必须输入的验证(当然实际情况中也可以增加其它的验证,此处仅为demo)
{
var field = new Field(label, name);
field.a
易用又灵活的js验证框架
需积分: 11 89 浏览量
2007-12-25
13:04:09
上传
评论 1
收藏 15KB RAR 举报
validate.rar （15个子文件） 
Field.js 601B
demo.html 10KB validate.css 429B ValidatorFactory.js 1KB util.js 1KB validate.jsp 3KB NumRangeValidator.js 768B IntValidator.js 789B RequiredValidator.js 2KB NumValidator.js 1KB PlusNumValidator.js 624B RegexValidator.js 474B EmailValidator.js 2KB
验证框架的使用1.doc 26KB BaseValidator.js 6KB资源评论
