[英]How can I validate a input depending another input angularJS?
我在验证表格时遇到问题。 这是更改注册用户密码,个人资料图片和他的传记的一种形式。 在那种形式中,首先不需要密码,但是当有人写旧密码时,表单需要新密码和确认密码。 我通过一个例子展示。
现在不是必需的,但是如果我在旧密码的输入中写了一些内容,则需要新密码和确认密码变为红色。 我拥有的代码是:
<div class="form-group">
<label for="oldpassword" class="cols-sm-2 control-label">Old Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="oldpassword" id="oldpassword"
placeholder="Enter your actual password" ng-model="oldPassword"/>
</div>
</div>
</div>
<div class="form-group">
<label for="password" class="cols-sm-2 control-label">New Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="password" id="password"
placeholder="Enter your new password"
ng-model="newPassword" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" require-pass/>
</div>
</div>
</div>
<div class="form-group">
<label for="confirm" class="cols-sm-2 control-label">Confirm Password</label>
<div class="cols-sm-10">
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
<input type="password" class="form-control" name="confirm" id="confirm"
placeholder="Confirm your new password" ng-model="confirm" require-pass confirm-directive
/>
</div>
</div>
</div>
仅当用户在新密码输入中输入内容或确认密码时,require-pass指令才有效。 确认指令是用于检查两个密码是否相等的指令(该指令有效)。 require-pass指令为:
app.directive('requirePass', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, mCtrl) {
function myValidation(value) {
var oldPass = $('#oldpassword').val();
console.log(oldPass);
if (oldPass!="") {
mCtrl.$setValidity('charE', false);
} else {
mCtrl.$setValidity('charE', true);
}
return value;
}
mCtrl.$parsers.push(myValidation);
}
}});
感谢您的帮助!!
您不需要其他自定义指令。 您可以只使用ng-required
。 此处的文档: https : //docs.angularjs.org/api/ng/directive/ng必填
<input id="newPass" ng-required="oldPass" type="text" ng-model=... />
<input id="newPassConfirm" ng-required="oldPass" type="text" ng-model=... />
ng-required="oldPass"
基本上说“如果oldPass不为空,我需要填写此字段。”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.