![与服务器端验证集成]( "与服务器端验证集成")
本文介绍了AngularJS:与服务器端验证集成的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个 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"
更改密码表单的示例用法，要求用户输入当前密码和新密码.:
更改密码
<表单名称="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:与服务器端验证集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！