如果你只会JQuery的插件式开发, 那么你可以进来看看？

var FormValidateCommon = function (containerObj, tipContainerFlag) {
this.valObj = containerObj; //验证对象
this.tipContainerBool = tipContainerFlag || false; //插入的位置标示 {true：本身，false：最后一个td}
this.validatorArr = {}; // 验证对象容器 //********************************************
//---------现有可提供的枚举验证类型-------//
//********************************************
this.regexEnum = {
idCard: /^[-]([-]{}|[-]{})([-]|X)$/, //身份证
num: /^\-?([-]\d*)$/, //数字
email: /^([-9A-Za-z\-_\.]+)@([-9a-z]+\.[a-z]{,}(\.[a-z]{})?)$/, //邮箱
phone: /^[|||]\d{}$/, //电话
chinese: /^[\u0391-\uFFE5]{,}$/, //2-6位中文
password: /^[a-zA-Z0-9_]{,}$/, //6-16位密码验证
passwordBase: /^[a-zA-Z0-9_]*$/
} };
//=============扩展的原型方法============
FormValidateCommon.prototype =
{
init: function () {
var scope = this;
$(scope.valObj).find('.Validate').each(function () { //循环验证
var el = $(this);
scope.initItem(el);
})
},
initItem: function (el) {
if (typeof el == 'string') el = $("#" + el);
var scope = this; //FormValidateCommon的作用域
var cfg = el.attr('data-val'); //若是未开启验证便退出该项初始化
if (cfg.check && cfg.check == false) {
return false;
} if (cfg && cfg.length > ) {
cfg = eval('(' + cfg + ')'); //转成对象 var check = cfg.check || true,
id = el.attr('id') || Math.random(),
initMsg = cfg.initMsg || '请填入信息',
sucMsg = cfg.sucMsg || '格式正确',
errorMsg = cfg.errorMsg || '请注意格式',
requred = cfg.requred || false;
www.sxzhongrui.com = id;
cfg.check = check;
cfg.initMsg = initMsg; //默认信息
cfg.sucMsg = sucMsg; //验证成功信息
cfg.errorMsg = errorMsg; //验证错误信息
cfg.requred = requred;
var tips = $(""); if (scope.tipContainerBool) { //插入到最后一个td
$("#" + id).parent().parent().find("td:last").html(tips);
}
else { //插入到元素之间
tips.insertAfter(el);
}
cfg.el = el;
cfg.tipEl = tips; //该表单的验证
cfg.validate = function () {
scope.funcValidate(cfg);
}; //文本框验证
el.blur(function () {
scope.funcValidate(cfg);
}); //下拉框验证
if ($("#" + id).is("select")) {
el.change(function () {
scope.funcValidate(cfg);
});
}
scope.validatorArr[id] = cfg; //生成相关验证对象
}
},
funcValidate: function (cfg) {
var id = www.sxzhongrui.com;
var el = cfg.el;
var check = cfg.check; //判断是否开启验证
var _this = this; //取消事件不执行逻辑
if (!this.validatorArr[id])
return false; //若是没有开启验证便忽略
if (!check) {
alert("验证");
this.validatorArr[id]['state'] = 'ignore';
return false;
}
var type = cfg.type;
var regexObj = cfg.regexObj; //用户扩张的验证
var ajaxObj = cfg.ajaxObj; //ajax扩张的验证
var compareObj = cfg.compareObj; //对比验证
var msg = '';
var isPass = ; //{0：初始化提示，1：成功，-1：错误，2：必填} //--【1】----首先验证非空-------------------------
if (cfg.requred) {
if (el.val() == '' || el.val() == '' || el.val() == null) {
isPass = ; //必须项
//msg=cfg.initMstg;
} else {
msg = cfg.sucMsg;
}
}
//--【2】-----type优先,预定于的正则验证---------
if (isPass == && el.val().length > && typeof type == 'string') {
var reg = this.regexEnum[type]; if (reg.test(el.val())) {
msg = cfg.sucMsg;
} else {
isPass = -;
msg = cfg.errorMsg;
}
}
//--【3】------自身扩展的正则验证---------------
if (isPass == && el.val().length > && regexObj) {
var reg = regexObj; if (reg.test(el.val())) {
msg = cfg.sucMsg;
} else {
isPass = -;
msg = cfg.errorMsg;
}
}
//--【4】-------验证比较字符串--------------------------
if (isPass == && el.val().length > && compareObj) {
var compareArr = compareObj.split('|');
if (compareArr.length == ) {
var _type = compareArr[]
var _id = compareArr[];
var _flag = compareArr[];
var _v = el.val();
var _cv = $('#' + _id).val();
if (_type == 'num') {
_v = parseInt(_v);
_cv = parseInt(_cv);
} if (_flag == '=') {
if (_v == _cv) {
msg = cfg.sucMsg;
} else {
isPass = -;
msg = '两次密码输入不一致';
}
}
}
}
//--【5】------------ajax验证-----------------------------
if (isPass == && el.val().length > && ajaxObj) {
var ajaxArr = ajaxObj.split('|');
if (ajaxArr.length >= ) {
var url = ajaxArr[];
var _param = {};
_param[ajaxArr[]] = el.val(); //文本框参数
//--------------扩展参数---------------------------
for (var i = ; i < ajaxArr.length; i++) {
var arrObjParam = ajaxArr[i].split('=');
_param[arrObjParam[]] = arrObjParam[];
} $.post(url, _param, function (data) {
if (typeof data == 'string') {
fata = eval('(' + data + ')');
}
if (data.code) {
msg = data.msg || cfg.sucMsg;
} else {
isPass = -;
msg = data.msg;
}
ShowResult(_this, isPass);
});
return false; //在此中断后操作
}
} ShowResult(_this, isPass); //----------显示消息----------------
function ShowResult(scope, isPass) {
if (msg == '') isPass = ;
switch (isPass) {
case : //默认 scope.validatorArr[id]['state'] = 'tip';
scope.validatorArr[id]['tipEl'].html(' break;
case : //成功
scope.validatorArr[id]['state'] = 'success';
scope.validatorArr[id]['tipEl'].html(' break;
case -: //验证有误
scope.validatorArr[id]['state'] = 'error';
scope.validatorArr[id]['tipEl'].html(' break;
case : //必填验证有误
scope.validatorArr[id]['state'] = 'error';
scope.validatorArr[id]['tipEl'].html(' break;
default:
break;
}
}
},
validatorAll: function () {
for (var k in this.validatorArr) {
var v = this.validatorArr[k];
v.validate();
}
},
validatorState: function () {
for (var k in this.validatorArr) {
if (this.validatorArr[k].state == 'error') {
return false;
}
}
return true;
}
}

调用插件：

data-val="{type:'phone',initMsg:'请输入您的手机号！',sucMsg:'手机号码验证成功！',errorMsg:'请输入正确的手机号！'}"/>

上面的调用实现了很灵活的自动式标签绑定验证，但是只适合一种一个项目的通用样式的提示。

大家可以重点去学习，FormValidateCommon.prototype = {} ：

截图效果：

============================================

第三种：用js制作实现一个漂亮的下拉框插件：selectPlus

(function ($) {
$.www.sxzhongrui.comPlus = function (option) {
option = $.extend({ index: , defaultClick: true }, option);
return this.each(function () {
var _this = $(this);
var newSelect = _this.find(".seleitem");
var _itemClick = null;
www.sxzhongrui.com({
click: function () {
_itemClick = $(this);
//没有数据，则无效
if ($(this).find("p>a").length <= ) {
return;
} else {
//---------------------------
if ($(this).hasClass("click")) {
closeSelect(this);
} else {
$(this).addClass("click");
$(this).find("p>a").show("fast").css("style", "display:block");
$(this).find("p>a.current").hide();
}
}
},
mouseleave: function () {
closeSelect(this);
}
}); //隐藏p，移除click样式
function closeSelect(obj) {
$(obj).find("p>a").hide("fast");
$(obj).removeClass("click");
} //给p下面的a添加点击事件
$(".seleitem p>a").live("click", function (e) {
var src = www.sxzhongrui.com;
var thisLink = $(this); if (src.tagName == "A") {
var PObj = thisLink.parent();
var a_show = PObj.siblings("a"); PObj.siblings("a").text(src.innerHTML);
PObj.siblings("a").attr("value", thisLink.attr("value")); thisLink.parents(".seleitem").removeClass("click");
thisLink.addClass("current").siblings().removeClass("current"); //----------------------
thisLink.parents(".seleitem").children("[data-name='data']").attr("value", src.innerHTML);
thisLink.parents(".seleitem").children("[data-value='data']").attr("value", thisLink.attr("value"));
closeSelect(".seleitem"); }
});
//--------自动触发一下----------------------
(function () {
if (option.defaultClick) {
_this.find(".seleitem p>a").eq(option.index).trigger("click");
_this.find(".seleitem p>a").eq(option.index).attr("style", "display:none");
}
}());
});
}
})(jQuery);

调用插件：

已支付

全部
未支付
已支付

截图效果：

======================================================================

第四种： 续 : selectPlus                               

对于上面的selectPlus我还有话要说，对于插件的思想，未必真的就很好，看了BootStrap的一些插件源代码，你会发现，它还结合了一种绑定式的思想。

对于上面提到的所有插件式写法，其实我们都可以用绑定式的思想去简化代码量。

在上面的代码中加上,加上如下代码：

(function ($) {
$.www.sxzhongrui.comPlus = function (option) {
//.........可以参考上面的selectPlus.......
} //----------很简单的关键代码-------------------
$(window).on('load', function () {
        //取得元素上带data-tip="on"的元素
        $('[data-select="on"]').each(function () {
            $(this).selectPlus();
        })
    })
});

调用变成了这样：

data-select="on">
//..............

希望小伙伴们也都能领悟，吃饭了哦！

-->

相关文章

• 

  Java中的几种引用

• 

  struts中的通配

• 

  关于机器学习的卫星图

• 

  机器学习-零售商品价

• 

  人马机器学习识别

• 

  苹果账号格式是什么样

• 

  手机进水后有一块亮斑

• 

  磁吸壳有什么作用

• 

  【基于WinForm

• 

  【基于WinForm

• 

  刷机之家:三星s5怎

• 

  停电期间由汽车提供动

• 

  保时捷首家汽车充电休

• 

  保时捷新款纯电动汽车

• 

  【第274期】面试官

• 

  【第35期】谈谈你对

• 

  小区入口处设置了8个

• 

  这个小男孩的名字叫“

• 

  金价飙升，太保保值！

• 

  如何在PHPExce

Copyright © 中锐科技网 版权所有 | 陕ICP备16008648号