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

问题描述

我有一个 angular 应用程序，其中包含一个来自示例的保存按钮:

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

这对客户端验证非常有用，因为 form.$invalid 在用户修复问题时变为 false，但我有一个电子邮件字段，如果另一个用户使用相同的电子邮件注册，该字段将设置为无效.

一旦我将电子邮件字段设置为无效，我就无法提交表单，并且用户无法修复该验证错误.所以现在我不能再使用 form.$invalid 来禁用我的提交按钮.

一定有更好的方法

解决方案

我在一些项目中需要这个，所以我创建了一个指令.终于花点时间把它放在 GitHub 上，供任何想要插入式解决方案的人使用.

https://github.com/webadvanced/ng-remote-validate

特点:

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

• 使用 Angulars 内置验证和 cab 访问 formName.inputName.$error.ngRemoteValidate

• 限制服务器请求(默认 400 毫秒)并且可以使用 ng-remote-throttle="550"

进行设置

• 允许使用 ng-remote-method="GET"

定义 HTTP 方法(默认 POST)

更改密码表单的示例用法，要求用户输入当前密码和新密码.:

更改密码
<表单名称="changePasswordForm"><label for="currentPassword">Current</label><输入类型=密码"名称=当前密码"占位符=当前密码"ng-model="password.current"ng-remote-validate="/customer/validpassword"需要><span ng-show="changePasswordForm.currentPassword.$error.required &&changePasswordForm.confirmPassword.$dirty">必需的</span><span ng-show="changePasswordForm.currentPassword.$error.ngRemoteValidate">当前密码不正确.请输入您当前的帐户密码.</span><label for="newPassword">New</label><输入类型=密码"名称=新密码"占位符=新密码"ng-model="password.new"需要><label for="confirmPassword">确认</label><输入 ng-disabled=""类型=密码"名称=确认密码"占位符="确认密码"ng-model="password.confirm"ng-match="password.new"需要><span ng-show="changePasswordForm.confirmPassword.$error.match">新建和确认不匹配</span><div><按钮类型=提交"ng-disabled="changePasswordForm.$invalid"ng-click="changePassword(password.new, changePasswordForm);reset();">更改密码

</表单>

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.

There must be a better way

解决方案

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.

https://github.com/webadvanced/ng-remote-validate

Features:

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

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

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

• 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屋！