1.html源码
<!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=gb2312">
<meta http-equiv="Content-Language" content="zh-cn">
<title>JavaScript Validation Framework</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language="JavaScript" src="validation-framework.js"></script>
<SCRIPT LANGUAGE="JavaScript" src="site.js"></SCRIPT>
</head>
<body>
<br />
<table cellpadding="10" width="760" cellspacing="0" align="center" class="ContentTable">
<tr>
<td class="Nav" valign="top">
<br />
</td>
<td valign="top">
<script language="JavaScript" src="validation-framework.js"></script>
<div id="error" style="color:red;font-weight:bold"></div>
<form id="form2" name="form2" method="post" action="/webproject2/servlet/survey" onsubmit="return doValidate(this)">
<table width="408" border="0">
<tr>
<th width="135" align="left" scope="col">姓名:</th>
<th width="257" align="left" scope="col"><label>
<input name="name" type="text" id="name" size="20" />
</label></th>
</tr>
<tr>
<th align="left" scope="row">E_mail地址:</th>
<td align="left"><input name="email" type="text" id="email" size="40" /></td>
</tr>
<tr>
<th height="26" align="left" scope="row">年龄: </th>
<td align="left"><label>
<input type="radio" name="age" id="radio" value="18" />
小于18
<input name="age" type="radio" id="radio2" value="18-40" checked="checked" />
18-40
<input type="radio" name="age" id="radio3" value="40" />
40以上
</label></td>
</tr>
<tr>
<th align="left" scope="row">编程时间:</th>
<td align="left"><label>
<select name="code" id="code">
<option value="never">不编程</option>
<option value="6" selected="selected">小于6个月</option>
<option value="6-12">6个月到12个月</option>
<option value="12-24">12-24个月</option>
<option value="24">大于24个月</option>
</select>
</label></td>
</tr>
<tr>
<th align="left" scope="row">熟悉操作系统:</th>
<td align="left"><label>
<select name="os" size="4" multiple="multiple" id="os">
<option value="WinXP" selected="selected">WinXP</option>
<option value="Win2000/2003">Win2000/2003</option>
<option value="Mac OS">Mac OS</option>
<option value="Linux">Linux</option>
</select>
</label></td>
</tr>
<tr>
<th height="23" align="left" scope="row">编程语言:</th>
<td align="left"><label>
<input name="language" type="checkbox" id="language" value="Java" />
Java
<input name="language" type="checkbox" id="language" value="C" />
C
<input name="language" type="checkbox" id="language" value="C++" />
C++
<input name="language" type="checkbox" id="language" value="C#" />
C#
<input name="language" type="checkbox" id="language" value="VB" />
VB</label></td>
</tr>
<tr>
<th align="left" scope="row">建议:</th>
<td align="left"><label>
<textarea name="comment" cols="40" rows="5" id="comment"></textarea>
</label></td>
</tr>
<tr>
<th align="left" scope="row"><label>
<input type="submit" name="submit" id="submit" value="提交" />
</label></th>
<td align="left"><label>
<input type="reset" name="reset" id="reset" value="重置" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
2.修改validation-config.xml中的配置文件
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE validation-config SYSTEM "validation-config.dtd">
<validation-config lang="auto">
<form id="form2" show-error="error" show-type="all">
<field name="name" display-name="姓名" onfail="">
<depend name="required" />
<depend name="commonChar" />
<depend name="minLength" param0="3"/>
<depend name="maxLength" param0="20"/>
</field>
<field name="email" display-name="email邮箱">
<depend name="required" />
<depend name="email" />
</field>
<field name="age" display-name="年纪">
<depend name="required" />
</field>
<field name="code" display-name="编程时间">
<depend name="required" />
</field>
<field name="os" display-name="使用的操作系统">
<depend name="required" />
</field>
<field name="language" display-name="使用的编程语言">
<depend name="required" />
</field>
<field name="comment" display-name="建议">
<depend name="required" />
</field>
</form>
</validation-config>
分享到：
相关推荐
在这个例子中，`username`字段必须填写，且长度至少为2个字符；`email`字段也必须填写，且必须符合电子邮件格式。如果验证失败，`messages`对象会提供相应的错误提示。 jQuery Validate还提供了自定义验证方法的...
总结起来，这个压缩包提供的示例展示了如何在Vue应用中使用`validate.min.js`进行表单验证，使用`FormData`进行文件上传，以及通过`FileReader`获取文件的缩略图。这三个技术结合，可以创建一个完整的用户输入验证和...
`jQuery Validate`是一个非常流行的JavaScript库，用于在前端进行表单验证。这个库极大地简化了对用户...通过查看这个例子，你可以更深入地了解如何在实际项目中使用`jQuery Validate`来增强用户体验并确保数据质量。
在这个例子中，`#myForm` 是表单的ID，`username` 和 `email` 是表单字段名，对应的规则和自定义的中文错误消息已经设置好。当用户提交表单时，jQuery Validate会自动进行验证，并显示相应的错误信息。 总的来说，...
压缩包内的"页面校验非常好的例子"文件，很可能是包含了一个或多个示例，展示如何在实际项目中应用`validate.js`进行表单验证。这些示例通常会包括HTML结构、JavaScript代码以及可能的CSS样式，帮助开发者快速理解和...
在这个例子中，`submitHandler`是一个回调函数，当所有验证都通过后会被调用。你可以在这里添加自己的逻辑，比如发送AJAX请求到服务器进行数据验证和存储。`errorPlacement`则允许你自定义错误消息的显示方式，比如...
在这个例子中，我们定义了两个字段`username`和`password`，分别设置了`required`（必填）和`minlength`（最小长度）验证规则，并自定义了相应的错误提示信息。 三、高级用法 1. 自定义验证规则 除了内置的验证...
在这个例子中，`class="required"` 规定了姓名字段必须填写，而 `minlength="2"` 规定了姓名至少需要两个字符。 除了内置规则，你还可以自定义验证规则，通过 `$.validator.addMethod` 方法实现： ```javascript $...
在提供的例子中，它会检查用户输入的密码是否满足这些条件，并通过密码强度指示器向用户反馈其密码的安全级别。 密码强度的显示通常通过一个进度条或者文字提示来实现，这需要额外的JavaScript代码配合。在这个实例...
在这个例子中，`#myForm`是表单的ID，`validate()`函数会启动验证。 `validate.js`提供了多种内置验证规则，如`required`（必填）、`email`（电子邮件）、`number`（数字）等。此外，还可以自定义验证规则，以满足...
要在项目中使用 `jQuery.validate.js`，首先需要引入 jQuery 库，然后引入 validate 插件，如下所示： ```html <script src="../js/jquery.js" type="text/javascript"> <script src="../js/jquery.validate.js" ...
第三个例子介绍了表单验证，这是JS在网页交互中常见的应用场景。`validate()`函数检查表单字段是否为空或符合特定条件。例如，`strUsername`和`strName`的值若为空，则会弹出警告，并通过`event.returnValue = false...
在项目中使用jQuery Validate插件，首先需要下载并引入jQuery库和jQuery Validate插件的JavaScript文件。通常，它们会包含在`validate.js`或`jquery.validate.min.js`这样的文件中。在HTML文件中，通过`<script>`...
需要注意的是，虽然这里的例子是针对JavaScript和Web前端的，但在Java环境中，可能还需要使用像Spring MVC这样的框架来处理后端的验证逻辑和Ajax响应。总的来说，jQuery Validate和jQuery Metadata是提高Web应用用户...
在这个例子中，当用户离开密码输入框时，`checkPasswordStrength`函数会被调用，根据返回的提示信息更新显示的密码强度。 此外，还可以使用JavaScript监听表单提交事件，防止未通过验证的表单数据被发送到服务器。...
在这个小例子中，我们将深入探讨如何使用validate插件来实现表单验证。 首先，为了使用jQuery validate插件，我们需要在HTML文档中引入必要的库。在提供的代码片段中，我们看到有以下三段脚本引用： 1. `...
在这个例子中，`#infos`是表单的ID，`validate()`方法用于启动验证。`debug`参数设置为`false`表示如果验证成功，不会自动提交表单。`onkeyup`设置为`false`意味着在用户每次按键松开时不会立即进行验证。 `rules`...
在这个例子中，`username`字段必须非空且长度至少为5，`email`字段必须是有效的电子邮件格式。 三、自定义验证规则 jQuery Validate插件允许开发者创建自定义验证规则，这通过`.addMethod()`方法实现。例如，我们...
在这个例子中，邮箱字段必须填写且必须是有效的电子邮件格式。 ### 扩展性 Bootstrap Validate 的强大之处在于其可扩展性。除了内置的验证规则（如`required`, `email`, `number`等），你可以根据项目需求创建新的...
在这个例子中，错误信息被放置在输入框右边的单元格中。 默认校验规则包括： 1. required: true 必须填写。 2. remote: "check.php" 使用AJAX调用check.php验证输入值。 3. email: true 必须是有效的电子邮件格式...