verJs.js表单验证插件.zip资源-CSDN文库

共5个文件

js：2个

css：2个

html：1个

版权申诉

jQuery特效

CSS特效

网页特效

8 浏览量 2023-10-15 23:26:55 上传评论收藏 43KB ZIP 举报

"verJs.js表单验证插件.zip"是一个包含JavaScript和CSS特效的压缩包，主要用于实现网页上的表单验证功能。这个插件基于流行的JavaScript库jQuery，因此需要对jQuery有一定的了解才能更好地利用它。jQuery是一个轻量级、高性能的库，简化了DOM操作、事件处理、动画设计以及Ajax交互，使得开发者能更高效地编写JavaScript代码。表单验证是网页应用中的重要一环，用于确保用户输入的数据符合预设规则，如电子邮件格式、手机号码格式、密码强度等。verJs.js插件通过添加自定义的验证规则和错误提示，能够增强用户体验，使表单提交过程更加顺畅。它可能包含以下特性： 1. **自定义验证规则**：verJs.js允许开发者定义自己的验证函数，针对特定的表单字段添加特定的验证逻辑。 2. **实时验证**：该插件可以在用户输入时立即进行验证，提供即时反馈，避免用户提交无效数据。 3. **错误提示**：当用户输入不符合规则时，插件会显示明确的错误提示，帮助用户理解并修正问题。 4. **美观的界面效果**：描述中提到“非常实用好看的特效代码”，意味着verJs.js在显示错误提示时，可能有视觉上的设计，比如使用颜色、图标或动画来吸引用户的注意力。 5. **可扩展性**：由于描述中提到可以“二次修改”，这意味着verJs.js插件具有良好的可定制性，开发者可以根据项目需求对其进行调整和扩展。 6. **CSS特效**：标签中提到了CSS特效，这可能意味着verJs.js在错误提示或者成功提示上运用了CSS样式，使表单验证反馈更具吸引力。 7. **兼容性**：作为一款成熟的JavaScript插件，verJs.js很可能考虑了跨浏览器的兼容性，能够在主流的浏览器如Chrome、Firefox、Safari、Edge和Internet Explorer中正常工作。为了使用这个插件，你需要将jiaoben6650文件解压，然后在你的HTML文档中引入jQuery库和verJs.js文件，并设置相应的CSS样式。接着，你需要在表单元素上添加特定的类名或属性，以便verJs.js能够识别并应用验证规则。通过JavaScript代码初始化插件并配置所需的验证选项。 "verJs.js表单验证插件.zip"是一个集成了jQuery、CSS特效和高效表单验证逻辑的工具，旨在帮助开发者创建用户友好的、有视觉吸引力的表单验证解决方案。无论你是新手还是经验丰富的开发者，都能从这个插件中受益，提升你的网页开发效率和用户体验。

资源推荐

资源详情

资源评论

收起资源包目录

verJs.js表单验证插件.zip （5个子文件）

jiaoben6650

jquery.min.js 91KB

index.html 4KB

verJs

verJs.min.js 16KB

need

common.css 1KB

vericon.css 6KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" name="viewport"> <title>verJs.js表单验证插件 - 【更多源码：www.96flw.com】</title> <style> fieldset{ border: 0; } dl dt,dl dd{ display: inline-block; vertical-align: top; } input{ height: 30px; line-height: 30px; width: 220px; outline: none; padding: 0 10px; } dl{ margin-bottom: 15px; } button{ width: 120px; height: 35px; border: 0; background: #0a8cd2; color: #fff; } </style> </head> <body> <form action="#" id="form" data-form="ajax"> <fieldset> <div>form表单验证</div> <dl> <dt>密码</dt> <dd> <input type="text" data-required="参数不能为空" id="eq"> </dd> </dl> <dl> <dt>确认密码</dt> <dd> <input type="text" data-equal="#eq" data-required="参数不能为空"> </dd> </dl> <dl> <dt>最小/大值</dt> <dd> <input type="number" data-min="7" data-max="15"> </dd> </dl> <dl> <dt>最小/大长度</dt> <dd> <input type="text" data-minlength="5" data-maxlength="15"> </dd> </dl> <dl> <dt>手机</dt> <dd> <input type="text" data-mobile="true"> </dd> </dl> <dl> <dt>邮箱</dt> <dd> <input type="text" data-email="true"> </dd> </dl> <dl> <dt>身份证</dt> <dd> <input type="text" data-idcard="true"> </dd> </dl> <dl> <dt>气泡+正则</dt> <dd> <input type="text" data-rule="^[A-Za-z]\w{5,11}$" data-rule-message="请输入6~12字符，以字母开头" data-required="请输入6~12字符，以字母开头" data-block="true"> </dd> </dl> <button type="submit">提交</button> </fieldset> </form> <script src="verJs/verJs.min.js"></script> <script src="js/jquery.min.js"></script> <script> function max_width() { var max = 0; $("dt").each(function () { max = Math.max(max,$(this).width()); }); $("dt").width(max); } max_width(); new VerJs({ form:"#form", success:function (d) { alert(1) }, fail:function (d) { alert(2) } }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>更多源码：<a href="http://www.96flw.com/" target="_blank">www.96flw.com</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