formchack和validate.js实时验证资源-CSDN文库

共12个文件

js：6个

html：2个

css：2个

需积分: 32 138 浏览量 2016-02-25 21:39:27 上传评论收藏 74KB ZIP 举报

在网页表单提交的过程中，确保用户输入的数据符合预设规则是非常重要的，这不仅可以提高数据的准确性，也能增强用户体验。"formchack" 和 "validate.js" 是两种常用的JavaScript验证库，用于实现表单的实时验证。 `formchack` 是一个轻量级的JavaScript表单验证插件，它的主要功能是在用户填写表单时即时检查输入内容的合法性。例如，它可以检查邮箱格式、手机号码格式、密码强度等。`formchack` 通过添加自定义的HTML属性到表单元素中，来定义验证规则。当用户在输入字段中输入内容时，`formchack` 会自动检测这些规则，并根据结果提供相应的反馈，如显示错误信息或改变输入框的样式。 `validate.js` 则是一个更为强大且灵活的验证库，它提供了丰富的验证规则和自定义验证方法。`validate.js` 可以验证单个表单字段，也可以验证整个表单。它允许开发者定义复杂的验证逻辑，比如依赖于其他字段的值进行验证。`validate.js` 的验证规则可以通过数据注解的方式直接写在HTML元素上，或者在JavaScript代码中定义。此外，它还支持异步验证，如检查用户名是否已存在等。两者在实际应用中各有优势。`formchack` 更适合简单快速的验证需求，而 `validate.js` 则适用于需要更复杂验证逻辑和定制化功能的场景。在实际使用中，你需要根据项目需求选择合适的库。例如，如果你的表单验证规则相对简单，且不需过多的定制，`formchack` 就是个不错的选择。相反，如果需要处理复杂的业务逻辑，或者有异步验证的需求，`validate.js` 则更具优势。在开发过程中，你需要在HTML中定义表单结构，然后引入对应的JavaScript库。对于 `formchack`，你可能需要添加特定的属性如 `data-rule-email` 来指定邮箱验证规则。对于 `validate.js`，你可以使用 `data-validate` 或 `data-constraints` 属性来定义验证规则。接着，通过调用库提供的方法来启动验证过程。在压缩包中的 "formchack" 文件可能是该库的源代码或示例代码，你可以通过查看这些文件来学习如何在自己的项目中集成和使用 `formchack`。在阅读和理解源代码的过程中，可以深入了解其实现原理，以便更好地定制和扩展其功能。 `formchack` 和 `validate.js` 提供了强大的实时表单验证能力，帮助开发者创建健壮、用户友好的Web表单。合理运用它们，能够有效提升网站或应用的数据质量和用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

formchack和validate.js实时验证.zip （12个子文件）

formchack

css

validate.css 371B

jquery.validate.js_2

css

index-1.html 2KB

jquery.validate.js 36KB

resgin.js 1KB

jquery-1.8.3-min.js 91KB

jquery.metadata.js 4KB

images

vtip_arrow.png 270B

index.html 5KB

jquery-1.4.2.min.js 70KB

validate.pack.js 2KB

.project 1KB

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery表单验证不通过边框变色的代码 - 97站长网 - www.97zzw.com</title> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/validate.pack.js"></script> <link href="css/validate.css" rel="stylesheet" type="text/css" /> </head> <body> <h1>JQuery表单验证DEMO</h1> <hr /> <form name="validateForm" action="http://www.97zzw.com/" method="post"> <table width="50%" border="1px " class="ad" cellpadding="0" cellspacing="1" bgcolor="pink" id="testTable"> <tr bgcolor="#ffffff"> <td align="left" bgcolor="red" width="150px" style="padding-left: 15px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> 玩家账号 : </td> <td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> <input name="flightno" type="text" id="flightno" reg="^\w{4}\d+$" tip="游戏商名称[4个字母简写]+用户ID[数字] 如:yuuk520" /> </td> </tr> <tr bgcolor="#ffffff"> <td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> 中文姓名 : </td> <td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> <input name="floatNum" type="text" id="floatNum" reg="^[\u4e00-\u9fa5]+$" tip="只允许中文字符" /> </td> </tr> <tr bgcolor="#ffffff"> <td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> 电话号码 : </td> <td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> <input name="str" type="text" id="str" reg="^\d{3}-\d{8}$|^\d{4}-\d{7}$" tip="国内电话号码，格式: 0832-4405222 或 021-87888822" /> </td> </tr> <tr bgcolor="#ffffff"> <td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> 邮箱地址 : </td> <td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> <input name="groupname" type="text" id="groupname" reg="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" tip="邮箱地址，如：yuuk@97zzw.com" /> </td> </tr> <tr bgcolor="#ffffff"> <td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> 网址 : </td> <td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> <input name="time1" type="text" id="time1" reg="^(http|https|ftp)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/?([a-zA-Z0-9\-\._\?\,\'/\\\+&%\$#\=~])*$" tip="URl格式，允许FTP,HTTP,HTTPS" /> </td> </tr> <tr bgcolor="#ffffff"> <td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> 图片上传 : </td> <td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> <input name="imgFile" type="file" id="imgFile" reg=".*gif|png$" tip="允许GIF,PNG图片" /> </td> </tr> <tr bgcolor="#ffffff"> <td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> 来自哪里 : </td> <td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> <select id="from" name="from" reg="[^0]"> <option value="0">－－请选择你来自哪里－－</option> <option value="a">北京</option> <option value="b">上海</option> <option value="c">四川</option> </select> <span name="easyTip"></span> </td> </tr> <tr bgcolor="#ffffff"> <td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> 文本 : </td> <td align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> <textarea name="myeara" reg="^\w+$" tip="不能为空" cols="40" rows="5"></textarea> </td> </tr> <tr bgcolor="#ffffff"> <td colspan="2" align="center" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;"> <input type="submit" name="submit" value=" 提交 " id="submit" /> </td> </tr> </table> </form> </body> </html>

评论收藏

内容反馈