Question

这是我的表单验证。只有密码匹配和必需才能正常工作。但是，名字和电子邮件验证无效。

电子邮件验证无效

<input placeholder="Email" class="text_box1" type="text" name="email" ng-model="signup.email"  style="width:236px;">
<span class="errorMessage"  ng-show="signupForm.email.$error.email" class="help-inline">Email is not valid</span> 
<span class="errorMessage"  ng-show="signupForm.email.$error.required" class="help-inline">Email is required.</span>

密码验证效果良好

<input placeholder="Password" class="text_box1" type="text" name = "password" placeholder="Password" ng-model="signup.password"  style="width:236px;">
<small class="errorMessage" data-ng-show="signupForm.password.$dirty && signupForm.password.$invalid"> Enter Password.</small>
<input placeholder="Confirm Password" class="text_box1" type="text"  name="password2" placeholder="Password Again" ng-model="signup.password2" password-match="signup.password"  style="width:236px;">
<small class="errorMessage" data-ng-show="signupForm.password2.$dirty && signupForm.password2.$error.required"> Enter password again.</small>
<small class="errorMessage" data-ng-show="signupForm.password2.$dirty && signupForm.password2.$error.passwordNoMatch && !signupForm.password2.$error.required"> Password do not match.</small>

我默认禁用该按钮并仅在表单有效时才使其有效，但由于上述问题，一旦密码验证正常，按钮就会启用。

<button class="sign_up" ng-click="doReg()" data-ng-disabled="signupForm.$invalid">Sign up</button>

如何使电子邮件验证工作，以便只有在满足电子邮件验证后才会启用该按钮。吗

注意：我的目标是进行必要且有效的电子邮件验证

Answer 1

检查此样本表格验证，

<form name="testForm" novalidate>
<div class="form-group" ng-class="{ 'has-error' : testForm.test.$invalid && !testForm.test.$pristine }">
<input class="form-control" type="text" ng-model="test" id="txtPickUpPoint" name="test" required>
<p ng-show="testForm.test.$invalid && !testForm.test.$pristine" class="help-block">Error Message.</p>

它应该有用。

Answer 2

将{ "value": "{\"vision\":[\"For Commuters who Spend hell lot of time in traffic is a Traditional Commuting solution that Tracking enabled mobile App unlike Sharing the rides our product Car pooling \",\"For Commuters who Spend hell lot of time in traffic is a Traditional Commuting solution that Tracking enabled mobile App unlike Sharing the rides our product Car pooling \"],\"actors\":[\"Commuters\",\"Government\"]}" }更改为您的电子邮件输入的type="text"。

<强> E.g。

type="email"

如果您在输入类型中使用<input type="email" name="email" ng-model="signup.email" placeholder="Email" class="text_box1" style="width:236px;" required="required" />而不是text，则电子邮件验证将无效。

<强>更新

要修复初始验证，只需在email中添加!signupForm.email.$pristine。

<强> E.g。

ng-show

或您可以将<{1}}两个<span class="errorMessage" ng-show="signupForm.email.$error.email && !signupForm.email.$pristine" class="help-inline">Email is not valid</span> <span class="errorMessage" ng-show="signupForm.email.$error.required && !signupForm.email.$pristine" class="help-inline">Email is required.</span>包裹到validation。

<强> E.g。

<span ng-show="!signupForm.email.$pristine"></span>

希望它有所帮助。

表格验证无法在angularjs

2 个答案: