我的工作是创建竞赛表格并收集数据。 这些数据将由我们用来发送电子邮件的公司(例如 Mail chimp)收集。 该公司(通过其在线软件“事件指挥官”发送电子邮件视觉)已生成以下表格。 如您所见，它不验证验证码。 我需要什么代码才能使其在不离开表单的情况下验证验证码？ 该网站是用 PHP 开发的。 感谢您的帮助。 愿上帝保佑我们。 朱利安·P。
<html>
<head>
<title>Webform</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script language="javascript">
function isInteger(input,fieldName){
var i;
for(i=0;i<input.value.length;i++){
var c=input.value.charAt(i);
if(((c<'0')||(c>'9'))){
alert('The number in '+fieldName+' is not valid.');
input.focus();
return false;
}}
return true;
}
var dtCh='/';
var minYear=1900;
var maxYear=2100;
function isValidInteger(s){
var i;
for(i=0;i<s.length;i++){
var c=s.charAt(i);
if(((c<'0')||(c>'9'))) return false;
}
return true;
}
function stripCharsInBag(s,bag){
var i;
var returnString='';
for(i=0;i<s.length;i++){
var c=s.charAt(i);
if(bag.indexOf(c)==-1) returnString+=c;
}
return returnString;
}
function daysInFebruary(year){
return(((year%4==0)&&((!(year % 100 == 0))||(year%400==0)))?29:28);
}
function DaysArray(n){
for(var i=1;i<=n;i++){
this[i]=31;
if(i==4||i==6||i==9||i==11){this[i]=30;}
if(i==2){this[i]=29;}
}
return this;
}
function isDateOK(dtStr){
if(dtStr=='') return true;
var daysInMonth=DaysArray(12);
var pos1=dtStr.indexOf(dtCh);
var pos2=dtStr.indexOf(dtCh,pos1+1);
var strDay=dtStr.substring(0,pos1);
var strMonth=dtStr.substring(pos1+1,pos2);
var strYear=dtStr.substring(pos2+1);
strYr=strYear;
if(strDay.charAt(0)=='0'&&strDay.length>1) strDay=strDay.substring(1);
if(strMonth.charAt(0)=='0'&&strMonth.length>1) strMonth=strMonth.substring(1);
for(var i=1;i<=3;i++){
if(strYr.charAt(0)=='0'&&strYr.length>1) strYr=strYr.substring(1);
}
month=parseInt(strMonth);
day=parseInt(strDay);
year=parseInt(strYr);
if(pos1==-1||pos2==-1){
alert('The date format should be : dd/mm/yyyy.');
return false;
}
if(strMonth.length<1||month<1||month>12){
alert('Please enter a valid month.');
return false;
}
if(strDay.length<1||day<1||day>31||(month==2&&day>daysInFebruary(year))||day>daysInMonth[month]){
alert('Please enter a valid day.');
return false;
}
if(strYear.length!=4||year==0||year<minYear||year>maxYear){
alert('Please enter a valid 4 digit year between '+minYear+' and '+maxYear+'.');
return false;
}
if(dtStr.indexOf(dtCh,pos2+1)!=-1||isValidInteger(stripCharsInBag(dtStr,dtCh))==false){
alert('Please enter a valid date.');
return false;
}
return true;
}
function modifyDateFormat(dt){
var valuesTable=dt.value.split(dtCh);
dt.value=valuesTable[1]+dtCh+valuesTable[0]+dtCh+valuesTable[2];
}
function isEmail(emailAddress){
emailAddressValue=emailAddress.value.toLowerCase();
var countryTLDs=/^(ac|ad|ae|af|ag|ai|al|am|an|ao|aq|ar|as|at|au|aw|ax|az|ba|bb|bd|be|bf|bg|bh|bi|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cat|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|cr|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gd|ge|gf|gg|gh|gi|gl|gm|gn|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|im|in|io|iq|ir|is|it|je|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|mv|mw|mx|my|mz|na|nc|ne|nf|ng|ni|nl|no|np|nr|nu|nz|om|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|ps|pt|pw|py|qa|re|ro|rs|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$/;
var gTLDs=/^(aero|asia|biz|cat|com|coop|edu|geo|gov|info|int|jobs|mil|mobi|museum|name|net|org|post|pro|tel|travel)$/;
var basicAddress=/^(.+)@(.+)$/;
var specialChars='\\(\\)><@,;:\\\\\\\"\\.\\[\\]';
var validChars='\[^\\s'+specialChars+'\]';
var validCharset='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzöå0123456789\'-_.+';
var quotedUser='(\"[^\"]*\")';
var atom=validChars+'+';
var word='('+atom+'|'+quotedUser+')';
var validUser=new RegExp('^'+word+'(\.'+word+')*$');
var symDomain=new RegExp('^'+atom+'(\.'+atom+')*$');
var matchArray=emailAddressValue.match(basicAddress);
if(emailAddress.value==''||emailAddress==null){
return true;
}
if(matchArray==null){
alert('The Email address doesn\'t seem to be correct,\nplease check syntax.');
emailAddress.focus();
return false;
}else{
var user=matchArray[1];
var domain=matchArray[2];
for(i=0;i<user.length;i++){
if(validCharset.indexOf(user.charAt(i))==-1){
alert('The Email address contains invalid characters,\nplease check the username.');
emailAddress.focus();
return false;
}
}
for(i=0;i<domain.length;i++){
if(validCharset.indexOf(domain.charAt(i))==-1){
alert('The Email address contains invalid characters,\nplease check the domain.');
emailAddress.focus();
return false;
}
}
if(user.match(validUser)==null){
alert('The Email address doesn\'t seem to be correct,\nplease check the username.');
emailAddress.focus();
return false;
}
var atomPat=new RegExp('^'+atom+'$');
var domArr=domain.split('.');
var len=domArr.length;
for(i=0;i<len;i++){
if(domArr[i].search(atomPat)==-1){
alert('The Email address doesn\'t seem to be correct,\nplease check the domain name.');
emailAddress.focus();
return false;
}
}
if((domArr[domArr.length-1].length==2)&&(domArr[domArr.length-1].search(countryTLDs)==-1)){
alert('The Email address doesn\'t seem to be correct,\nplease check domain suffix.');
emailAddress.focus();
return false;
}
if((domArr[domArr.length-1].length>2)&&(domArr[domArr.length-1].search(gTLDs)==-1)){
alert('The Email address doesn\'t seem to be correct,\nplease check domain suffix.');
emailAddress.focus();
return false;
}
if((domArr[domArr.length-1].length<2)||(domArr[domArr.length-1].length>6)){
alert('The Email address doesn\'t seem to be correct,\nplease check domain suffix.');
emailAddress.focus();
return false;
}
if(len<2){
alert('The Email address doesn\'t seem to be correct,\nplease check missing hostname.');
emailAddress.focus();
return false;
}
}
return true;
}
function mandatoryCheckBox(checkBox,fieldName){
var nbcheck=0;
if(checkBox.length==undefined){
if(checkBox.checked){ nbcheck++; }
}else{
for (counter=0;counter<checkBox.length;counter++){
if(checkBox[counter].checked){ nbcheck++; }
}
}
if(nbcheck==0){
alert('Please select your '+fieldName+'.');
return false;
}
return true;
}
function mandatoryDropDown(dropDown,fieldName){
if(dropDown.options[dropDown.options.selectedIndex].value == ""){
alert('Please select your '+fieldName+'.');
dropDown.focus();
return false;
}
return true;
}
String.prototype.trim = function() { return this.replace(/^\s*(\b.*\b|)\s*$/, "$1"); }
function mandatoryText(input,fieldName){
if(input.value.trim()==''||input==null){
alert('Please enter your '+fieldName+'.');
input.focus();
return false;
} else {
return true;
}
}
function validForm(){
if(!mandatoryText(document.getElementById('FIRSTNAME_FIELD'), 'First name')) return;
if(!mandatoryText(document.getElementById('LASTNAME_FIELD'), 'Surname')) return;
if(!mandatoryText(document.getElementById('DATEOFBIRTH_FIELD'), 'Date of birth')) return;
if(!isDateOK(document.getElementById('DATEOFBIRTH_FIELD').value)) return;
if(!mandatoryText(document.getElementById('EMAIL_FIELD'), 'Email')) return;
if(!isEmail(document.getElementById('EMAIL_FIELD'))) return;
if(!mandatoryText(document.getElementById('EMVCELLPHONE_FIELD'), 'Mobile')) return;
if(!isInteger(document.getElementById('EMVCELLPHONE_FIELD'), 'Mobile')) return;
if(!mandatoryDropDown(document.getElementById('STORE_NAME_FIELD'), 'Nearest shop')) return;
if(!mandatoryCheckBox(document.getElementById('emvForm').OPTIN_FIELD, 'Opt in to marketing emails')) return;
if(document.getElementById('DATEOFBIRTH_FIELD').value!='') modifyDateFormat(document.getElementById('DATEOFBIRTH_FIELD'));
document.getElementById('emvForm').submit();
if(document.getElementById('DATEOFBIRTH_FIELD').value!='') modifyDateFormat(document.getElementById('DATEOFBIRTH_FIELD'));
}
</script>
</head>
<body>
<form name="emvForm" id="emvForm" action="http://tre.emv3.com/D2UTF8" method="POST" target="_top">
<input type="hidden" name="emv_tag" value="876020001C384269" />
<input type="hidden" name="emv_ref" value="EdX7CqkdLe_d8SA9MOPQNCffL0p6Hq3D-jmueKEyWsbQKbo" />
<table>
<tr>
<td>
First name
</td>
<td>
<input type="text" id="FIRSTNAME_FIELD" name="FIRSTNAME_FIELD" value="" size="30" maxlength="64">
</td>
</tr>
<tr>
<td>
Surname
</td>
<td>
<input type="text" id="LASTNAME_FIELD" name="LASTNAME_FIELD" value="" size="30" maxlength="64">
</td>
</tr>
<tr>
<td>
Date of birth
</td>
<td>
<input type="text" id="DATEOFBIRTH_FIELD" name="DATEOFBIRTH_FIELD" value="" size="30" maxlength="64">
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="text" id="EMAIL_FIELD" name="EMAIL_FIELD" value="" size="30" maxlength="64">
</td>
</tr>
<tr>
<td>
Mobile
</td>
<td>
<input type="text" id="EMVCELLPHONE_FIELD" name="EMVCELLPHONE_FIELD" value="" size="30" maxlength="64">
</td>
</tr>
<tr>
<td>
Nearest shop
</td>
<td>
<select id="STORE_NAME_FIELD" name="STORE_NAME_FIELD">
<option selected value=""></option>
<option value="Aberdeen ">Aberdeen </option>
<option value="Acton ">Acton </option>
<option value="Aldgate ">Aldgate </option>
<option value="Ashford ">Ashford </option>
<option value="Aylesbury ">Aylesbury </option>
<option value="Baker Street ">Baker Street </option>
<option value="Balham ">Balham </option>
<option value="Ballymena ">Ballymena </option>
<option value="Barnet ">Barnet </option>
<option value="Beckenham ">Beckenham </option>
<option value="Belfast ">Belfast </option>
<option value="Bethnal Green ">Bethnal Green </option>
<option value="Bexleyheath ">Bexleyheath </option>
<option value="Biggleswade ">Biggleswade </option>
<option value="Birmingham ">Birmingham </option>
<option value="Birmingham New Street ">Birmingham New Street </option>
<option value="Bishopsgate ">Bishopsgate </option>
<option value="Bond Street ">Bond Street </option>
<option value="Bromley ">Bromley </option>
<option value="Camberwell ">Camberwell </option>
<option value="Cambridge ">Cambridge </option>
<option value="Camden Town ">Camden Town </option>
<option value="Chelmsford ">Chelmsford </option>
<option value="Chelsea ">Chelsea </option>
<option value="Cheltenham ">Cheltenham </option>
<option value="Chester ">Chester </option>
<option value="Chiswick ">Chiswick </option>
<option value="Clacton-on-Sea ">Clacton-on-Sea </option>
<option value="Clapham High Street ">Clapham High Street </option>
<option value="Clapham Junction ">Clapham Junction </option>
<option value="Colchester ">Colchester </option>
<option value="Coleraine ">Coleraine </option>
<option value="Covent Garden ">Covent Garden </option>
<option value="Coventry ">Coventry </option>
<option value="Cricklewood ">Cricklewood </option>
<option value="Crouch End ">Crouch End </option>
<option value="Croydon ">Croydon </option>
<option value="Dalston ">Dalston </option>
<option value="Ealing ">Ealing </option>
<option value="Earls Court ">Earls Court </option>
<option value="Edgware ">Edgware </option>
<option value="Exeter ">Exeter </option>
<option value="Farringdon ">Farringdon </option>
<option value="Fleet Street ">Fleet Street </option>
<option value="Fulham ">Fulham </option>
<option value="Glasgow ">Glasgow </option>
<option value="Godalming ">Godalming </option>
<option value="Golders Green ">Golders Green </option>
<option value="Guildford ">Guildford </option>
<option value="Hackney ">Hackney </option>
<option value="Hammersmith ">Hammersmith </option>
<option value="Hampstead ">Hampstead </option>
<option value="Highbury ">Highbury </option>
<option value="Holborn ">Holborn </option>
<option value="Ipswich ">Ipswich </option>
<option value="Angel ">Angel </option>
<option value="Kensington ">Kensington </option>
<option value="Kentish Town ">Kentish Town </option>
<option value="Kilburn ">Kilburn </option>
<option value="Kings Lynn ">Kings Lynn </option>
<option value="Kingston ">Kingston </option>
<option value="Knightsbridge ">Knightsbridge </option>
<option value="Leadenhall Market ">Leadenhall Market </option>
<option value="Lewisham ">Lewisham </option>
<option value="Lisburn ">Lisburn </option>
<option value="Lincoln ">Lincoln </option>
<option value="Londonderry ">Londonderry </option>
<option value="Luton ">Luton </option>
<option value="Maidenhead ">Maidenhead </option>
<option value="Maidstone ">Maidstone </option>
<option value="Mansion House ">Mansion House </option>
<option value="Marble Arch ">Marble Arch </option>
<option value="Marlow ">Marlow </option>
<option value="Marylebone ">Marylebone </option>
<option value="Mayfair ">Mayfair </option>
<option value="Milton Keynes ">Milton Keynes </option>
<option value="Muswell Hill ">Muswell Hill </option>
<option value="Newbury ">Newbury </option>
<option value="Northampton ">Northampton </option>
<option value="Norwich ">Norwich </option>
<option value="Notting Hill Gate ">Notting Hill Gate </option>
<option value="Oxford ">Oxford </option>
<option value="Peckham ">Peckham </option>
<option value="Peterborough ">Peterborough </option>
<option value="Pimlico ">Pimlico </option>
<option value="Portobello ">Portobello </option>
<option value="Putney ">Putney </option>
<option value="Queensway ">Queensway </option>
<option value="Reading ">Reading </option>
<option value="Richmond ">Richmond </option>
<option value="Romford ">Romford </option>
<option value="Shepherds Bush ">Shepherds Bush </option>
<option value="Slough ">Slough </option>
<option value="Soho ">Soho </option>
<option value="South Kensington ">South Kensington </option>
<option value="Southend ">Southend </option>
<option value="St Johns Wood ">St Johns Wood </option>
<option value="Staines ">Staines </option>
<option value="Streatham ">Streatham </option>
<option value="Surbiton ">Surbiton </option>
<option value="Sutton ">Sutton </option>
<option value="Swiss Cottage ">Swiss Cottage </option>
<option value="Sydenham ">Sydenham </option>
<option value="Tooting ">Tooting </option>
<option value="Tottenham Court Road ">Tottenham Court Road </option>
<option value="Tunbridge Wells ">Tunbridge Wells </option>
<option value="Twickenham ">Twickenham </option>
<option value="Uxbridge ">Uxbridge </option>
<option value="Victoria ">Victoria </option>
<option value="Walthamstow ">Walthamstow </option>
<option value="Walworth Road ">Walworth Road </option>
<option value="Wandsworth ">Wandsworth </option>
<option value="Watford ">Watford </option>
<option value="Welwyn Garden City ">Welwyn Garden City </option>
<option value="Westminster ">Westminster </option>
<option value="Wimbledon ">Wimbledon </option>
<option value="Windsor ">Windsor </option>
<option value="Wokingham ">Wokingham </option>
<option value="Wood Green ">Wood Green </option>
<option value="Woolwich ">Woolwich </option>
</select>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="hidden" id="STORE_EMAIL_FIELD" name="STORE_EMAIL_FIELD" value="">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="hidden" id="WEB_HOME_FIELD" name="WEB_HOME_FIELD" value="">
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="hidden" id="SOURCE_FIELD" name="SOURCE_FIELD" value="St Petes">
</td>
</tr>
<tr>
<td>
Opt in to marketing emails
</td>
<td>
<input type="checkbox" id="OPTIN_FIELD" name="OPTIN_FIELD" value="true">
</td>
</tr>
<tr>
<td style="border:1px solid red">
<img id="captcha" src="/maininc/securimage/securimage_show.php" alt="CAPTCHA Image" />
</td>
<td>
<input type="text" name="captcha_code" size="10" maxlength="6" />
<a href="#" onclick="document.getElementById('captcha').src = '/maininc/securimage/securimage_show.php?' + Math.random(); return false">[ Different Image ]</a>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Submit Form" onClick="javascript:validForm();">
</td>
</tr>
</table>
</form>
</body>
</html>
最佳答案
验证验证码没有在客户端完成有几个很好的理由:
- 客户端可以禁用 JS
- 用户可以看到您发送给客户端的任何代码，因此机器人很快就会获取验证码内容并向您的网站发送垃圾邮件
- 仅靠 JS 验证永远是不够的
如果您粘贴的代码实际上是公司“销售”的代码，请寻找其他 vendor (老实说，这是糟糕的代码)。
您可以在不提交表单的情况下验证验证码的唯一方法是发送AJAX请求，但要小心!这意味着机器人可以随意尝试随机字符串，每次发送请求并立即获得反馈，而无需发送除验证码之外的任何其他数据。
是的，验证码很烦人，很烦人，是的，它们会破坏用户体验，是的，它们会激怒我们所有人，但它们是必要的邪恶。只需保留验证码不变，将其与表单一起发送，并希望您的用户能够弄清楚它们。
关于javascript - 如何在在线表单中验证验证码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13650302/