页面是简单用个table拼出来的、包含以下功能:
1、表单验证
2、邮箱提醒
3、更换头像
4、ajax验证(没有生成验证码的jar包,就只用身份证写了个ajax验证展示,没有具体去验身份证)
在使用中发现,当jquery版本高到1.8.2时live()方法可用
在1.10.2中live()方法需更换为on
Validform_v5.2_min.js 56行
jquery.mailAutoComplete-3.0.js 116行
@baukh 2013-11-16
去吧,黛杩
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<title>验证表单及更换头像</title>
</head>
<body>
<div class="leaf_userInfo">
<div class="info_pic" id="info_pic">
<span class="pic" id="up_img"><img src="images/uPic/49.jpg" width="118" height="118" alt=""/></span>
<span class="edit_pic"><a href="#" class="pic_action chooseUserIcoBar">更换头像</a><p id="chooseIco" class="chooseIco"></p></span>
</div>
<div class="info_detailed">
<form method="get" action="">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80" align="right"><label>邮箱</label></td>
<td width="330" colspan="2">
<div class="Validform_checktip">请输入邮箱</div>
<input type="text" class="Validform_text width318" datatype="e" errormsg="输入错误" id="e_mail"/>
</td>
</tr>
<tr>
<td align="right"><label>昵称</label></td>
<td colspan="2">
<div class="Validform_checktip">请输入昵称</div>
<input type="text" class="Validform_text width318" datatype="s1-10" errormsg="输入错误"/>
</td>
</tr>
<tr>
<td align="right"><label>真实姓名</label></td>
<td colspan="2">
<div class="Validform_checktip">请输入姓名</div>
<input type="text" class="Validform_text width318" datatype="*" errormsg="输入错误"/>
</td>
</tr>
<tr>
<td align="right"><label>性别</label></td>
<td colspan="2">
<div class="Validform_checktip">请输入姓别</div>
<input type="radio" name="input_radio" class="input_radio" datatype="*" errormsg="请选择性别"/>保密
<input type="radio" name="input_radio" class="input_radio" datatype="*" errormsg="请选择性别"/>男
<input type="radio" name="input_radio" class="input_radio" datatype="*" errormsg="请选择性别"/>女
</td>
</tr>
<tr>
<td align="right"><label>手机号码</label></td>
<td colspan="2">
<div class="Validform_checktip">请输入号码</div>
<input type="text" class="Validform_text width318" datatype="m" errormsg="格式错误"/>
</td>
</tr>
<tr>
<td align="right"><label>身份证号码</label></td>
<td colspan="2">
<div class="Validform_checktip">这里带ajax</div>
<input type="text" class="Validform_text width318" datatype="*" errormsg="格式错误" ajaxurl="valid.jsp"/>
</td>
</tr>
<tr>
<td colspan="3"><a href="javascript:void(0)" class="info_action uf_submit">修 改</a></td>
</tr>
</table>
</form>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/editPhoto.js"></script>
<script type="text/javascript" src="js/Validform_v5.2_min.js"></script>
<script type="text/javascript" src="js/editForm.js"></script>
<script type="text/javascript" src="js/jquery.mailAutoComplete-3.0.js"></script>
<script type="text/javascript">
$(function(){
$("#e_mail").mailAutoComplete({
//邮箱提示
boxClass: "out_box", //外部box样式
listClass: "list_box", //默认的列表样式
focusClass: "focus_box", //列表选样式中
markCalss: "mark_box", //高亮样式
autoClass: false, //是否使用插件自带样式
textHint: true, //提示文字自动隐藏
hintText: "请输入邮箱地址"
});
})
</script>
</body>
</html>
/* * 功能实现:头像更换 */ var ChooseUserIco = { init : function() { $(".chooseUserIcoBar").click(function() { var h = ChooseUserIco.getHtml(); $('#chooseIco').html(h); $('#chooseIco').show(); $('#chooseIco').mouseout(function() { $('#chooseIco').hide(); }).mouseover(function() { $('#chooseIco').show(); }) return false; }) }, getHtml : function() { var h = ''; for ( var i = 1; i <= 50; i++) { h += '<a class="userIco" id="userIco' + i + '" href="javascript:void(0)" οnclick="ChooseUserIco.setValue(\'userIco' + i + '\')"><img src="' + 'images/uPic/' + i + '.jpg" width="48" height="48" /></a>'; } return h; }, setValue : function(id) { var obj = $("#" + id); var icoUri = $(obj).find('img').attr('src'); $("#userIcoVal").val(icoUri); $("#up_img").find('img').attr('src', icoUri); } } $(function() { ChooseUserIco.init(); })
/*
* 表单样式
*/
.leaf_userInfo {
border-bottom-width: 1px;
border-bottom-style:dotted;
border-bottom-color: #ccc;
position: relative;
height:350px;
width: 710px;
}
.leaf_userInfo .info_pic {
position: absolute;
height: 160px;
width: 120px;
left: 20px;
top: 20px;
}
.leaf_userInfo .info_pic .pic {
display: block;
border: 1px solid #ccc;
}
.leaf_userInfo .info_pic .pic img {
height: 118px;
width: 118px;
overflow: hidden;
}
.leaf_userInfo .info_pic .edit_pic{
width:52px;
display:block;
margin-top:5px;
position: relative;
}
.leaf_userInfo .info_pic .edit_pic .pic_action {
line-height: 30px;
text-align: center;
display: block;
height: 30px;
width: 120px;
}
.leaf_userInfo .info_pic .edit_pic .chooseIco{
display:none;
position: absolute;
left: 0px;
top: 0px;
height: 280px;
width: 560px;
border: 2px solid #e8e8e8;
background-color: #FFF;
padding-top: 5px;
padding-right: 3px;
padding-bottom: 5px;
padding-left: 5px;
z-index: 100;
}
.leaf_userInfo .info_pic .edit_pic .chooseIco a{
height: 48px;
width: 48px;
border: 1px solid #e8e8e8;
float: left;
border-radius: 4px 4px 4px 4px;
display: block;
padding: 2px;
margin-right: 2px;
margin-bottom: 2px;
}
.leaf_userInfo .info_pic .edit_pic .chooseIco a:hover{
border: 1px solid #FF4D9A;
}
.leaf_userInfo .info_detailed {
position: absolute;
width: 540px;
height:270px;
top: 40px;
right: 10px;
}
.leaf_userInfo .info_detailed tr td {
height: 40px;
color:#666;
}
.leaf_userInfo .info_detailed tr td label{
font-size:14px;
margin-right:10px;
}
.leaf_userInfo .info_detailed tr td .noEdit{
color:#000;
font-weight:600;
font-size:14px;
}
.leaf_userInfo .info_detailed li .inde_action:hover{
color:#f90;
}
.leaf_userInfo .info_action {
height: 26px;
line-height:26px;
text-align:center;
width: 99px;
margin-top:10px;
margin-left:136px;
display:block;
color:#fff;
font-size:14px;
background:url(../images/button_bk3.png)
}
/*
*表单提示
*/
.loading {
color: #390;
background-color: #FFF;
padding-top: 10px;
padding-bottom: 10px;
border: 2px solid #dad8d8;
display:none;
}
.loadingInner {
background-image: url(../images/ajax-loader.gif);
background-repeat: no-repeat;
background-position: 20px center;
width: 110px;
padding-left: 60px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
margin-right: auto;
margin-left: auto;
}
.loading.noBorder {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.loading.bigSize {
padding-top: 100px;
padding-bottom: 100px;
}
.Validform_checktip {
font-size:12px;
padding-left:16px;
float:right;
line-height:28px;
}
.form_panel .fp_alert.Validform_right {
color:#71b83d;
padding-left:20px;
background-image: url(../images/right.png);
background-repeat: no-repeat;
background-position: left center;
}
.form_panel .fp_alert.Validform_wrong {
color:red;
padding-left:20px;
white-space:nowrap;
background:url(../images/error.png) no-repeat left center;
}
.form_panel .fp_alert.Validform_loading {
padding-left:20px;
background:url(../images/onLoad.gif) no-repeat left center;
}
.Validform_right {
color:#71b83d;
padding-left:20px;
background-image: url(../images/right.png);
background-repeat: no-repeat;
background-position: left center;
}
.Validform_wrong {
color:red;
padding-left:16px;
white-space:nowrap;
background:url(../images/error.png) no-repeat left center;
}
.Validform_loading {
padding-left:16px;
background:url(../images/onLoad.gif) no-repeat left center;
}
.Validform_text {
height: 28px;
border: 1px solid #ccc;
font-size:14px;
line-height:28px;
background-color:#f8f8f8;
padding-left:4px;
padding-right:4px;
}
.Validform_text:focus {
background-color:#fff;
}
.Validform_error {
border:1px solid #D56766;
}
.checkImgBar {
cursor: pointer;
}
.treePanel {
position: relative;
}
.treePanel .ztree {
display:none;
position: absolute;
left: 0px;
top: 36px;
width:199px;
background-color: #FFF;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
}
.acAutoComplate {
position: absolute;
display: none;
background-color: #FFF;
border: 1px solid #CCC;
overflow: hidden;
}
.acAutoComplate li {
line-height: 25px;
height: 25px;
color: #999;
padding-right: 5px;
padding-left: 5px;
cursor: pointer;
font-size: 14px;
}
.acAutoComplate li:hover {
background-color: #FFE7E7;
color: #333;
}
.acAutoComplate .current {
background-color: #FFE7E7;
color: #333;
}
.postLoading {
background-image: url(../images/indicator_black.gif);
background-repeat: no-repeat;
background-position: center bottom;
overflow: hidden;
background-color: #000;
position: fixed;
top: 300px;
z-index: 9999;
width: 110px;
filter: Alpha(Opacity=70);
opacity : 0.7;
border-radius: 8px 8px 8px 8px;
margin-right: auto;
margin-left: auto;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 50px;
font-size: 14px;
color: #FFF;
left: 300px;
display: none;
}
.ajaxLoading{
overflow: hidden;
background-color: #fff;
position: fixed;
top: 300px;
z-index: 9999;
width: 110px;
filter: Alpha(Opacity=70);
opacity : 0.7;
border:1px solid #852C2C;
border-radius: 8px 8px 8px 8px;
margin-right: auto;
margin-left: auto;
font-size: 14px;
left: 300px;
display: none;
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 20px;
}
.ajaxLoading .alMain{
background-image:url(../images/ajax-loader.gif);
background-repeat: no-repeat;
height:31px;
padding-left:40px;
line-height:31px;
color: #9A3333;
font-size:14px;
}
/*
*邮箱提示样式
*/
.out_box {
background: #fff;
font: 14px;
color:#666;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #ccc;
border-bottom-color: #ccc;
border-left-color: #ccc;
cursor:default;
}
.list_box {
line-height:24px;
height:24px;
cursor: pointer;
padding:0px;
display:block;
padding-left:5px;
padding-right:5px;
}
.focus_box {
line-height:24px;
height:24px;
background: #AC3939;
color:#FFF;
padding-left:5px;
padding-right:5px;
}
.mark_box {
font-weight:600;
}
/* *表单验证主JS */ (function($, win, undef) { var errorobj = null, msgobj = null, msghidden = true; var tipmsg = {// 默认提示文字; tit : "提示信息", w : "请输入正确信息!", r : "ok", c : "正在检测信息…", s : "不能为空!", v : "所填信息没有经过验证,请稍后…", p : "正在提交数据…", err : "出错了,请重试!", abort : "Ajax操作被取消!" } $.Tipmsg = tipmsg; var Validform = function(forms, settings, inited) { var settings = $.extend({}, Validform.defaults, settings); settings.datatype && $.extend(Validform.util.dataType, settings.datatype); var brothers = this; brothers.tipmsg = {}; brothers.settings = settings; brothers.forms = forms; brothers.objects = []; // 创建子对象时不再绑定事件; if (inited === true) { return false; } forms.each(function(n) { // 已经绑定事件时跳过,避免事件重复绑定; if (this.validform_inited == "inited") { return true; } this.validform_inited = "inited"; var $this = $(this); // 防止表单按钮双击提交两次; this.validform_status = "normal"; // normal | posting | posted; // 让每个Validform对象都能自定义tipmsg; $this.data("tipmsg", brothers.tipmsg); // bind the blur event; $this.find("[datatype]").live("blur", function() { // 判断是否是在提交表单操作时触发的验证请求; var subpost = arguments[1]; Validform.util.check.call(this, $this, brothers, subpost); }); // 点击表单元素,默认文字消失效果; // 表单元素值比较时的信息提示增强; // radio、checkbox提示信息增强; Validform.util.enhance.call($this); // plugins here to start; if (settings.usePlugin) { Validform.util.usePlugin.call($this, settings.usePlugin, settings.tiptype, settings.tipSweep, n); } settings.btnSubmit && $this.find(settings.btnSubmit).bind( "click", function() { var subflag = Validform.util.submitForm.call( $this, settings); subflag === undef && (subflag = true); if (subflag === true) { $this[0].submit(); } }); $this.submit(function() { var subflag = Validform.util.submitForm.call($this, settings); subflag === undef && (subflag = true); return subflag; }); $this.find("[type='reset']").add($this.find(settings.btnReset)) .bind("click", function() { Validform.util.resetForm.call($this); }); }); // 预创建pop box; if (settings.tiptype == 1 || (settings.tiptype == 2 && settings.ajaxPost)) { creatMsgbox(); } } Validform.defaults = { tiptype : 1, tipSweep : false, showAllError : false, postonce : false, ajaxPost : false } Validform.util = { dataType : { "match" : /^(.+?)(\d+)-(\d+)$/, "*" : /[\w\W]+/, "*6-16" : /^[\w\W]{6,16}$/, "n" : /^\d+$/, "n6-16" : /^\d{6,16}$/, "s" : /^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]+$/, "s6-18" : /^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{6,18}$/, "p" : /^[0-9]{6}$/, "m" : /^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/, "e" : /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, "url" : /^(\w+:\/\/)?\w+(\.\w+)+.*$/ }, toString : Object.prototype.toString, getValue : function(obj) { var inputval, curform = this; if (obj.is(":radio")) { inputval = curform.find( ":radio[name='" + obj.attr("name") + "']:checked") .val(); inputval = inputval === undef ? "" : inputval; } else if (obj.is(":checkbox")) { inputval = curform.find( ":checkbox[name='" + obj.attr("name") + "']:checked") .val(); inputval = inputval === undef ? "" : inputval; } else { inputval = obj.val(); } return $.trim(inputval); }, isEmpty : function(val) { return val === "" || val === $.trim(this.attr("tip")); }, enhance : function() { var curform = this; // 表单元素值比较时的信息提示增强; curform .find("input[recheck]") .each( function() { // 已经绑定事件时跳过; if (this.validform_inited == "inited") { return true; } this.validform_inited = "inited"; var _this = $(this); var recheckinput = curform.find("input[name='" + $(this).attr("recheck") + "']"); recheckinput .bind( "keyup", function() { if (recheckinput.val() == _this .val() && recheckinput .val() != "") { if (recheckinput .attr("tip")) { if (recheckinput .attr("tip") == recheckinput .val()) { return false; } } _this.trigger("blur"); } }) .bind( "blur", function() { if (recheckinput.val() != _this .val() && _this.val() != "") { if (_this.attr("tip")) { if (_this .attr("tip") == _this .val()) { return false; } } _this.trigger("blur"); } }); }); // hasDefaultText; curform.find("[tip]").each(function() {// tip是表单元素的默认提示信息,这是点击清空效果; // 已经绑定事件时跳过; if (this.validform_inited == "inited") { return true; } this.validform_inited = "inited"; var defaultvalue = $(this).attr("tip"); var altercss = $(this).attr("altercss"); $(this).focus(function() { if ($(this).val() == defaultvalue) { $(this).val(''); if (altercss) { $(this).removeClass(altercss); } } }).blur(function() { if ($.trim($(this).val()) === '') { $(this).val(defaultvalue); if (altercss) { $(this).addClass(altercss); } } }); }); // enhance info feedback for checkbox & radio; curform.find(":checkbox[datatype],:radio[datatype]").each( function() { // 已经绑定事件时跳过; if (this.validform_inited == "inited") { return true; } this.validform_inited = "inited"; var _this = $(this); var name = _this.attr("name"); curform.find("[name='" + name + "']").filter( ":checkbox,:radio").bind("click", function() { // 避免多个事件绑定时的取值滞后问题; setTimeout(function() { _this.trigger("blur"); }, 0); }); }); }, usePlugin : function(plugin, tiptype, tipSweep, n) { /* * plugin:settings.usePlugin; tiptype:settings.tiptype; * tipSweep:settings.tipSweep; n:当前表单的索引; */ var curform = this; // swfupload; if (plugin.swfupload && typeof (swfuploadhandler) != "undefined") { var swfuploadinput = curform.find("input[plugin='swfupload']") .val(""), custom = { custom_settings : { form : curform, showmsg : function(msg, type) { Validform.util.showmsg.call(curform, msg, tiptype, { obj : swfuploadinput, type : type, sweep : tipSweep }); } } }; custom = $.extend(true, {}, plugin.swfupload, custom); swfuploadhandler.init(custom, n); } // datepicker; if (plugin.datepicker && $.fn.datePicker) { if (plugin.datepicker.format) { Date.format = plugin.datepicker.format; delete plugin.datepicker.format; } if (plugin.datepicker.firstDayOfWeek) { Date.firstDayOfWeek = plugin.datepicker.firstDayOfWeek; delete plugin.datepicker.firstDayOfWeek; } var datepickerinput = curform .find("input[plugin='datepicker']"); plugin.datepicker.callback && datepickerinput.bind("dateSelected", function() { var d = new Date($.event._dpCache[this._dpId] .getSelected()[0]).asString(Date.format); plugin.datepicker.callback(d, this); }); datepickerinput.datePicker(plugin.datepicker); } // passwordstrength; if (plugin.passwordstrength && $.fn.passwordStrength) { plugin.passwordstrength.showmsg = function(obj, msg, type) { Validform.util.showmsg.call(curform, msg, tiptype, { obj : obj, type : type, sweep : tipSweep }, "hide"); }; curform.find("input[plugin*='passwordStrength']") .passwordStrength(plugin.passwordstrength); } // jqtransform; if (plugin.jqtransform && $.fn.jqTransSelect) { var jqTransformHideSelect = function(oTarget) { var ulVisible = $('.jqTransformSelectWrapper ul:visible'); ulVisible.each(function() { var oSelect = $(this).parents( ".jqTransformSelectWrapper:first").find( "select").get(0); // do not hide if click on the label object associated // to the select if (!(oTarget && oSelect.oLabel && oSelect.oLabel .get(0) == oTarget.get(0))) { $(this).hide(); } }); }; /* Check for an external click */ var jqTransformCheckExternalClick = function(event) { if ($(event.target).parents('.jqTransformSelectWrapper').length === 0) { jqTransformHideSelect($(event.target)); } }; var jqTransformAddDocumentListener = function() { $(document).mousedown(jqTransformCheckExternalClick); }; if (plugin.jqtransform.selector) { curform.find(plugin.jqtransform.selector).filter( 'input:submit, input:reset, input[type="button"]') .jqTransInputButton(); curform.find(plugin.jqtransform.selector).filter( 'input:text, input:password').jqTransInputText(); curform.find(plugin.jqtransform.selector).filter( 'input:checkbox').jqTransCheckBox(); curform.find(plugin.jqtransform.selector).filter( 'input:radio').jqTransRadio(); curform.find(plugin.jqtransform.selector) .filter('textarea').jqTransTextarea(); if (curform.find(plugin.jqtransform.selector).filter( "select").length > 0) { curform.find(plugin.jqtransform.selector).filter( "select").jqTransSelect(); jqTransformAddDocumentListener(); } } else { curform.jqTransform(); } curform.find(".jqTransformSelectWrapper").find("li a").click( function() { curform.find("select").trigger("blur"); }); } }, _regcheck : function(datatype, gets, obj, curform) { var curform = curform, info = null, passed = false, type = 3;// default // set // to // wrong // type, // 2,3,4; if (Validform.util.toString.call(Validform.util.dataType[datatype]) == "[object Function]") { passed = Validform.util.dataType[datatype](gets, obj, curform, Validform.util.dataType); if (passed === true || passed === undef) { passed = true; type = 2; info = curform.data("tipmsg").r || tipmsg.r; if (obj.attr("recheck")) { var theother = curform.find("input[name='" + obj.attr("recheck") + "']:first"); if (gets != theother.val()) { passed = false; type = 3; info = obj.attr("errormsg") || curform.data("tipmsg").w || tipmsg.w; } } } else { info = passed || obj.attr("errormsg") || curform.data("tipmsg").w || tipmsg.w; passed = false; if (gets === "") {// 验证不通过且为空时; return { passed : false, type : 3, info : obj.attr("nullmsg") || curform.data("tipmsg").s || tipmsg.s }; } } return { passed : passed, type : type, info : info }; } if (!(datatype in Validform.util.dataType)) { var mac = datatype.match(Validform.util.dataType["match"]), temp; if (!mac) { return false; } for ( var name in Validform.util.dataType) { temp = name.match(Validform.util.dataType["match"]); if (!temp) { continue; } if (mac[1] === temp[1]) { var str = Validform.util.dataType[name].toString(), param = str .match(/\/[mgi]*/g)[1].replace("\/", ""), regxp = new RegExp( "\\{" + temp[2] + "," + temp[3] + "\\}", "g"); str = str.replace(/\/[mgi]*/g, "\/").replace(regxp, "{" + mac[2] + "," + mac[3] + "}").replace( /^\//, "").replace(/\/$/, ""); Validform.util.dataType[datatype] = new RegExp(str, param); break; } } } if (Validform.util.toString.call(Validform.util.dataType[datatype]) == "[object RegExp]") { passed = Validform.util.dataType[datatype].test(gets); if (passed) { type = 2; info = curform.data("tipmsg").r || tipmsg.r; if (obj.attr("recheck")) { var theother = curform.find("input[name='" + obj.attr("recheck") + "']:first"); if (gets != theother.val()) { passed = false; type = 3; info = obj.attr("errormsg") || curform.data("tipmsg").w || tipmsg.w; } } } else { info = obj.attr("errormsg") || curform.data("tipmsg").w || tipmsg.w; if (gets === "") { return { passed : false, type : 3, info : obj.attr("nullmsg") || curform.data("tipmsg").s || tipmsg.s }; } } return { passed : passed, type : type, info : info }; } return { passed : false, type : 3, info : curform.data("tipmsg").w || tipmsg.w }; }, regcheck : function(datatype, gets, obj) { /* * datatype:datatype; gets:inputvalue; obj:input object; */ var curform = this, info = null, passed = false, type = 3;// default // set // to // wrong // type, // 2,3,4; // ignore; if (obj.attr("ignore") === "ignore" && Validform.util.isEmpty.call(obj, gets)) { if (obj.data("cked")) { info = ""; } return { passed : true, type : 4, info : info }; } obj.data("cked", "cked");// do nothing if is the first time // validation triggered; // default value; if ($.trim(obj.attr("tip")) && gets === $.trim(obj.attr("tip"))) { return { passed : false, type : 3, info : obj.attr("nullmsg") || curform.data("tipmsg").s || tipmsg.s }; } var eithor = datatype.indexOf("|") == -1 ? false : true; var datatype = datatype.split(/,|\|/); var res; for ( var dtype in datatype) { res = Validform.util._regcheck($.trim(datatype[dtype]), gets, obj, curform); if (!res.passed && !eithor || res.passed && eithor) { break; } } return res; }, showmsg : function(msg, type, o, show) { /* * msg:提示文字; type:提示信息显示方式; o:{obj:当前对象, type:1=>正在检测 | 2=>通过}, * show:在blur或提交表单触发的验证中,有些情况不需要显示提示文字,如自定义弹出提示框的显示方式,不需要每次blur时就马上弹出提示; */ // 如果msg为undefined,那么就没必要执行后面的操作,ignore有可能会出现这情况; if (msg == undefined) { return false; } // if(msg===null || o.sweep && show=="hide"){return false;} $.extend(o, { curform : this }); if (typeof type == "function") { if (!(o.sweep && show == "hide")) { type(msg, o, Validform.util.cssctl); } return false; } if (type == 1 || show == "alwaysshow") { msgobj.find(".Validform_info").html(msg); } if (type == 1 && show != "hide" || show == "alwaysshow") { msghidden = false; msgobj.find(".iframe").css("height", msgobj.outerHeight()); msgobj.show(); setCenter(msgobj, 100); } if (type == 2 && o.obj) { o.obj.parent().next().find(".Validform_checktip").html(msg); Validform.util.cssctl(o.obj.parent().next().find( ".Validform_checktip"), o.type); } }, cssctl : function(obj, status) { switch (status) { case 1: obj.removeClass("Validform_right Validform_wrong").addClass( "Validform_checktip Validform_loading");// checking; break; case 2: obj.removeClass("Validform_wrong Validform_loading").addClass( "Validform_checktip Validform_right");// passed; break; case 4: obj.removeClass( "Validform_right Validform_wrong Validform_loading") .addClass("Validform_checktip");// for ignore; break; default: obj.removeClass("Validform_right Validform_loading").addClass( "Validform_checktip Validform_wrong");// wrong; } }, getQuery : function(url) { var queryindex = url.indexOf("?"); if (queryindex != -1) { return url.substring(queryindex + 1) + "&"; } else { return ""; } }, check : function(curform, brothers, subpost, bool) { /* * 检测单个表单元素; 验证通过返回true,否则返回false、实时验证返回值为ajax; * bool,传入true则只检测不显示提示信息; */ var $this = curform; var settings = brothers.settings; var subpost = subpost || ""; var inputval = Validform.util.getValue.call($this, $(this)); // 绑定了dataIgnore属性的对象也忽略验证; // 值没变化不做检测,这时要考虑recheck情况; if (inputval == this.validform_lastval && !$(this).attr("recheck") || $(this).data("dataIgnore") === "dataIgnore") { return true; } // dragonfly=true时,值为空不做验证,但验证不通过; if (settings.dragonfly && !$(this).data("cked") && Validform.util.isEmpty.call($(this), inputval)) { return false; } this.validform_lastval = inputval;// 存储当前值; var flag = true, _this; errorobj = _this = $(this); flag = Validform.util.regcheck.call($this, $(this).attr("datatype"), inputval, $(this)); if (!flag.passed) { // 取消正在进行的ajax验证; Validform.util.abort.call(_this[0]); if (!bool) { _this.addClass("Validform_error"); Validform.util.showmsg.call($this, flag.info, settings.tiptype, { obj : $(this), type : flag.type, sweep : settings.tipSweep }, "hide"); // 当tiptype=1的情况下,传入"hide"则让提示框不弹出,tiptype=2的情况下附加参数"hide"不起作用; } return false; } else { if ($(this).attr("ajaxurl") && !bool && $(this).attr("ignore") != "ignore") { var inputobj = $(this); if (inputobj[0].validform_valid === "posting" && inputval == inputobj[0].validform_ckvalue) { return "ajax"; } inputobj[0].validform_valid = "posting"; inputobj[0].validform_ckvalue = inputval; Validform.util.showmsg.call($this, brothers.tipmsg.c || tipmsg.c, settings.tiptype, { obj : inputobj, type : 1, sweep : settings.tipSweep }, "hide"); Validform.util.abort.call(_this[0]); var ajaxurl = inputobj.attr("ajaxurl"); _this[0].validform_ajax = $.ajax({ type : "POST", cache : false, url : ajaxurl, data : Validform.util.getQuery.call(win, ajaxurl) + "param=" + inputval + "&name=" + $(this).attr("name"), dataType : "text", success : function(s) { s = eval('(' + s + ')'); if (s.success) { inputobj[0].validform_valid = "true"; Validform.util.showmsg.call($this, brothers.tipmsg.r || tipmsg.r, settings.tiptype, { obj : inputobj, type : 2, sweep : settings.tipSweep }, "hide"); _this.removeClass("Validform_error"); errorobj = null; if (subpost === "postform") { $this.trigger("submit"); } } else { inputobj[0].validform_valid = s.success; _this.addClass("Validform_error"); Validform.util.showmsg.call($this, s.msg, settings.tiptype, { obj : inputobj, type : 3, sweep : settings.tipSweep }); } _this[0].validform_ajax = null; }, error : function(data) { if (data.statusText !== "abort") { _this.addClass("Validform_error"); Validform.util.showmsg.call($this, brothers.tipmsg.err || tipmsg.err, settings.tiptype, { obj : inputobj, type : 3, sweep : settings.tipSweep }); } inputobj[0].validform_valid = brothers.tipmsg.err || tipmsg.err; _this[0].validform_ajax = null; } }); return "ajax"; } else { if (!bool) { Validform.util.showmsg.call($this, flag.info, settings.tiptype, { obj : $(this), type : flag.type, sweep : settings.tipSweep }, "hide"); _this.removeClass("Validform_error"); } errorobj = null; return true; } } }, submitForm : function(settings, flg, ajaxPost, sync) { /* * flg===true时跳过验证直接提交; ajaxPost==="ajaxPost"指示当前表单以ajax方式提交; */ var curform = this; // 表单正在提交时点击提交按钮不做反应; if (curform[0].validform_status === "posting") { return false; } // 要求只能提交一次时; if (settings.postonce && curform[0].validform_status === "posted") { return false; } var sync = sync === true ? false : true; var beforeCheck = settings.beforeCheck && settings.beforeCheck(curform); if (beforeCheck === false) { return false; } var flag = true, inflag; $(".eceditor").each(function() { var id = this.id; if (id != '') { UE.getEditor(id).sync(); } }); curform .find("[datatype]") .each( function() { // 跳过验证; if (flg) { return false; } // 隐藏或绑定dataIgnore的表单对象不做验证; if (settings.ignoreHidden && $(this).is(":hidden") || $(this).data("dataIgnore") === "dataIgnore") { return true; } var inputval = Validform.util.getValue.call( curform, $(this)), _this; errorobj = _this = $(this); inflag = Validform.util.regcheck.call(curform, $(this).attr("datatype"), inputval, $(this)); if (!inflag.passed) { _this.addClass("Validform_error"); Validform.util.showmsg.call(curform, inflag.info, settings.tiptype, { obj : $(this), type : inflag.type, sweep : settings.tipSweep }); if (!settings.showAllError) { _this.focus(); flag = false; return false; } flag && (flag = false); return true; } if ($(this).attr("ajaxurl") && $(this).attr("ignore") != "ignore") { if (this.validform_valid !== "true") { var thisobj = $(this); _this.addClass("Validform_error"); Validform.util.showmsg.call(curform, curform.data("tipmsg").v || tipmsg.v, settings.tiptype, { obj : thisobj, type : 3, sweep : settings.tipSweep }); if (!msghidden || settings.tiptype != 1) { setTimeout(function() { thisobj.trigger("blur", [ "postform" ]);// continue // the // form // post; }, 1500); } if (!settings.showAllError) { flag = false; return false; } flag && (flag = false); return true; } } Validform.util.showmsg.call(curform, inflag.info, settings.tiptype, { obj : $(this), type : inflag.type, sweep : settings.tipSweep }, "hide"); _this.removeClass("Validform_error"); errorobj = null; }); if (settings.showAllError) { curform.find(".Validform_error:first").focus(); } $(curform[0]).attr('flag', flag); if (flag) { // 如果页面上存在tabs和多个表单一次性提交 $(curform[0]).removeAttr('checking'); var tabs = $('.tabs'); if (tabs.size() > 0) { var tabsid = $(tabs.get(0)).attr('id'); var tabsitems = $("#" + tabsid).find('.item'); var k = true; for ( var i = 0; i < tabsitems.length && k == true; i++) { var itemid = $(tabsitems[i]).attr('id'); var formFlag = $('#' + itemid + '-content') .find('form').attr('flag'); var checking = $('#' + itemid + '-content') .find('form').attr('checking'); var tabsid = $('#' + itemid + '-content').find('form') .attr('tabsid'); if ($('#' + itemid + '-content').find('form').size() > 0) { if (formFlag != 'true' && typeof (checking) == 'undefined') { flag = false; $('#' + itemid + '-content').find('form').attr( 'checking', true); if ($('#' + itemid + '-content').find('form') .size() > 0) { $(tabsitems[i]).click(); $('#' + itemid + '-content').find('form') .submit(); } k = false; return false; } else if (formFlag == 'false') { if ($('#' + itemid + '-content').find('form') .size() > 0) { $(tabsitems[i]).click(); $('#' + itemid + '-content').find('form') .submit(); } flag = false; k = false; return false; } } } } if (tabs.find('form').size() > 1) { tabs.find('form').attr('posting', false); APP.submitTabMultiForm(); return false; } var beforeSubmit = settings.beforeSubmit && settings.beforeSubmit(curform); if (beforeSubmit === false) { return false; } curform[0].validform_status = "posting"; if (settings.ajaxPost || ajaxPost === "ajaxPost") { Validform.util.showmsg.call(curform, curform.data("tipmsg").p || tipmsg.p, settings.tiptype, { obj : curform, type : 1, sweep : settings.tipSweep }, "alwaysshow");// 传入"alwaysshow"则让提示框不管当前tiptye为1还是2都弹出; APP.getModal({ num : 50, text : '正在保存信息' }); curform[0].validform_ajax = $.ajax({ type : "POST", dataType : "json", async : sync, url : curform.attr("action"), // data: decodeURIComponent(curform.serialize(),true), data : curform.serializeArray(), success : function(data) { if (data.status === "y") { Validform.util.showmsg.call(curform, data.info, settings.tiptype, { obj : curform, type : 2, sweep : settings.tipSweep }, "alwaysshow"); } else { curform[0].posting = false; Validform.util.showmsg.call(curform, data.info, settings.tiptype, { obj : curform, type : 3, sweep : settings.tipSweep }, "alwaysshow"); } settings.callback && settings.callback(data); curform[0].validform_status = "posted"; curform[0].validform_ajax = null; }, error : function(data) { APP.closeModal(); var msg = data.statusText === "abort" ? curform .data("tipmsg").abort || tipmsg.abort : curform.data("tipmsg").err || tipmsg.err; curform[0].posting = false; Validform.util.showmsg.call(curform, msg, settings.tiptype, { obj : curform, type : 3, sweep : settings.tipSweep }, "alwaysshow"); curform[0].validform_status = "normal"; curform[0].validform_ajax = null; } }); } else { if (!settings.postonce) { curform[0].validform_status = "normal"; } return settings.callback && settings.callback(curform); } } return false; }, resetForm : function() { var brothers = this; brothers.each(function() { this.reset(); this.validform_status = "normal"; }); brothers.find(".Validform_right").text(""); brothers.find(".passwordStrength").children().removeClass( "bgStrength"); brothers.find(".Validform_checktip").removeClass( "Validform_wrong Validform_right Validform_loading"); brothers.find(".Validform_error").removeClass("Validform_error"); brothers.find("[datatype]").removeData("cked").removeData( "dataIgnore"); brothers.eq(0).find("input:first").focus(); }, abort : function() { if (this.validform_ajax) { this.validform_ajax.abort(); } } } $.Datatype = Validform.util.dataType; Validform.prototype = { dataType : Validform.util.dataType, eq : function(n) { var obj = this; if (n >= obj.forms.length) { return null; } if (!(n in obj.objects)) { obj.objects[n] = new Validform($(obj.forms[n]).get(), obj.settings, true); } return obj.objects[n]; }, resetStatus : function() { var obj = this; $(obj.forms).each(function() { this.validform_status = "normal"; }); return this; }, setStatus : function(status) { var obj = this; $(obj.forms).each(function() { this.validform_status = status || "posting"; }); return this; }, getStatus : function() { var obj = this; var status = $(obj.forms)[0].validform_status; return status; }, ignore : function(selector) { var obj = this; var selector = selector || "[datatype]" $(obj.forms).find(selector).each( function() { $(this).data("dataIgnore", "dataIgnore").removeClass( "Validform_error"); }); return this; }, unignore : function(selector) { var obj = this; var selector = selector || "[datatype]" $(obj.forms).find(selector).each(function() { $(this).removeData("dataIgnore"); }); return this; }, addRule : function(rule) { /* * rule => [{ ele:"#id", datatype:"*", errormsg:"出错提示文字!", * nullmsg:"为空时的提示文字!", tip:"默认显示的提示文字", altercss:"gray", * ignore:"ignore", ajaxurl:"valid.php", recheck:"password", * plugin:"passwordStrength" },{},{},...] */ var obj = this; var rule = rule || []; for ( var index in rule) { var o = $(obj.forms).find(rule[index].ele); for ( var attr in rule[index]) { attr !== "ele" && o.attr(attr, rule[index][attr]); } } $(obj.forms).each(function() { var $this = $(this); Validform.util.enhance.call($this); }); return this; }, ajaxPost : function(flag, sync) { var obj = this; // 创建pop box; if (obj.settings.tiptype == 1 || obj.settings.tiptype == 2) { creatMsgbox(); } Validform.util.submitForm.call($(obj.forms[0]), obj.settings, flag, "ajaxPost", sync); return this; }, submitForm : function(flag) { /* flag===true时不做验证直接提交 */ var obj = this; // 让该对象的第一个表单提交; var subflag = Validform.util.submitForm.call($(obj.forms[0]), obj.settings, flag); subflag === undef && (subflag = true); if (subflag === true) { obj.forms[0].submit(); } return this; }, resetForm : function() { var obj = this; Validform.util.resetForm.call($(obj.forms)); return this; }, abort : function() { var obj = this; $(obj.forms).each(function() { Validform.util.abort.call(this); }); return this; }, check : function(bool, selector) { var selector = selector || "[datatype]", obj = this, curform = $(obj.forms), flag = true; curform.find(selector).each( function() { Validform.util.check.call(this, curform, obj, "", bool) || (flag = false); }); return flag; } } $.fn.Validform = function(settings) { return new Validform(this, settings); }; function setCenter(obj, time) { var left = ($(window).width() - obj.outerWidth()) / 2, top = ($(window) .height() - obj.outerHeight()) / 2, top = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop) + (top > 0 ? top : 0); obj.css({ left : left }).animate({ top : top }, { duration : time, queue : false }); } function creatMsgbox() { if ($("#Validform_msg").length !== 0) { return false; } msgobj = $( '<div id="Validform_msg"><div class="Validform_title">' + tipmsg.tit + '<a class="Validform_close" href="javascript:void(0);">χ</a></div><div class="Validform_info"></div><div class="iframe"><iframe frameborder="0" scrolling="no" height="100%" width="100%"></iframe></div></div>') .appendTo("body");// 提示信息框; msgobj.find("a.Validform_close").click(function() { msgobj.hide(); msghidden = true; if (errorobj) { errorobj.focus().addClass("Validform_error"); } return false; }).focus(function() { this.blur(); }); $(window).bind("scroll resize", function() { !msghidden && setCenter(msgobj, 400); }); } ; // 公用方法显示&关闭信息提示框; $.Showmsg = function(msg) { creatMsgbox(); Validform.util.showmsg.call(win, msg, 1, {}); }; $.Hidemsg = function() { msgobj.hide(); msghidden = true; }; })(jQuery, window);
/* *邮箱弹出提醒 */ (function($){ $.fn.mailAutoComplete = function(options){ var defaults = { boxClass: "mailListBox", //外部box样式 listClass: "mailListDefault", //默认的列表样式 focusClass: "mailListFocus", //列表选样式中 markCalss: "mailListHlignt", //高亮样式 zIndex: 1, autoClass: true, //是否使用插件自带class样式 mailArr: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"] //邮件数组 }; var settings = $.extend({}, defaults, options || {}); //页面装载CSS样式 if(settings.autoClass && $("#mailListAppendCss").size() === 0){ $('<style id="mailListAppendCss" type="text/css">.mailListBox{border:1px solid #369; background:#fff; font:12px/20px Arial;}.mailListDefault{padding:0 5px;cursor:pointer;white-space:nowrap;}.mailListFocus{padding:0 5px;cursor:pointer;white-space:nowrap;background:#369;color:white;}.mailListHlignt{color:red;}.mailListFocus .mailListHlignt{color:#fff;}</style>').appendTo($("head")); } var cb = settings.boxClass, cl = settings.listClass, cf = settings.focusClass, cm = settings.markCalss; //插件的class变量 var z = settings.zIndex, newArr = mailArr = settings.mailArr; //创建邮件内部列表内容 $.createHtml = function(str, arr, cur){ var mailHtml = ""; if($.isArray(arr)){ $.each(arr, function(i, n){ if(i === cur){ mailHtml += '<div class="mailHover '+cf+'" id="mailList_'+i+'"><span class="'+cm+'">'+str+'</span>@'+arr[i]+'</div>'; }else{ mailHtml += '<div class="mailHover '+cl+'" id="mailList_'+i+'"><span class="'+cm+'">'+str+'</span>@'+arr[i]+'</div>'; } }); } return mailHtml; } //一些全局变量 var index = -1, s; $(this).each(function(){ var that = $(this), i = $(".justForJs").size(); if(i > 0){ //只绑定一个文本框 // return; 在当归使用中,因为有一个页面多处使用,所以去除此处代码 } var w = that.outerWidth()-2, h = that.outerHeight(); //获取当前对象(即文本框)的宽高 -2为左右边框, 根据页面中有无边框进行修改 //样式的初始化 that.wrap('<div style="position:relative;width:'+w+'px"></div>') .before('<div id="mailListBox_'+i+'" class="justForJs '+cb+'" style="min-width:'+w+'px;_width:'+w+'px;position:absolute;left:-6000px;top:'+h+'px;z-index:'+z+';"></div>'); var x = $("#mailListBox_"+i); //列表框对象 that.focus(function(){ //父标签的层级 $(this).parent().css("z-index", z); //键盘事件 $(this).keyup(function(e){ s = v = $.trim($(this).val()); if(/@/.test(v)){ s = v.replace(/@.*/, ""); } if(v.length > 0){ //如果按键是上下键 if(e.keyCode === 38){ //向上 if(index <= 0){ index = newArr.length; } index--; }else if(e.keyCode === 40){ //向下 if(index >= newArr.length - 1){ index = -1; } index++; }else if(e.keyCode === 13){ //回车 if(index > -1 && index < newArr.length){ //如果当前有激活列表 $(this).val($("#mailList_"+index).text()); } }else{ if(/@/.test(v)){ index = -1; //获得@后面的值 //s = v.replace(/@.*/, ""); //创建新匹配数组 var site = v.replace(/.*@/, ""); newArr = $.map(mailArr, function(n){ var reg = new RegExp(site); if(reg.test(n)){ return n; } }); }else{ newArr = mailArr; } } x.html($.createHtml(s, newArr, index)).css("left", 0); if(e.keyCode === 13){ //回车 if(index > -1 && index < newArr.length){ //如果当前有激活列表 x.css("left", "-6000px"); } } }else{ x.css("left", "-6000px"); } }).blur(function(){ $(this).unbind("keyup").parent().css("z-index",0); x.css("left", "-6000px"); }); //鼠标经过列表项事件 //鼠标经过 var liveValue; $(".mailHover").live("mouseover", function(){ index = Number($(this).attr("id").split("_")[1]); x.html($.createHtml(s, newArr, index)); liveValue = $("#mailList_"+index).text(); }); x.bind("mousedown", function(){ that.val(liveValue); }); }); }); } })(jQuery);
/* *表单验证,遍历form及引导 */ var ECForm = { index : 1, init : function() { if ($("form[inited!=true]").size() == 0) { return false; } $("form[inited!=true]").each(function() { var form = $(this); var id = "ecform" + ECForm.index++; form.attr("inited", true); if (!form.attr("id")) { form.attr("id", id); } else { id = form.attr("id"); } ECForm.validator(id); }); }, validator : function(id) { $("#" + id).Validform( { btnSubmit : ".uf_submit", tiptype : function(msg, o, cssctl) { // msg:提示信息; // o:{obj:*,type:*,curform:*}, // obj指向的是当前验证的表单元素(或表单对象),type指示提示的状态,值为1、2、3、4, // 1:正在检测/提交数据,2:通过验证,3:验证失败,4:提示ignore状态, // curform为当前form对象; // cssctl:内置的提示信息样式控制函数,该函数需传入两个参数:显示提示信息的对象 和 // 当前提示的状态(既形参o中的type); if (!o.obj.is("form")) {// 验证表单元素时o.obj为该表单元素,全部验证通过提交表单时o.obj为该表单对象; var objtip = o.obj.siblings(".Validform_checktip"); if (objtip.size() == 0) { objtip = o.obj.parent().parent().find( ".Validform_checktip"); } cssctl(objtip, o.type); objtip.text(msg); } } }); } } $(function() { ECForm.init(); })