Jquery通用页面验证插件 power by Think_Fish
2010-09-26 11:46
316 查看
这个是还未完成的一个demo,因为中途碰到了让我为难的问题所以现在把demo发布出来,希望各位高手能指点一二
/*--------------------------------------------*
*--------创建者:Think_Fish-------------------------*
*--------说明:通用页面验证插件----------------*
*--------创建时间:2010-09-15------------------*
*---------------------------------------------*/
//通用验证插件
//idName:需要验证的ID
//validataName展示错误信息的标签ID
//validataType:所要验证的类型
//{length:长度验证,empty:非空验证,Email:邮箱验证,phone:手机验证,Url:网址合法性验证
//,date:日期验证,number:数字验证.输入类型不区分大小写}
function ValidataEmpty(idName, validataName, validataType) {
var object = $("#" + idName);
var validataObject = $("#" + validataName);
//获取inpu的value属性的值
var value = object.attr("value");
//判断是哪种类型的验证
switch (validataType.toLowerCase()) {
//判断是否为空
case "empty":
if (value == "") {
validataObject.show();
} else {
validataObject.hide();
}
break;
//判断是否合法邮箱地址
case "email":
if (value == "") {
validataObject.show();
} else {
if (!/^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/.test(value)) {
validataObject.html("<span style='color:red'>*邮箱地址不合法</span>").show();
} else {
validataObject.html("");
}
}
break;
//判断是否合法手机号
case "phone":
if (value == "") {
validataObject.show();
} else {
if (value.match("^(1//d{10})$") == null) {
validataObject.html("<span style='color:red'>*手机号码不合法</span>").show();
} else {
validataObject.html("");
}
}
break;
}
}
//调用示例
<td>
<input type="text" name="Email" id="Email" class="textbox" maxlength="100" onblur="javascript:ValidataEmpty ('Email','validataEmail','email')"/><span id="validataEmail" style="display: none;color:Red">*邮箱不能为空</span>
</td>
//说明
//首先要调用jquery库
<span id="validataEmail" style="display: none;color:Red">*邮箱不能为空</span>默认的为验证是否为空,所以这句代码得加上。若验证其他如上段代码是需要验证email,插件中会首先判断是否非空,然后再判断邮件地址是否合法,不合法则会动态的改变页面中span标签所显示的内容.
现在还只写了一部分,会逐渐的完善这个插件功能。
1,如果同一个控件需要验证几个方面,比如用户名我需要验证是否为空,并且还需要验证输入的用户名是否被注册,那调用的时候如何处理呢?
2,我不希望全部填写完成之后点击按钮错误信息才显示出来,而是填写的时候若有错就直接显示出来,但是这个方法怎么跟铵钮结合起来呢?
3,是用$(function{});好呢还是定义一个方法在页面中去调用好?(似乎我幻想用一个方法来解决这个通用验证的问题似乎不太现实?!)
4,若各位牛人有做过类似的通用页面客户端验证的方法指点一二,我希望能把这个插件完善起来。
/*--------------------------------------------*
*--------创建者:Think_Fish-------------------------*
*--------说明:通用页面验证插件----------------*
*--------创建时间:2010-09-15------------------*
*---------------------------------------------*/
//通用验证插件
//idName:需要验证的ID
//validataName展示错误信息的标签ID
//validataType:所要验证的类型
//{length:长度验证,empty:非空验证,Email:邮箱验证,phone:手机验证,Url:网址合法性验证
//,date:日期验证,number:数字验证.输入类型不区分大小写}
function ValidataEmpty(idName, validataName, validataType) {
var object = $("#" + idName);
var validataObject = $("#" + validataName);
//获取inpu的value属性的值
var value = object.attr("value");
//判断是哪种类型的验证
switch (validataType.toLowerCase()) {
//判断是否为空
case "empty":
if (value == "") {
validataObject.show();
} else {
validataObject.hide();
}
break;
//判断是否合法邮箱地址
case "email":
if (value == "") {
validataObject.show();
} else {
if (!/^/w+([-+.]/w+)*@/w+([-.]/w+)*/./w+([-.]/w+)*$/.test(value)) {
validataObject.html("<span style='color:red'>*邮箱地址不合法</span>").show();
} else {
validataObject.html("");
}
}
break;
//判断是否合法手机号
case "phone":
if (value == "") {
validataObject.show();
} else {
if (value.match("^(1//d{10})$") == null) {
validataObject.html("<span style='color:red'>*手机号码不合法</span>").show();
} else {
validataObject.html("");
}
}
break;
}
}
//调用示例
<td>
<input type="text" name="Email" id="Email" class="textbox" maxlength="100" onblur="javascript:ValidataEmpty ('Email','validataEmail','email')"/><span id="validataEmail" style="display: none;color:Red">*邮箱不能为空</span>
</td>
//说明
//首先要调用jquery库
<span id="validataEmail" style="display: none;color:Red">*邮箱不能为空</span>默认的为验证是否为空,所以这句代码得加上。若验证其他如上段代码是需要验证email,插件中会首先判断是否非空,然后再判断邮件地址是否合法,不合法则会动态的改变页面中span标签所显示的内容.
现在还只写了一部分,会逐渐的完善这个插件功能。
1,如果同一个控件需要验证几个方面,比如用户名我需要验证是否为空,并且还需要验证输入的用户名是否被注册,那调用的时候如何处理呢?
2,我不希望全部填写完成之后点击按钮错误信息才显示出来,而是填写的时候若有错就直接显示出来,但是这个方法怎么跟铵钮结合起来呢?
3,是用$(function{});好呢还是定义一个方法在页面中去调用好?(似乎我幻想用一个方法来解决这个通用验证的问题似乎不太现实?!)
4,若各位牛人有做过类似的通用页面客户端验证的方法指点一二,我希望能把这个插件完善起来。
相关文章推荐
- 通用jquery页面验证
- 第一次自己写jquery图片延迟加载插件,不通用,但修改一下还是可以使用到很多页面上的
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- jQuery万能图片切换插件powerSwitch应用(支持同一页面多次调用)
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- 国人编写的、超牛的、基于jQuery插件式、监听模式(无侵入)的html页面form表单通用验证框架
- ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- ASP.NET jQuery 食谱11 (通过使用jQuery validation插件简单实现用户登录页面验证功能)
- ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
- jquery formValidator插件ajax验证,在内容不做修改的前提下提示错误的bug解决方法
- 实例详解jQuery表单验证插件validate
- jQuery formValidator表单验证插件是什么
- jQuery Validate表单验证插件 添加class属性形式的校验
- 几个jquery验证密码强度的插件
- jQuery 圆角插件jquery.corner.js demo页面
- jquery 页面滚动到底部自动加载插件集合
- jQuery验证插件 Validate详解
- 实例解析jQuery插件EasyUI最常用的表单验证规则
- 如何在插件JQueryValidationEngine赶在ActionPost之前验证?