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

版权申诉

32 浏览量 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`，可以有效地防止无效数据提交，提升应用的用户体验。

资源详情

资源评论