空电话号码如何进入我的 JavaScript .length 受限表单字段？
Posted
技术标签:
【中文标题】空电话号码如何进入我的 JavaScript .length 受限表单字段？【英文标题】：How are null telephone numbers getting into my JavaScript .length restricted form field? 【发布时间】：2014-10-16 19:24:01 【问题描述】：我觉得我有可能是浏览器特定的问题？如果有人有任何见解，我们将不胜感激。
我有一些基于长度限制表单输入值的 javascript。形式为竞赛，竞赛网站于今早上线。到目前为止，我们已经收到了 100 多个条目。一切都按预期进行，除了电话号码列偶尔会输入 Null 值（100 个中有 5 个是 Null）。
问题是我无法重现错误。这是限制电话字段的表单输入值的javascript：
首先，我将值的输入限制为仅像这样的数字：
// js
function numbersOnlyInput (evt)
var charCode = (evt.which) ? evt.which : evt.keyCode;
if ( charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57) )
return false;
return true;
<!-- html -->
<input class="contact-input" name="telephone" type="text" id="telephone" placeholder="Téléphone" onkeypress="return numbersOnlyInput(event)" ng-click="userInfoFormBlock_AllQuestions()" />
其次，我有一个 on submit 函数，它将这个输入的值限制为 10 的长度：
// extracted from on submit js function
var prenom = $('#prenom').val(),
nom = $('#nom').val(),
email = $('#email').val(),
adresse = $('#adresse').val(),
postal = $('#postal').val(),
ville = $('#ville').val(),
ticket = $('#ticket option:selected').text(),
telephone = $('#telephone').val(),
eula = $('#eula').prop('checked');
if ( $('#eula').prop('checked') == false
|| email.indexOf('@') == -1
|| email.indexOf('.') == -1
|| postal.length != 5
|| telephone.length != 10
|| prenom == ""
|| prenom == " "
|| prenom == null
|| nom == ""
|| nom == " "
|| nom == null
|| adresse == ""
|| adresse == " "
|| adresse == null
|| ville == ""
|| ville == " "
|| ville == null)
// reset contest rules checkbox
$('#eula').prop('checked', false);
// empty popup
$('#form-popup-text').html('');
var showFormPopup = false;
if ( prenom == "" || prenom == " " || prenom == null )
$('#prenom').css('background', "#B20000");
$('#form-popup-text').append("<p>Prénom* - Le champ prénom est vide</p>");
showFormPopup = true;
else
$('#prenom').css('background', "#3a3a3a");
if ( nom == "" || nom == " " || nom == null )
$('#nom').css('background', "#B20000");
$('#form-popup-text').append("<p>Nom* - Le champ nom est vide</p>");
showFormPopup = true;
else
$('#nom').css('background', "#3a3a3a");
if ( email.indexOf('@') == -1 || email.indexOf('.') == -1 )
$('#email').css('background', "#B20000");
$('#form-popup-text').append("<p>Email* - L'adresse mail ne semble pas valide</p>");
showFormPopup = true;
else
$('#email').css('background', "#3a3a3a");
if ( adresse == "" || adresse == " " || adresse == null )
$('#adresse').css('background', "#B20000");
$('#form-popup-text').append("<p>Adresse* - Le champ adresse est vide</p>");
showFormPopup = true;
else
$('#adresse').css('background', "#3a3a3a");
if ( ville == "" || ville == " " || ville == null )
$('#ville').css('background', "#B20000");
$('#form-popup-text').append("<p>Ville* - Le champ ville est vide</p>");
showFormPopup = true;
else
$('#ville').css('background', "#3a3a3a");
if ( postal.length != 5 )
$('#postal').css('background', "#B20000");
$("#form-popup-text").append("<p>Code postal* - Le code postal doit contenir 5 chiffres</p>");
showFormPopup = true;
else
$('#postal').css('background', "#3a3a3a");
if ( telephone.length != 10 )
$("#telephone").css('background', "#B20000");
$("#form-popup-text").append("<p>Téléphone* - Le numéro de téléphone doit contenir 10 chiffres</p>");
showFormPopup = true;
else
$('#telephone').css('background', "#3a3a3a");
if ( $('#eula').prop('checked') == false )
$("#form-popup-text").append("<p>Vous devez accepter les modalités du concours</p>");
showFormPopup = true;
if(showFormPopup)
$('#form-popup-wrapper').show();
$scope.showVideoOverlay = true;
userInfoFormComplete();
else
// post to database
$http.post("data/save.php",
'name': $scope.name,
'family_name': $scope.familyName,
'email': $scope.email,
'address': $scope.address,
'city': $scope.ville,
'postal_code': $scope.postalCode,
'telephone': $scope.telephone,
'event_ticket': $scope.ticket,
'mailing_list': $scope.mailingList,
'score': $scope.correctAnswers,
'perfect_score': perfectScore,
'answer1': $scope.answer[0],
'answer2': $scope.answer[1],
'answer3': $scope.answer[2],
'answer4': $scope.answer[3],
'answer5': $scope.answer[4],
'answer6': $scope.answer[5],
'answer7': $scope.answer[6],
'answer8': $scope.answer[7],
'answer9': $scope.answer[8]
).success( function (data, status, headers, config)
//console.log("Database updated successfully");
).error( function (data, status, headers, config)
console.log(data);
console.log(status);
console.log(headers);
console.log(config);
);
$scope.formSubmitted = true;
所以！任何人都知道电话字段的 5 个空值（100 条记录）是如何发布到数据库的？其他一切似乎都运行良好，由于我无法在 Chrome、Firefox、IE 11 或 Safari 中重现该错误，我假设它一定是与旧浏览器的某种向后兼容性？
我假设这些有问题的浏览器正在检查值的长度并获得undefined、null 或NaN 的长度，因为它不是整数，所以通过了我的验证？不过这只是猜测。
想法？
编辑：哦，我想错误可能在服务器端接收字段并将它们插入数据库。这是发布到 SQL 的 PHP 代码：
$telephone = utf8_decode( mysql_real_escape_string($data->telephone) );
mysql_query(
"INSERT INTO contest
(prenom,
nom,
email,
adresse,
ville,
code_postal,
telephone,
event_ticket,
mailing_list,
score,
perfect_score,
answer_1,
answer_2,
answer_3,
answer_4,
answer_5,
answer_6,
answer_7,
answer_8,
answer_9)
VALUES
('$name',
'$familyName',
'$email',
'$address',
'$city',
'$postal',
'$telephone',
'$ticket',
'$mailingList',
'$score',
'$perfectScore',
'$answer1',
'$answer2',
'$answer3',
'$answer4',
'$answer5',
'$answer6',
'$answer7',
'$answer8',
'$answer9')"
);
问题可能出在转义数据上吗？
【问题讨论】：
只是一个想法，可能是网络爬虫或有人在弄乱您的系统。您永远不能相信从网络上发布的内容，并且可能应该再次检查帖子上的所有内容，因为人们可以使用工具或编写自己的应用程序来发布他们想要发布的任何内容，甚至无需访问您的页面。 嗯，我不明白它怎么可能是刮板。表格中有很多价值，因为比赛本身就是一个有很多问题的琐事游戏。没有验证码，但机器人抓取工具必须非常好才能完成游戏并达到最终形式 【参考方案1】：您的访问者是否有可能只是禁用了脚本，从而允许他们绕过您的 javascript？
此外，正如其他人所提到的，您可能会收到来自爬虫/机器人/等的访问。您可以尝试查看navigator.userAgent，了解有关访问者浏览器/设备的更多信息。
【讨论】：
鉴于它是一个 angularjs 项目，他们在游戏中的发展还远远不够，因为脚本被禁用以到达用户联系表以上是关于空电话号码如何进入我的 JavaScript .length 受限表单字段？的主要内容，如果未能解决你的问题，请参考以下文章
如何从 html / javascript 调用 MainViewController.h 方法？ （IOS 电话间隙）