带头像、邮箱提醒、ajax验证的form表单

页面是简单用个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="data: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="请选择性别"/>保密&nbsp;<input type="radio" name="input_radio" class="input_radio" datatype="*" errormsg="请选择性别"/>男&nbsp;<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">修&nbsp;&nbsp;改</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 selectif (!(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);">&chi;</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();
})

带头像、邮箱提醒、ajax验证的form表单相关推荐

php ajax form表单提交,Ajax方法实现Form表单提交的方法
这次给大家带来Ajax方法实现Form表单提交的方法,Ajax方法实现Form表单提交的注意事项有哪些,下面就是实战案例,一起来看一下. 写在前面的话在使用form表单的时候,一旦点击提交触发sub ...
使用ajax方法实现form表单的提交
2019独角兽企业重金招聘Python工程师标准>>> 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控 ...
ajax post form上传图片,ajax怎样提交form表单与实现文件上传
这次给大家带来ajax怎样提交form表单与实现文件上传,ajax提交form表单与实现文件上传的注意事项有哪些,下面就是实战案例,一起来看一下. 前几天,发现了一些小问题.我在写后台管理页面时,需要 ...
前后端交互之使用ajax方法实现form表单的提交
转载于:使用ajax方法实现form表单的提交 - 程序员十三 - 博客园 (cnblogs.com) οnsubmit="reutrn false":表示禁止表单提交. dat ...
使用ajax方法实现form表单的提交（Ajax和from提交的区别）
写在前面的话在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
ajax提交，form表单提交，onsubmit=return checksubmit()提交验证
Ajax提交的两种方式: 一是url参数提交数据, 二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交一.Url参数提交数据 ...
ajax提交整个form表单
在项目开发中,有时提交form表单时不能单单用action或者jquery的表单提交方法有三种,主要说下第三种第一种:用form自带属性action提交第二种:用jquery提交:$(" ...
微信ajax异步提交form表单,ajax异步提交表单
前面我们一直谈 wojilu ajax framework ,已经表明了它是一个 ajax 框架.但其实客户端验证等内容几乎不涉及到 ajax 操作. 下面我们就着重看下这个框架ajax操作方面. 其 ...
html页面ajax提交数据,ajax请求提交form表单
AJAX表单提交以及数据接收方式一手工收集所有的用户输入,封装为大的"k1=v1&k2=v2-"键值对形式,使用$.post(url, data,fn)把数据提交给服务 ...

带头像、邮箱提醒、ajax验证的form表单

带头像、邮箱提醒、ajax验证的form表单相关推荐

最新文章

热门文章