[英]Input validation in angularjs material design
我有2种不同的情况。
情况1:
<md-input-container class="md-block">
<label>Client Email</label>
<input required type="email" name="clientEmail" ng-model="project.clientEmail" minlength="10" maxlength="20" ng-pattern="/^.+@.+\..+$/" />
<div ng-messages="projectForm.clientEmail.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your email must be between 10 and 20 characters long and look like an e-mail address.
</div>
</div>
</md-input-container>
在这里,对于所有类型的错误,我们都显示相同的消息。 是否可能有多个消息并相应地显示它们。 例如-当为空{必填此字段。}当用户开始键入时,直到少于10个字符{最少需要10个字符。}当字符长度超过20个{允许最多20个字符}
情况2:
<md-input-container class="md-block">
<label>Password</label>
<input required type="password" name="password" ng-model="project.password" minlength="6" maxlength="8" ng-pattern="/^[0-9]{6-8}$/" />
<div ng-messages="projectForm.password.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your password must be between 6 and 8 characters long.
</div>
</div>
</md-input-container>
<md-input-container class="md-block">
<label>Repeat Password</label>
<input required type="password" name="password2" ng-model="project.password2" minlength="6" maxlength="8" ng-pattern="/^.+@.+\..+$/" />
<div ng-messages="projectForm.password2.$error" role="alert">
<div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
Your password must be between 6 and 8 characters long.
</div>
</div>
</md-input-container>
有什么办法可以使我们将当前字段值与其他字段匹配。 基本上,这是用于输入密码并确认密码的。 我们将所有检查都放在密码字段中。 在password2中,我只需要检查它是否与密码相同,并显示消息{确认密码与密码不相同},直到两者都匹配为止。
对于情况1的答案:是,可以有多个消息并相应地显示它们。 朋克: DEMO
<form name="form">
<div class="form-group" ng-class="{'has-error': form.telephone.$dirty && form.telephone.$invalid}">
<input id="Text5"
name="telephone"
placeholder="Enter phone number (only digits or spaces)"
type="text"
ng-model="ManageDetailsCtrl.ManageDetails.Phone"
class="form-control"
style="width: 100%;"
ng-minlength="11"
ng-maxlength="15"
required>
<div ng-show="form.telephone.$dirty && form.telephone.$invalid">
<span ng-show="form.telephone.$error.required" class="help-block">can't be blank</span>
<span ng-show="form.telephone.$error.minlength" class="help-block"> is too short (min 11 characters)</span>
<span ng-show="form.telephone.$error.maxlength" class="help-block"> is too long (max 15 characters)</span>
</div>
</div>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.