很好的JavaScript校验框架实例资源-CSDN文库

共10个文件

js：5个

html：2个

css：2个

4星 · 超过85%的资源需积分: 10 96 浏览量 2009-06-23 15:53:35 上传评论收藏 62KB RAR 举报

JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责处理客户端的交互和动态内容。在Web开发中，表单验证是必不可少的一部分，它确保用户输入的数据符合预期的格式和规则，防止无效数据的提交，从而提高用户体验并保护服务器资源。"很好的JavaScript校验框架实例"是一个专门用于实现这一目的的工具。这个框架利用JavaScript的强大功能，提供了一套全面且灵活的验证规则，可以方便地应用到各种类型的表单中。它包含了对常见表单元素的验证，例如： 1. **文本输入**：检查输入的长度、内容是否为空、是否包含特定字符等。 2. **电子邮件**：验证输入的字符串是否符合电子邮件地址的标准格式。 3. **电话号码**：根据不同的国家和地区格式，验证电话号码的有效性。 4. **日期**：确保用户输入的日期符合指定的日期格式，并且在有效范围内。 5. **数字**：检查输入的数字是否在指定的最小值和最大值之间，或者是否是整数、小数等。 6. **URL**：验证输入的字符串是否为有效的网址格式。 7. **身份证号/护照号**：针对不同国家的身份证明文件进行有效性校验。此外，该框架还可能具备以下特性： 1. **自定义验证**：允许开发者定义自己的验证规则，以适应特殊需求。 2. **错误提示**：当验证失败时，能提供明确且友好的错误提示信息。 3. **实时验证**：在用户输入时即时进行验证，提供即时反馈。 4. **模块化**：框架可能采用了模块化设计，使得各个验证规则可以独立使用或组合使用。 5. **兼容性**：考虑到跨浏览器的兼容性，确保在不同的浏览器环境下都能正常工作。 6. **API友好**：提供简洁易用的API，便于开发者集成到现有的项目中。 7. **国际化**：支持多语言，满足不同地区的使用需求。学习和使用这样的JavaScript校验框架，可以帮助开发者快速构建健壮的前端验证机制，提升网站的安全性和用户体验。同时，理解其内部机制也能深化对JavaScript和前端开发的理解。通过阅读源代码和实际操作，开发者可以掌握如何自定义验证规则，如何与后端接口配合，以及如何优化验证流程，提高性能。在实际项目中，这种框架通常与其他前端库如jQuery、Vue.js或React等结合使用，实现更复杂的前端功能。

资源推荐

资源详情

资源评论

收起资源包目录

很好的校验框架.rar （10个子文件）

很好的校验框架

validation2.0.rar 31KB

校验

validation.js 8KB

fabtabulous.js 1KB

valid.html 11KB

validation_cn.js 22KB

effects.js 32KB

helloworld.html 908B

style.css 1KB

prototype.js 54KB

