AngularJS：与服务器端验证集成 [英] AngularJS: integrating with server-side validation

问题描述

我有一个包含从实例所保存按钮的角度应用：

I have an angular app that contains a save button taken from the examples:

<button ng-click="save" ng-disabled="form.$invalid">SAVE</button>

这伟大工程客户端验证，因为的形式。$无效为用户解决问题变成假的，但我有设置无效的，如果其他用户注册的电子邮件领域用相同的电子邮件。

This works great for client side validation because form.$invalid becomes false as user fixes problems, but I have an email field which is set invalid if another user is registered with same email.

当我把我的电子邮件领域无效的，我不能提交表单，用户没有办法解决这个验证错误。所以，现在我可以不再使用的形式。$无效禁用我的提交按钮。

As soon as I set my email field invalid, I cannot submit the form, and the user has no way to fix that validation error. So now I can no longer use form.$invalid to disable my submit button.

必须有一个更好的办法

推荐答案

我需要在这几个项目，所以我创建了一个指令。最后花了点时间来把它挂在GitHub上的人谁想要一个插入式解决方案。

I needed this in a few projects so I created a directive. Finally took a moment to put it up on GitHub for anyone who wants a drop-in solution.

<一个href=\"https://github.com/webadvanced/ng-remote-validate\">https://github.com/webadvanced/ng-remote-validate

特点：

• 下滑解决方案的任何文本或密码输入的Ajax验证

• Drop in solution for Ajax validation of any text or password input

工程与Angulars建立验证和出租车在formName.inputName。$ error.ngRemoteValidate

Works with Angulars build in validation and cab be accessed at formName.inputName.$error.ngRemoteValidate

节流服务器请求（默认400毫秒），可以用 NG-远程油门设置=550

Throttles server requests (default 400ms) and can be set with ng-remote-throttle="550"

允许HTTP方法定义（默认POST）与 NG-远程方法=GET

Allows HTTP method definition (default POST) with ng-remote-method="GET"

用法示例为，要求用户输入他们的当前密码和新密码更改密码方式：

Example usage for a change password form that requires the user to enter their current password as well as the new password.:

<h3>Change password</h3>
<form name="changePasswordForm">
    <label for="currentPassword">Current</label>
    <input type="password" 
           name="currentPassword" 
           placeholder="Current password" 
           ng-model="password.current" 
           ng-remote-validate="/customer/validpassword" 
           required>
    <span ng-show="changePasswordForm.currentPassword.$error.required && changePasswordForm.confirmPassword.$dirty">
        Required
    </span>
    <span ng-show="changePasswordForm.currentPassword.$error.ngRemoteValidate">
        Incorrect current password. Please enter your current account password.
    </span>

    <label for="newPassword">New</label>
    <input type="password"
           name="newPassword"
           placeholder="New password"
           ng-model="password.new"
           required>

    <label for="confirmPassword">Confirm</label>
    <input ng-disabled=""
           type="password"
           name="confirmPassword"
           placeholder="Confirm password"
           ng-model="password.confirm"
           ng-match="password.new"
           required>
    <span ng-show="changePasswordForm.confirmPassword.$error.match">
        New and confirm do not match
    </span>

    <div>
        <button type="submit" 
                ng-disabled="changePasswordForm.$invalid" 
                ng-click="changePassword(password.new, changePasswordForm);reset();">
            Change password
        </button>
    </div>
</form>

这篇关于AngularJS：与服务器端验证集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！