jsvalidation验证框架的使用实用.pdf资源-CSDN文库

版权申诉

26 浏览量 2021-11-13 00:52:16 上传评论收藏 36KB PDF 举报

`jsvalidation`是一个JavaScript验证框架，它用于在前端对用户输入的数据进行实时验证，从而提高用户体验和数据质量。本文将详细介绍如何配置和使用`jsvalidation`框架。 **配置环境** 1. **部署文件**：你需要将`jsvalidation-framework.js`、`validation-config.xml`以及`validation-config.dtd`文件复制到你的项目目录下的合适位置，例如`/WebContent/js/`。请注意，`validation-config.dtd`文件对于某些浏览器（如IE和Chrome）是必需的，而Firefox可能能够正常运行不包含此文件的配置。 2. **修改配置文件**：打开`validation-framework.js`，找到`var ValidationRoot = "";`，并将其替换为`validation-config.xml`文件的实际路径，例如`var ValidationRoot = "/ckeditordemo/js/";`。如果文件编码不是UTF-8，建议将其转换为UTF-8以避免乱码问题。 3. **定制验证规则**：在`validation-config.xml`中，你可以设置验证的语言（如`<validation-config lang="zh-cn">`），并根据需求删除或修改表单字段 `<field>` 及其对应的校验条件 `<depend>`。例如： ```xml <form id="form1" show-error="alert"> <field name="username" display-name="用户名"> <depend name="required" /> <depend name="commonChar" /> </field> <field name="password" display-name="密码"> <depend name="required" /> <depend name="commonChar" /> </field> </form> ``` 4. **引入脚本**：在需要验证的HTML页面中，通过`<script>`标签引入`validation-framework.js`，例如： ```html <script language="javascript" src="/ckeditordemo/js/validation-framework.js"></script> ``` 5. **绑定验证事件**：在需要验证的表单`<form>`标签中，添加`onsubmit`事件，调用`doValidate`函数，并传入表单的`id`作为参数，如： ```html <form id="form1" name="form1" action="/ckeditordemo/addContent" method="post" onsubmit="return doValidate('form1')"> ``` **配置详解** - `validation-config`：这是验证配置的根节点，可设置语言属性（lang），如"zh-cn"（简体中文）或"en-us"（英文）。 - `form`：代表一个虚拟表单，通过`id`与实际页面中的表单关联。`show-error`指定错误提示的展示方式，可以是弹窗（alert）或页面元素ID（显示错误消息）。`onfail`为校验失败时执行的自定义JS函数（当前版本未实现）。 - `field`：表示表单字段，通过`name`与页面上的实际表单字段匹配。`display-name`用于显示错误信息的标签。`onfail`与`form`的`onfail`相同，目前未实现。 - `depend`：定义验证条件，`name`是预定义的验证规则名称，如"required"、"commonChar"等。`param0-param4`是可选参数，具体取决于所选验证规则。 **预定义的验证规则** `jsvalidation`框架内预设了多种验证规则，例如： 1. **required**：检查字段是否为空。 2. **length**：验证字段长度，需要提供参数`param0`（最小长度）和`param1`（最大长度）。 3. **minLength**：验证字段最小长度，参数`param0`为最小长度。 4. **maxLength**：验证字段最大长度，参数`param0`为最大长度。 5. **email**：验证电子邮件格式。 6. **integer**：验证整数。 7. **number**：验证数字。 8. **commonChar**：检查字段中是否包含非法字符。 9. **equalTo**：比较两个字段的值是否相等，通常用于确认密码。 **使用示例** 以下是一个简单的使用`jsvalidation`验证用户名和密码的示例： ```html <!DOCTYPE html> <html> <head> <title>jsvalidation验证示例</title> <script src="/ckeditordemo/js/validation-framework.js"></script> <style> .error { color: red; font-weight: bold; } </style> </head> <body> <form id="form1" action="#" method="post" onsubmit="return doValidate('form1')"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required commonChar /> <br/> <label for="password">密码：</label> <input type="password" id="password" name="password" required commonChar /> <br/> <input type="submit" value="提交" /> <div id="error" class="error"></div> </form> </body> </html> ``` 在这个例子中，我们使用了`required`和`commonChar`验证规则，确保用户名和密码字段非空且不包含非法字符。当验证失败时，错误信息会在`<div id="error">`中显示。 `jsvalidation`是一个强大的前端验证工具，它允许开发者通过XML配置文件轻松定义验证规则，实现灵活且易于维护的前端数据验证。正确配置和使用`jsvalidation`，可以有效地防止无效数据提交，提升应用的用户体验。

