有人知道如何在此页面上完成表单验证： https://donate.mozilla.org/page/contribute/the-mozilla-story?source=20111200_snippet_v1&WT_mc_id=story1
这是一个jquery插件或一些html5功能。我可以用吗？
答案 0 :(得分：1)
代码的快速概述表明它是一个自定义验证功能。如果有帮助，这就是它的样子。
document.getElementById("wsniceform").onsubmit = function()
{
// Validate the form inputs (make sure their name isn't 'First Name', etc)
if (formValidates())
{
if (document.getElementById("wscc_pp").checked)
{
document.getElementById("wscc_number").disabled = true;
document.getElementById("wscc_expir_month").disabled = true;
document.getElementById("wscc_expir_year").disabled = true;
}
else
{
document.getElementById("wscc_number").disabled = false;
document.getElementById("wscc_expir_month").disabled = false;
document.getElementById("wscc_expir_year").disabled = false;
}
document.getElementById("wsaddr2").value = document.getElementById("wsaddr2").value.replace(originalPlaceholder.wsaddr2, "");
// If it's not checked, nothing should be in the wsamount_other_value field
if (!document.getElementById("wsamount_other").checked)
document.getElementById("wsamount_other_value").value = "";
// webtrends tracking
dcsMultiTrack(
'DCS.dcssip', 'donate.mozilla.org',
'DCS.dcsuri', '/page/cde/Contribution/Charge',
'WT.ti', 'Link: Join Mozilla English Signup',
'WT.dl', 99,
'WT.z_convert', 'Join Mozilla English Signup',
'WT.si_n', 'Join Mozilla English Signup',
'WT.si_x', '2');
return true;
}
else
{
return false;
}
}
wsTest = {
/*
* Test for empty input. This is the only testing function that auto-trims input.
*/
IsEmpty: function(str)
{
if (str.replace(/\s*/g, "").length == 0)
return true;
return false;
},
/*
* Test for a valid email
*/
ValidEmail: function(str)
{
return (/^([\w\-\+]+)(\.[\w\-\+]+)*@([\w\-]+)(\.[\w\-]+)+$/.test(str));
},
/*
* Runs function when all images and DOM has loaded
*/
DOMOnLoaded: function(func)
{
if ((ws.Browser.isIE && !ws.Browser.isCSS3IE) || (ws.Browser.isCSS3IE && ws.Browser.isLegacyMode))
window.attachEvent("onload", wsOnLoad);
else if (document.addEventListener)
window.addEventListener("load", wsOnLoad, false);
else
window.setTimeout(func, 4000);
}
};
就jquery插件而言，我通常选择的是这一个 - ＆gt; Ĵquery tools validator
弹出模式本身是此处显示的另一个自定义函数 - ＆gt;
function wsSimpleDialog(title, text)
{
var bgElement = document.createElement("div");
bgElement.id = "d" + parseInt(Math.random() * 100000);
bgElement.style.position = "fixed";
try
{
bgElement.style.backgroundColor = "rgba(218, 236, 248, 0.8)";
}
catch(e)
{
bgElement.style.backgroundColor = "#daecf9"; // Fall back for IE
bgElement.style.filter = "alpha(opacity=80)";
}
bgElement.style.top = "0px";
bgElement.style.left = "0px";
bgElement.style.bottom = "0px";
bgElement.style.right = "0px";
bgElement.style.zIndex = "20000";
document.body.appendChild(bgElement);
msgElement = document.createElement("span");
msgElement.style.display = "inline-block";
msgElement.style.zIndex = "20001";
msgElement.id = "m" + bgElement.id
msgElement.style.position = "fixed";
msgElement.style.top = "50%";
msgElement.style.left = "50%";
msgElement.style.border = "1px solid #0079aa";
msgElement.style.borderRadius = "4px";
msgElement.style.MozBorderRadius = "4px";
msgElement.style.webkitBorderRadius = "4px";
msgElement.style.backgroundColor = "#0789bb";
msgElement.style.color = "#fff";
msgElement.style.padding = "16px";
msgElement.style.fontSize = "14px";
msgElement.style.lineHeight = "16px";
msgElement.style.visibility = "hidden";
msgElement.innerHTML = "<" + "strong style=\"display: block; text-align: center;\">" + title + "<" + "/strong>" + text + "<" + "a style=\"color: #fff; text-align: center; display: block; margin-top: 16px; font-size: 28px; line-height: 32px; font-family: 'LeagueGothicRegular',Impact,Charcoal,'Arial Narrow Bold',Arial,sans-serif\" href=\"#\" onclick=\"return wsCloseSimpleDialog('" + bgElement.id + "')\">OK<" + "/a>";
document.body.appendChild(msgElement);
msgElement.style.marginTop = (-1 * msgElement.offsetHeight / 2) + "px";
msgElement.style.marginLeft = (-1 * msgElement.offsetWidth / 2) + "px";
msgElement.style.visibility = "visible";
}