在AngularJS中的表单验证和提交
在AngularJS中的表单验证和提交
我有一个HTML文件:
以及我有一个控制器:
$scope.resetPasswordRequest = function(){ //只有在表单验证通过时才处理逻辑 if($scope.resetPasswordForm.$valid){ //一些逻辑 } }
使用上述表单,我可以验证表单密码字段的最小长度、最大长度、是否为空,但是密码和重新输入密码数据匹配的情况存在问题。
密码不匹配
即使密码和重新输入密码的数据不匹配,表单也会被提交并调用控制器函数并处理控制器逻辑。
但是,如果表单中缺少任何验证,那么密码和重新输入密码的数据匹配情况就会起作用,如果没有任何验证(最小长度、最大长度、是否为空),则密码和重新输入密码的数据匹配情况就不起作用。
我如何在没有外部指令的情况下验证表单密码和重新输入密码的数据匹配情况,就像验证最小长度、最大长度属性一样。
在AngularJS中,当我们需要验证两个密码字段是否匹配时,可以创建一个简单的指令。通过该指令返回的结果,我们可以设置第二个密码字段的有效性。
首先,我们在HTML中定义了两个密码输入框,分别用ng-model指令绑定到password1和password2变量上,并添加了required属性来确保这两个输入框不能为空。
然后,在JS中创建了一个名为checkPasswords的指令。该指令通过require属性指定它依赖于ngModel指令,这样我们可以在link函数中获取到ngModelController实例,以便对密码字段进行验证。
在link函数中,我们通过attributes参数获取到check-passwords属性的值,即password1。然后将第一个密码输入框的选择器与第二个密码输入框的选择器一起绑定在keyup事件上,当两个密码输入框的值发生变化时,执行回调函数。
在回调函数中,我们使用scope.$apply方法来将函数的执行上下文变更为AngularJS的作用域。然后,我们通过element.val()获取到第二个密码输入框的值,通过$(firstPwd).val()获取到第一个密码输入框的值,判断两个值是否相等。
最后,我们使用ctrl.$setValidity方法来设置ngModelController实例的有效性。如果两个密码值相等,我们将'pwdsMatch'设置为true,否则设置为false。
通过以上的代码,我们实现了一个简单的指令来验证两个密码字段是否匹配。在HTML中,我们可以使用ng-show指令结合'pwdsMatch'来显示或隐藏密码不匹配的提示信息。
谢谢你的建议,我希望能够在不使用指令的情况下验证密码和重新输入密码,如果有相关的方法对我有用,我会很感谢。