Mootools表单验证插件validatorv4.0.zip资源-CSDN下载

共11个文件

gif：4个

js：3个

html：2个

版权申诉

47 浏览量 2022-11-01 00:54:34 上传评论收藏 43KB ZIP 举报

Mootools是一个轻量级但功能强大的JavaScript库，它提供了许多工具和模块，帮助开发者创建交互式的网页应用。Validator插件是Mootools生态中的一个关键组件，专门用于表单验证，确保用户输入的数据符合预设的规则和格式。在这个"Mootools 表单验证插件 validator v4.0.zip"压缩包中，我们主要关注的是这个版本的Validator插件及其在前端开发中的应用。让我们深入了解一下Validator插件的核心功能。它允许开发者定义一系列验证规则，这些规则可以应用于表单字段，如必填项、邮箱格式、电话号码格式等。通过简单的API调用，你可以为每个表单元素添加验证规则，当用户提交表单时，插件会自动检查所有字段，如果发现不符合规则的输入，它将显示错误消息并阻止表单的提交。在Mootools Validator v4.0中，一些关键特性包括： 1. **自定义验证规则**：你可以创建自己的验证函数，以适应特定的业务需求或数据格式。 2. **实时验证**：验证不仅可以发生在表单提交时，还可以在用户输入时实时进行，提供即时反馈，提高用户体验。 3. **错误提示**：插件支持自定义错误消息，可以在每个验证规则中设置，也可以全局配置。 4. **多语言支持**：Validator插件通常会提供多语言包，便于国际化应用，使得不同地区的用户都能理解错误提示。 5. **可扩展性**：Mootools本身的设计原则就是模块化，Validator插件同样如此，可以通过组合使用其他Mootools模块来增强功能。在实际应用中，我们可以通过以下步骤使用Validator插件： 1. **引入库**：在HTML文件中引入Mootools库和Validator插件的脚本文件。 2. **初始化表单**：在JavaScript代码中，找到表单元素，并调用`validate()`方法来启用验证。 3. **定义规则**：使用`.addRule()`方法为每个需要验证的表单字段添加规则，例如`element.addRule('required', '这是必填项')`。 4. **处理结果**：监听`valid`和`invalid`事件，根据验证结果执行相应操作，如显示/隐藏错误消息，或者控制表单提交。 5. **自定义样式**：为了使错误提示更明显，可以使用CSS来定制验证失败时的样式。通过以上步骤，我们可以构建出一套强大的前端表单验证系统，有效地防止无效或不完整数据的提交，提高网站的数据质量和用户体验。在Mootools v4.0的Validator插件中，这些功能得到了优化和增强，为开发者提供了更便捷、更灵活的验证解决方案。需要注意的是，虽然这个压缩包中只包含了一个文件"132674358861346723"，通常这可能是经过混淆或压缩的JavaScript文件，解压后可能需要进一步分析或合并到项目中才能正常工作。在实际开发中，记得阅读官方文档或示例代码，以更好地理解和使用Validator插件。

资源推荐

资源详情

资源评论

收起资源包目录

Mootools 表单验证插件 validator v4.0.zip （11个子文件）

132674358861346723

likecs.com_132674358863929198

validator

css

validator.css 2KB

img

levels.gif 5KB

tips_icon.gif 796B

icons.gif 2KB

loading.gif 2KB

tools

index.html 4KB

index.html 8KB

mootools.js 50KB

full-validator.js 32KB

rules

validation.js 579B

Validation.xml 474B