style_min.css 634B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>  <head> <script src="prototype.js" type="text/javascript"></script> <script src="effects.js" type="text/javascript"></script> <script type="text/javascript" src="fabtabulous.js"></script> <script type="text/javascript" src="validation_cn.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"> <div id="mainmenu"> <ul id="tabs"> <li> <a href="#standard">Standard</a> </li> <li> <a href="#using-titles">Using Titles</a> </li> <li> <a href="#no-element-ids">No element IDs</a> </li> <li> <a href="#auto-bind-form-valite-by-classname">auto-bind-form-valite-by-classname</a> </li> </ul> <div> <div class="bar"> </div> <div class="panel" id="standard"> <form id="test" action="#" method="get"> <fieldset> <legend>Form</legend> <div class="form-row"> <div class="field-label"><label for="field1">Name</label>:</div> <div class="field-widget"><input name="field1" id="field1" class="required" title="Enter your name" /></div> </div> <div class="form-row"> <div class="field-label"><label for="field3">Employee Number</label>:</div> <div class="field-label"><input name="field3" id="field3" class="required validate-alphanum" title="Enter your employee number, please use only alphanumeric characters" /></div> </div> <div class="form-row"> <div class="field-label"><label for="field4">Age</label>:</div> <div class="field-label"><input name="field4" id="field4" class="validate-number" title="Optional: Enter your age"/> (optional)</div> </div> <div class="form-row"> <div class="field-label"><label for="field14">MinLength=4 and MaxLength=10</label>:</div> <div class="field-label"><input name="field14" id="field14" class="required min-length-4 max-length-10"/></div> </div> <div class="form-row"> <div class="field-label"><label for="field24">File:png jpg</label>:</div> <div class="field-label"><input name="field24" id="field24" type='file' class="required validate-file-png-jpg" /> </div> </div> <div class="form-row"> <div class="field-label"><label for="field34">Validate Float Range -2.1至3.1</label>:</div> <div class="field-label"><input name="field34" id="field34" type='text' class="required validate-float-range--2.1-3.1" /> </div> </div> <div class="form-row"> <div class="field-label"><label for="field44">Validate Int Range -1至2</label>:</div> <div class="field-label"><input name="field44" id="field44" type='text' class="required validate-int-range--1-2" /> </div> </div> <div class="form-row"> <div class="field-label"><label for="field54">Validate Length Range 3至8</label>:</div> <div class="field-label"><input name="field54" id="field54" type='text' class="required validate-length-range-3-8" /> </div> </div> <div class="form-row"> <div class="field-label"><label for="field64">Max Value 8</label>:</div> <div class="field-label"><input name="field64" id="field64" type='text' class="required max-value-8" /> </div> </div> <div class="form-row"> <div class="field-label"><label for="field74">Min Value 10</label>:</div> <div class="field-label"><input name="field74" id="field74" type='text' class="required min-value-10" /> </div> </div> <div class="form-row"> <div class="field-label"><label for="field84">Equals one item(AA,BB,CC)</label>:</div> <div class="field-label"><input name="field84" id="field84" type='text' class="required validate-equals-AA-BB-CC" /> </div> </div> <div class="form-row"> <div class="field-label"><label for="field94">Use title by class name</label>:</div> <div class="field-label"><input name="field94" id="field94" type='text' class="required useTitle" title='这里是不能为空的喔,by useTitle'/> </div> </div> <div class="form-row"> <div class="field-label"><label for="field6">Sex</label>:</div> <div class="field-label"> <input type="radio" name="field6" id="field6-male" value="Male" />Male<br /> <input type="radio" name="field6" id="field6-female" value="Female" class="validate-one-required" />Female </div> </div> <div class="form-row"> <div class="field-label"><label for="field5">Donation</label>:</div> <div class="field-label"> <div id="advice-validate-currency-dollar-field5" class="custom-advice" style="display:none">That $ amount does not compute!</div> <input name="field5" id="field5" class="validate-currency-dollar" title="Enter a dollar amount for donation" /> (optional) </div> </div> <p><a href="#" onclick="$('email-signup').toggle(); return false">Sign me up for the email newletter!</a></p> <div id="email-signup" class="form-row" style="display:none;"> <div class="field-label"><label for="field22">Email</label>:</div> <div class="field-widget"><input name="field22" id="field22" class="required validate-email" title="Optional: Enter your email address" /></div> </div> </fieldset> <input type="submit" value="Submit" /> <input type="button" value="Reset" onclick="valid.reset(); return false" /> </form> <script type="text/javascript"> function formCallback(result, form) { window.status = "valiation callback for form '" + form.id + "': result = " + result; } var valid = new Validation('test', {immediate : true, onFormValidate : formCallback}); </script> </div> <div class="panel" id="using-titles"> <form id="test2" action="#" method="get"> <fieldset> <legend>Form</legend> <div class="form-row"> <div class="field-label"><label for="field1-t2">Name</label>:</div> <div class="field-widget"><input name="field1-t2" id="field1-t2" class="required" title="Enter your name. This is a required field" /></div> </div> <div class="form-row"> <div class="field-label"><label for="field3-t2">Employee Number</label>:</div> <div class="field-label"><input name="field3-t2" id="field3-t2" class="required validate-alphanum" title="Enter your employee number, please use only alphanumeric characters" /></div> </div> <div class="form-row"> <div class="field-label"><label for="field4-t2">Age</label>:</div> <div class="field-label"><input name="field4-t2" id="field4-t2" class="validate-number" title="Optional: Enter your age, please use only numbers" /> (optional)</div> </div> <div class="form-row"> <div class="field-label"><label for="field5-t2">Donation</label>:</div> <div class="field-label"><input name="field5-t2" id="field5-t2" class="validate-currency-dollar" title="Optional: Enter a dollar amount for donation" /> (optional)</div> </div> </fieldset> <input type="submit" value="Submit" /> <input type="button" value="Reset" onclick="valid2.reset(); return false" /> </form> <script type="text/javascript"> var valid2 = new Validation('test2', {useTitles:true}); </script> </div> <div class="panel" id="no-element-ids"> <form id="test3" action="#" method="get"> <fieldset>

评论收藏

内容反馈