本文介绍了一个简单的表单验证示例，包括表单验证、邮箱提示和头像更换等功能。利用 jQuery 插件实现了表单验证逻辑，并通过自定义提示框展示了验证结果。此外，还介绍了如何使用 mailAutoComplete 插件实现邮箱输入提示。
页面是简单用个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)" onclick="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();
})
扫一扫
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
