AngularJS：与服务器端验证集成

发布时间：2020-12-17 09:00:16 所属栏目：安全来源：网络整理

导读：我有一个有角度的应用程序，其中包含一个保存按钮从示例： button ng-click="save" ng-disabled="form.$invalid"SAVE/button 这对于客户端验证非常有效，因为用户修复问题时，$。invalid变为false，但是我有一个电子邮件字段，如果另一个用户使用相同的电子

我有一个有角度的应用程序，其中包含一个保存按钮从示例：

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

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

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

必须有一个更好的方法

我需要这个在几个项目，所以我创建了一个指令。最后花了一点时间把它放在GitHub上为任何想要一个drop-in解决方案。

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

特征：

>删除任何文本或密码输入的Ajax验证的解决方案
>使用Angulars构建验证和cab可以访问formName.inputName $ error.ngRemoteValidate
> Throttles服务器请求(默认400毫秒)，可以使用ng-remote-throttle =“550”
>允许使用ng-remote-method =“GET”的HTTP方法定义(默认POST)

需要用户输入其当前密码以及新密码的更改密码表单的用法示例：

<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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!