点击按钮验证Captcha AngularJS

Question

在我的应用程序中，captcha必须仅使用按钮进行验证。我试过了，但当我输入错误的验证码时，提交到数据库中的表格后来显示验证码无效，但表格已经提交。

我想通过点击按钮来验证，如果我输入了错误的captcha，表单就不应该提交。请看我的小提琴，帮我解决这个问题，提前谢谢。

$scope.submit = function() {
  alert("hiiiiii");
  var string1 = removeSpaces($scope.mainCaptcha);
  var string2 = removeSpaces($scope.c);
  if (string1 == string2) {
    alert(true);
  } else {
    alert(false);
  }
  var _EeqObj = new Object();
  _EeqObj.Name = $("#Name").val();
  _EeqObj.Verification_Code = $("#txtInput").val();
  _EeqObj.Meth = "WX";
  var httpreq = $http({
    method: 'POST',
    url: "api/Home",
    data: _EeqObj
  }).success(function(response) {
    if (response == "success") {
      alert("Thank You");
    } else {
      alert("not inserted");
    }
  });
}

https://jsfiddle.net/6jqmv68d/2/

Answer 1

submit()无论验证码是否正确都会提交表单，因此当输入错误的验证码时，您需要退出/返回submit()模块并显示警告消息。

JS代码：

if (string1 == string2) {
    alert(true);
}
else {
    alert("Wrong captcha, please re enter and submit again");
    return;
}

注意：我个人不喜欢使用任何带有angularjs的第三方库，因为这是一种过度杀伤，在您的情况下，不要使用jquery获取DOM数据，而是使用ng-model来定义模型并在控制器中引用该模型

使用ng模型而不是jquery DOM遍历

 _EeqObj.Name = $scope.Name;
 _EeqObj.Verification_Code = $scope.c;

工作演示@JSFiddle

Answer 2

在显示错误的captcha消息后，您需要return false，因为ng-submit不会验证任何自定义的无效数据或无效字段。

if (string1 == string2) {
    alert(true);
} else {
    alert(false);
    return false;
}