<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta content="all" name="robots" /> <title>表单验证类 Validator v4.0 alpha preview</title> <link href="css/validator.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/mootools.js" charset="gb2312"></script> <script type="text/javascript" src="js/full-validator.js" charset="gb2312"></script> <script type="text/javascript"> /*<![CDATA[*/ Validator.registerElement("ZipCodeElement", { process : function(){ return /^[1-9]\d{5}$/.test(this.value); } }); Validator.setup({ form : 'demo', configs : 'xml,attribute,tag', warns : 'summary,follow, color,class, alert,tips', color : {warn :'black', pass:'white'}, summary : { id : 'summary'}, xml : {url : 'rules/validation.xml?id=1'}, events : { 'Password' : { onLevelChange : function(n){ $('passwordInfo').setStyle('background-position', 'left ' + [0, 22, 50, 75, 100][n] + '%'); } }, 'Email' : { onRemote : function(element){ element.params.type = 'gmail'; } } } }).add({"for":"Card", "rule":"IdCard", "empty":"号码不允许为空", "warn":"号码不正确", "tips":"请输入15位或18位的身份证", "pass":"验证正确"}).add({"for":"Name", "rule":"username", "empty":"不允许为空", "warn":"验证错误", "tips":"昵称是由英文与下划线组成的4~20位的字符", "pass":"验证正确", "require" : "false"}).add({"for":"Password", "rule":"password", "level":"2", "empty":"密码不允许为空", "warn":"密码安全度太低", "tips":"请输入6~16位数字、字母及特殊字符的混合字符", "pass":"验证正确"}); /*]]>*/ </script> </head> <body> <div id="summary" class="summary"></div> <form id="demo" method="get" action="" onsubmit="return false"> <fieldset> <legend> 表单验证 Validator v4.0 alpha </legend> <dl> <dt> <label for="Card">身份证：</label> </dt> <dd> <input id="Card" type="text" name="Card" /> </dd> </dl> <dl> <dt> <label for="Name">昵称：</label> </dt> <dd> <input id="Name" name="Name" type="text" value="wfsr" /> </dd> </dl> <dl style="height:58px"> <dt> <label for="Password">密码：</label> </dt> <dd> <input id="Password" name="Password" type="text" value="abcdEfG123" /> <div id="passwordInfo"></div> </dd> </dl> <dl> <dt> <label for="Password1">确认：</label> </dt> <dd> <input id="Password1" name="Password1" type="text" value="abcdEfG123" /><ui:v for="Password1" rule="repeat" to="Password" empty="请确认您的密码" warn="两次输入的密码不一致" tips="请重复输入一次您的密码" pass="验证正确了" /> </dd> </dl> <dl> <dt> <label for="Password2">确认：</label> </dt> <dd> <input id="Password2" name="Password2" type="text" value="abcdEfG123" /><ui:v for="Password2" rule="compare" toElement="Password" as="String" empty="请确认您的密码" warn="两次输入的密码不一致" tips="请重复输入一次您的密码" pass="验证正确了" /> </dd> </dl> <dl> <dt> <label for="Email">信箱：</label> </dt> <dd> <input id="Email" name="Email" type="text" value="abc@msn.com" /><ui:v for="Email" rule="email" empty="信箱不允许为空" warn="格式验证错误" pass="验证正确" action="/demo/test/404.aspx" /> </dd> </dl> <dl> <dt> <label for="IPAddress">IP：</label> </dt> <dd> <input id="IPAddress" name="IPAddress" type="text" value="192.168.128.254" /><ui:v for="IPAddress" rule="ip" empty="请填写您的当前IP地址" warn="您输入的IP不存在或格式不正确" pass="验证正确了" /> </dd> </dl> <dl> <dt> <label for="Birthday">生日：</label> </dt> <dd> <input id="Birthday" name="Birthday" type="text" value="2005-12-01" /><ui:v for="Birthday" rule="date" empty="请填写您的出生年月日" warn="您输入的日期不存在或格式不正确" tips="请输入一次您的出生年月日(格式：1980-01-01)" pass="验证正确了" /> </dd> </dl> <dl> <dt> <label for="Year">年龄：</label> </dt> <dd> <input id="Year" name="Year" type="text" value="21" /><ui:v for="Year" rule="range" min="18" max="21" empty="请填写您的年龄" warn="您的年龄不在18－21的范围内" tips="请输入您的年龄(在18－21之内)" pass="验证正确了" /> </dd> </dl> <dl> <dt> <label for="QQ">QQ：</label> </dt> <dd> <input id="QQ" name="QQ" type="text" value="88888" /><ui:v for="QQ" rule="qq" empty="请填写您的QQ号码" warn="您输入的QQ号码不存在" tips="请输入5位到9位的QQ号码" pass="验证正确了" /> </dd> </dl> <dl> <dt> <label for="Telephone">电话：</label> </dt> <dd> <input id="Telephone" name="Telephone" type="text" value="13777777777" /><ui:v for="Telephone" rule="Custom" as="elements" expression="mobile || phone" empty="请填写您的手机号码" warn="您输入的手机号码不存在或格式不正确" pass="验证正确了" /> </dd> </dl> <dl> <dt> <label for="Photo">相片上传：</label> </dt> <dd> <input id="Photo" name="Photo" type="file" style="height:20px;vertical-align:1px;_vertical-align:0" /><ui:v for="Photo" require="true" empty="不允许为空" rule="filter" tips="请选择jpg、gif或png格式的图片" warn="非法的文件格式" as="file" accept="jpg, gif, png" /> </dd> </dl> <dl> <dt> <label for="UserName">注册用户名：</label> </dt> <dd> <input id="UserName" name="UserName" type="text" value="管理员" /> </dd> </dl> <dl> <dt> <label for="Zip">邮政编码：</label> </dt> <dd> <input id="Zip" name="Zip" value="524433" /> </dd> </dl> <dl> <dt> <label for="Zip1">邮政编码：</label> </dt> <dd> <input id="Zip1" name="Zip1" value="524433" rule="regex" pattern="^[1-9]\d{5}$" empty="请填写您的邮政编码" warn="您输入的邮政编码不存在或格式不正确" pass="验证正确了" /> </dd> </dl> <dl> <dt> <label for="Test">整数小数：</label> </dt> <dd> <input id="Test" name="Test" value="3.14" /><ui:v for="Test" rule="double" empty="请填写一个整数或小数" warn="您输入的不是整数或小数" pass="验证正确了" /> </dd> </dl> <dl> <dt> 您的爱好： </dt> <dd> <label><input type="checkbox" name="Fav" value="1" />足球</label> <label><input type="checkbox" name="Fav" value="2" />篮球</label> <label><input type="checkbox" name="Fav" value="3" />网球</label> <label><input type="checkbox" name="Fav" value="4" />台球</label> <ui:v for="Fav" rule="Group" min="2" pass="选择通过" tips="请选择至少两项" warn="您的选择不足两项" /> </dd> </dl> <dl style="height:75px"> <dt> 您的特长： </dt> <dd> <select size="4" multiple="multiple" name="Good" id="Good"> <option value="1">足球</option> <option value="2">篮球</option> <option value="3">网球</option> <option value="4">台球</option> </select> <ui:v for="Good" rule="Group" min="2" pass="选择通过" tips="请选择至少两项" warn="您的选择不足两项" /> </dd> </dl> <dl style="height:100px"> <dt> 您的IM： </dt> <dd> <label>Q  Q：<input type="text" id="imQQ" name="imQQ" value="" /></label><br /> <label>MSN：<input type="text" id="imMSN" name="imMSN" value="" /></label><br /> <label>U  C：<input type="text" id="imUC" name="imUC" value="" /></label> <ui:v for="imQQ" rule="Group" elements="imQQ, imMSN, imUC" min="2" pass="验证通过" tips="请至少填写一个IM" warn="您没有提供IM信息" /> </dd> </dl> <dl style="height:58px"> <dt> <label for="message">留言:</label> </dt> <dd>

评论收藏

内容反馈

版权申诉