Question

我正在使用Jquery的远程方法来检查用户名是否已经存在，但我想使用Angular js验证它。使用Jquery进行验证的代码是

 $("#registration-form").validate({
    rules: {
           'username': {
            required: true,
            minlength: 3,
            maxlength: 20,
            alphanumeric: true,
            remote: "/users/checkusername"
        },
     }
   });

我是Angular js的新手。任何相关链接都会有所帮助。

Answer 1

HTML

<input type="text" name="username" ng-model="username" 
ng-pattern="/^[a-zA-Z0-9]{4,10}$/" ng-unique="tableDB.userDBField" />

AngularJS

directive('ngUnique', ['$http', function (async) {
  return {
    require: 'ngModel',
    link: function (scope, elem, attrs, ctrl) {
      elem.on('blur', function (evt) {
        scope.$apply(function () {
      var val = elem.val();
      var req = { "username":val, "dbField":attrs.ngUnique }
      var ajaxConfiguration = { method: 'POST', url: 'backendServices/checkUsername.php', data: req };
      async(ajaxConfiguration)
        .success(function(data, status, headers, config) {
          ctrl.$setValidity('unique', data.status);
            });
          });
        });
      }
    }
  }
]);

查看完整文档Form Validation: The AngularJS Way

Answer 2

我在AngularJS和jQuery Validation Plugin之间创建了一个桥梁。它使您能够在控制器内定义验证选项（规则，消息等），因此您不必为每个表单或规则创建新指令。

试一试：https://github.com/jpkleemans/angular-validate。反馈非常感谢！

Answer 3

以下网址将为您提供使用angular进行表单验证的分步指南，根本不必使用JQuery。

http://scotch.io/tutorials/javascript/angularjs-form-validation

如何在表单验证中使用Angular应用远程jquery方法？

3 个答案: