平时用到的表单验证库,功能是异常的强大,但里面实际用到的却不多,为了几个验证就拖一个库,实在不值,不如自己设计个实用的函数解决这验证问题。
验证问题就是解决是还是不是的问题,是了就得提交,此外,用户体验也是个重点,正确,错误的消息怎么提示,所以,这个函数包括:
1.能对指定的多个字段进行验证
2.能够自定单个字段的验证方法
3.当验证失败时,可定义默认的消息提示方式
4.当验证失败时,可选择是否自动聚焦到元素
5.当验证成功时,可返回字段的提交字符串
6.字段元素既可传入ID也可传入name,name比ID要优先考虑
7.验证字段不依赖form
好了,这些功能够了吧,能应该验证N+1种表单了。
等会实现用到的相关函数,相信都很熟悉:
/**
* 这个函数利用了JS动态语言特性,看上去很神秘,实际是很形象的,举个例子就明了.
*/
validate: function() {
var args = CC.$A(arguments),
form = null;
//form如果不为空元素,应置于第一个参数中.
if (!CC.isArray(args[0])) {
form = CC.$(args[0]);
args.remove(0);
}
//如果存在设置项,应置于最后一个参数中.
//cfg.queryString = true|false;
//cfg.callback = function
//cfg.ignoreNull
//nofocus:true|false
var b = CC.isArray(b) ? {}: args.pop(),
d;
var queryStr = b.queryString,
ignoreNull = b.ignoreNull,
cb = b.callback;
var result = queryStr ? '': {};
CC.each(args,
function(i, v) {
//如果在fomr中不存在该name元素,就当id来获得
var obj = v[0].tagName ? v[0] : form ? form[v[0]] : CC.$(v[0]);
//console.debug('checking field:',v, 'current value:'+obj.value);
var value = obj.value,
msg = v[1],
d = CC.isFunction(v[2]) ? v[3] : v[2];
//选项
if (!d || typeof d != 'object') d = b;
//是否忽略空
if (!d.ignoreNull && (value == '' || value == null)) {
//如果不存在回调函数,就调用alert来显示错误信息
if (!d.callback) CC.alert(msg, obj, form);
//如果存在回调,注意传递的三个参数
//msg:消息,obj:该结点,form:对应的表单,如果存在的话
else d.callback(msg, obj, form);
//出错后是否聚集
if (!d.nofocus) obj.focus();
result = false;
return false;
}
//自定义验证方法
if (CC.isFunction(v[2])) {
var ret = v[2](value, obj, form);
var pass = (ret !== false);
if (CC.isString(ret)) {
msg = ret;
pass = false;
}
if (!pass) {
if (!d.callback) CC.alert(msg, obj, form);
//同上
else d.callback(msg, obj, form);
if (!d.nofocus) obj.focus();
result = false;
return false;
}
}
//如果不设置queryString并通过验证,不存在form,就返回一个对象,
//该对象包含形如{elementName|elementId:value}的数据.
if (queryStr && !form) {
result += (result == '') ?
((typeof obj.name == 'undefined' || obj.name == '') ? obj.id: obj.name) +
'=' + value: '&' + v[0] + '=' + value;
} else if (!form) {
result[v[0]] = value;
}
});
//如果设置的queryString:true并通过验证,就返回form的提交字符串.
if (result !== false && form && queryStr) result = CC.formQuery(form);
return result;
}
OK,关键部分已完成, 举个例子说明:
/**
* validate应用例子
*/
//测试邮箱格式
function isMail(strMail) {
return /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/.test(strMail);
}
//密码长度>=6
function checkPassword(v) {
return v.length >= 6;
}
//两次密码要相同
function isTheSame(v, obj, form) {
return form ? form.password.value == v: CC.$('password').value == v;
}
//出错时自定回调
function myCallback(msg, obj, form) {
alert("出错显示的消息是:" + msg + " - 元素:" +
obj.name + ",所在form:" + (form ? form.id: '无'));
}
//存在Form的例子
function testForm() {
var result = CC.validate('testForm',
['username', '请输入用户名。'],
['mail', '邮箱格式不正确。', isMail],
['password', '密码长度大于或等于6。', checkPassword],
//完整的配置示例
['password2', '两次密码不一致。', isTheSame,
{nofocus: false,callback: myCallback,ignoreNull: false}
],
{queryString: true});
if (result !== false) alert("恭喜,通过验证!提交的字符串是:" + result);
return result;
}
//无Form的例子.
function testNoForm() {
var result = CC.validate( //既然没form了,这里不必存入form id作为第一个参数.
['username', '请输入用户名。'],
['mail', '邮箱格式不正确。', isMail],
['password', '密码长度大于或等于6。', checkPassword],
['password2', '两次密码不一致。', isTheSame,
{nofocus: false, callback: myCallback, ignoreNull: false}
],
//函数最后一个参数
{ queryString: true});
if (result !== false) alert("恭喜,通过验证!提交的字符串是:" + result);
return result;
}
是不是很方便,一看就会用?
只需要验证想要的东西!
以上只是列举一部份功能,更多功能请查看源码.
点击此处
下载本文可运行示例。
分享到:
- 2009-05-25 15:56
- 浏览 895
- 评论(0)
- 论坛回复 / 浏览 (0 / 1859)
- 查看更多
相关推荐
兼容各种浏览器,各种开发语言,基于Jquery做的脚本库,适应任何复杂的表单验证
万能通用智能JS表单验证,自动匹配正则,使用超级简单方便,纠结了很久哦,觉得好东西还是应该拿出来给大家分享。
很好用..而且还有教程..
万能Form表单验证,完全封装了支持中文验证,数字验证,电话号码验证等等
JQ表单验证插件 使用方法:$.formValidate(options); version:1.6.0 @param {Object} options @param options.area 验证的区域父级元素,默认 body @param options.msg_type 错误提示类型:alert(自定义函数...
简单易用,代码量少,验证种类齐全,通过正则表达式完成大部分校验工作!
=================================智能表单设计============================= 一键智能复制字段 字段名称设置 输入框内提示文字设置 可设置管理才能填写的字段 管理字段,可设置用户查询时是否可见 支持10几种必备...
Aire 是一个现代的 Laravel 表单构建器(演示),它专注于你...Aire 自动将旧输入绑定到您的表单,以便在发生验证错误时保留值。您还可以使用该bind()方法绑定数据。 更多详情、使用方法,请下载后阅读README.md文件
检测表单中的不能为空(.notnull)的验证 作用:一对form标签下有多个(包括一个)表单需要提交时,使用js准确的判断当前按钮对那些元素做判断 用法:在form标签下 找到当前 表单的容器 给予class=”form”,...
KesionCMS是漳州科兴信息技术有限公司开发的一套万能建站产品,是CMS行业最流行的网站建设解决方案之一。最新版X1.0把主系统及一些辅助系统模块化开发,前后台UI采用HTML5全新架构,方便随时删除(隐藏)安装所需要...
1.新增:万能表单功能新增展示提交内容的功能,可以在后台开启或关闭 2.修复:修复了手机版本下会员中心编辑邮箱和手机时,无法打开导航栏的问题 3.优化:用户提交订单时,增加了对收件信息的验证
利用万能表单你可以创建各种各样的表单,如意见反馈,产品订单等等,当你解决了对方的问题之后,在后台作解答的同时,可以自动的发一条短信通知对方,从而可以令用户觉得你很人性化,增加用户粘性。 自动生成模板...
KesionCMS是漳州科兴信息技术有限公司开发的一套万能建站产品,是CMS行业最流行的网站建设解决方案之一。最新版X1.0把主系统及一些辅助系统模块化开发,前后台UI采用HTML5全新架构,方便随时删除(隐藏)安装所需要...
KesionCMS是漳州科兴信息技术有限公司开发的一套万能建站产品,是CMS行业最流行的网站建设解决方案之一。最新版X1.0把主系统及一些辅助系统模块化开发,前后台UI采用HTML5全新架构,方便随时删除(隐藏)安装所需要...
jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 ...从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 ...从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 整理发布
作者:张子秋 ...本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利...从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
支持万能表单 支持支付宝(即时到帐接口)/微信(扫码支付)付款方式 支持中/英双语 支持QQ/旺旺客服 支持动/静态页面访问 支持接入微信公众号 支持会员系统QQ/微信接口一键登录 支持在线检测木马 支持后台一键切换...
1.优化:后台万能表单统计模块直接直接查看到会员的具体信息 2.优化:优化了手机版的新闻内容页显示表格时的样式 3.新增:新闻模块支持关联万能表单,可以直接在新闻页面提交表单 闪灵医院建站系统 v5.0 build...
支持万能表单 支持支付宝(即时到帐接口)/微信(扫码支付)付款方式 支持中/英双语 支持QQ/旺旺客服 支持动/静态页面访问 支持接入微信公众号 支持会员系统QQ/微信接口一键登录 支持在线检测木马 支持后台一键切换...