资源详情

资源评论

1. 配置环境：

（1）首先将 jsvalidation-framework.js 和 validation-config.xml 复制到网站的某一目

录下（事实上我发现如果不复制 validation-config.dtd 文件的话在 IE 和 chrome中是出错

了，但在 Firefox 中可以正确运行），我常用的是 ".../WebContent/js/ " 中。

（2）打开 validation-framework.js ，找到 var ValidationRoot = ""; 将这行代码更改为

var ValidationRoot = "/ckeditordemo/js/";( 就是 validation-config.xml 文件的位置 ) 。

必要时另存为 UTF-8编码格式。

（3）打开 validation-config.xml ，修改语言为 <validation-config lang="zh-cn"> ，根

据需要删除一个表单 <form>（该文件含两个表单，一个为基本验证，另一个为复杂验证）。

根据需要修改表单域 <field> 和校验条件 <depend>。

<form id="form1" show-error="alert" show-type="all"><--! 此处可为弹出式窗口

"alert" 或者为页面显示 "error" ，为 "error" 时需要在页面需显示处添加 <div id="error"

style="color: red font-weight : bold"></div>-->

<field name="username" display-name=" 用户名 " onfail="">//field name="username"

此处必须与需要验证的 TextField 的 id 相同

</field>

</field>

</form>

（4）在需要进行校验的页面中，加入 jsvalidation 的引用：

src="/ckeditordemo/js/validation-framework.js"></script>

（5）在该页面需要验证的表单 Form标记中，加入 onsubmit="return

doValidate(' formId ')" 。其中 formID 是该 Form的 id 。如<form id="form1" name="form1"

action="/ckeditordemo/addContent" method=post onsubmit="return

doValidate(form1)">

（6）完成

validation-config.xml 节点说明：

validation-config: 根节点

属性：lang: 所用的语言，可以是 "auto", "zh-cn" （简体中文）或者 "en-us" （英文）。默

认为 auto ，可选。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论收藏

内容反馈

版权申诉

jsvalidation验证框架的使用实用.pdf

评论0

最新资源

jsvalidation验证框架的使用实用.pdf

评论0

最新资源

相关推荐

jsvalidation验证框架的使用文.pdf

jsvalidation验证框架的使用

jsvalidation验证框架的使用[归类].pdf

jsvalidation验证框架

jsvalidation客户端JavaScript验证框架使用手册.doc

JSValidation验证框架

jsvalidation-validation-framework.rar_jsvalidation

怎样使用JSValidation验证框架

jsvalidation 强大而灵活的表单客户端验证框架

使用客户端验证框架JSValidation

jsvalidation(一个前台表单内容有效性验证框架)

JSP客户端表单验证框架JSValidation

JSValidation

JSValidation框架

客户端验证框架JSValidation（demo+源码+配置和使用说明）

JSValidation-----强大而灵活的表单客户端验证框架

Laravel开发-laravel-jsvalidation

JSValidation手册

JavaScript表单验证类库Validate.js.zip

JSvalidation

JSValidation（demo+源码） html表单验证框架

jsvalidation

jsvalidation使用实例

javascript组件：jsvalidation-1_0b4

2023.10.21 雷蛇+鼠标宏+PUBG+绝地求生 步枪通用

115转存助手ui优化版3.9.1网友魔改-转存提取全修复-user

恩山新版中兴Telnet工具体验版-20230830.rar

基于华为eNSP的校园网设计和仿真模拟.zip

2023.10.21 雷蛇+鼠标宏+PUBG+绝地求生步枪通用