폼 검증을 간소화하는 방법
아래 코드는 기본적인 필수 양식 검증을 수행하는 데 매우 잘 작동하는 것 같습니다.
필드가 더러우면 빨간색 Name is required 메시지가 표시되고 필드가 더러우면 Great! 메시지가 표시됩니다.
그러나 폼의 각 필드에 대해 이 코드를 반복해야 하는 것은 복잡합니다.
<form name="myForm">
<div class="control-group"
ng-class="{error: myForm.name.$invalid && myForm.name.$dirty}">
<label>Name:</label>
<input type="text" name="name" ng-model="user.name" required/>
<span ng-show="myForm.name.$invalid && myForm.name.$dirty"
class="help-inline">Name is required</span>
<span ng-show="myForm.names.$valid && myForm.names.$dirty">Great!</span>
</div>
</form>
하다를 할 수 .ng-show ★★★★★★★★★★★★★★★★★」ng-class더 쉬운 방법으로 속성을 지정합니다.
검증식을 스코프 메서드로 추상화하는 방법이 있습니다.
HTML
<div class="control-group" ng-class="{error: isInvalid('name')}">
<label>Name:</label>
<input type="text" name="name" placeholder="Name" ng-model="user.name" required/>
<span ng-show="isInvalid('name')" class="help-inline">Name is required</span>
<span ng-show="isValid('name')">Great!</span>
</div>
컨트롤러
function Ctrl($scope) {
$scope.isInvalid = function(field){
return $scope.myForm[field].$invalid && $scope.myForm[field].$dirty;
};
$scope.isValid = function(field){
return $scope.myForm[field].$valid && $scope.myForm[field].$dirty;
};
}
오래된 질문인 것은 알지만, 나는 나의 멋진 새로운 각도 디렉티브를 세계에 공유하고 싶다.나는 Github에 관한 프로젝트를 만들었다.그것은 이용 가능한 것과 비교해도 매우 중요하다고 생각한다.저는 뛰어난 Laravel PHP Framework를 기반으로 Angular에서 사용할 수 있게 되었습니다.이제 예를 들어 보겠습니다.
<!-- example 1 -->
<label for="input1">Simple Integer</label>
<input type="text" validation="integer|required" ng-model="form1.input1" name="input1" />
<!-- example 2 -->
<label for="input2">Alphanumeric + Exact(3) + required</label>
<input type="text" validation="alpha|exact_len:3|required" ng-model="form1.input2" name="input2" />
간단한 규칙을 할 수 .validation="min_len:2|max_len:10|required|integer" 에러메시지로 됩니다.<span>벌써 맘에 안드세요? 입력용 코드 한 줄, 오류 표시용 코드 한 줄, 이렇게 간단할 순 없어요..oh 및 추가가 필요한 경우 커스텀 Regex도 지원합니다.
1개의 입력에 10줄의 코드가 있는 클러스터 폼은 필요 없습니다.2번으로 하다검증자가 5개 있는 입력에서도 마찬가지입니다.그리고 서식이 무효가 되지 않을 염려가 없습니다.이치노모든 것이 잘 처리되었습니다.
Github 프로젝트 Angular-Validation을 보고 =)
★★★★
보다 원활한 사용자 경험을 위해 타이머 인증 기능을 추가했습니다.컨셉은 심플합니다.사용자가 타이핑하는 동안 번거롭게 하지 말고 일시정지 또는 변경 입력(onBlur) 여부를 확인합니다.★★★★★★★!!!
따라 할 만, 하고 는, 「」로 할 수 .지시내에서는 디폴트로 1초로 설정했습니다만, 커스터마이즈 하고 싶은 경우는, 예를 들면 다음과 같이 문의해 주세요.typing-limit="5000"5 의 완전한 예: " " " :
<input type="text" validation="integer|required" typing-limit="5000" ng-model="form1.input1" name="input1" />
#2★★★#2번
일치 확인 확인( 확인은 코드 입니다. 뭇매를 맞다
<!-- input match confirmation, as for example: password confirmation -->
<label for="input4">Password</label>
<input type="password" name="input4" ng-model="form1.input4" validation="alpha|min_len:4|required" />
<label for="input4c">Password Confirmation</label>
<input type="password" name="input4c" ng-model="form1.input4c" validation="match:form1.input4,Password|required" />
편집
'', '지령'을 가질 필요가 있도록 했다.<span>에러가 불필요하다는 것을 표시하기 위해서, 디렉티브는 에러를 자동적으로 처리합니다.★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
★★★★
에 라이브 데모 추가
이 CSS를 사용해 주세요.
.myForm input.ng-invalid.ng-dirty {
background-color: #FA787E;
}
.myForm input.ng-valid.ng-dirty {
background-color: #78FA89;
}
각도 검증자를 사용할 수 있습니다.
그것은 그럴거다.
- 필요한 오류 메시지를 빨간색으로 표시합니다(옵션으로 부트스트랩클래스를 사용).
- 검증자를 통과하지 못하면 필드를 유효하지 않은 것으로 표시
- 유효하지 않은 동안 양식 제출 금지
- 필드가 더러운 경우에만 메시지 표시
- 코드를 삭제하세요!
그렇지 않을 것이다.
- 성공 메시지를 표시합니다(성공 메시지에 대한 지원이 곧 제공될 예정입니다).
예
<form name="myForm" angular-validator>
<div class="control-group">
<label>Name:</label>
<input type="text"
name="name"
ng-model="user.name"
required-message="'Name is required'"
required/>
</div>
</form>
성공 메시지를 표시하기 위한 회피책:
<form name="myForm" angular-validator>
<div class="control-group">
<label>Name:</label>
<input type="text"
name="name"
ng-model="user.name"
required-message="'Name is required'"
required/>
<span ng-show="myForm.names.$valid && myForm.names.$dirty">Great!</span>
</div>
</form>
더 많은 Angular-Validator 사용 사례 및 예를 확인하십시오.
면책사항:나는 각도 검증기의 저자이다.
github에는 xtForm이라고 하는 각도 지시/프로젝트가 있습니다.단순히 각도 필드 검증의 좋은 시작인 것 같습니다.XtForm은 입력 태그 뒤에 표시되는 검증 메시지 마크업의 양을 줄입니다.
데모 사이트 링크 https://github.com/refactorthis/xtform
사용 예를 나타냅니다.이 필드를 얻기 위해 추가 마크업(ng-show on spans)은 필요하지 않습니다.에러 메시지/툴팁이 필요합니다.
<form xt-form novalidate>
<input name="email" ng-model="modelVal" xt-validate required>
<button type="submit">Submit</button>
</form>
이 ngValidate 모듈을 사용하는 것을 검토해 주십시오.
<input name="demo-field-1" ng-model="user.name" ng-validate="customStrategy">
지시문은 오류 메시지를 보관하기 위한 범위를 추가합니다.사용자 정의 검증 전략 및 개별 오류 메시지를 정의할 수 있습니다.
ngValidateFactory.strategies.customStrategy = [
{
value:ngValidate.required;
message:"This field is required"
},
{
value:[ngValidate.minLength,8];
message:"Minimum 8 characters are required"
},
{
value:[myFunction,arg1,arg2];
message:"This field fails my custom function test"
}]
다음 HTML을 사용해 보십시오.
<form name="myForm" ng-submit="submitForm()" novalidate>
<!-- NAME -->
<div class="form-group" ng-class="{'has-error' : myForm.name.$invalid && !myForm.name.$pristine }">
<label>Client Name</label>
<input type="email" name="email" class="form-control" ng-model="formValues.userName" required placeholder="User Name">
<p ng-show="myForm.email.$invalid && !myForm.email.$pristine" class="error">Your email is required.</p>
</div>
<div class="form-group">
<label >Password</label>
<input type="password" name="formValues.password" class="form-control" placeholder="Password" ng-model="formValues.password" ng-maxlength="6" required>
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="formValues.confirmPassword" class="form-control" placeholder="Confirm Password" ng-model="formValues.confirmPassword" required>
<span class="error" ng-if="formValues.confirmPassword" ng-show="formValues.password!=formValues.confirmPassword">password should not match</span>
</div>
<div class="form-group">
<label>First Name</label>
<input type="text" name="formValues.firstName" class="form-control" placeholder="First Name" ng-model="formValues.firstName" ng-keyup="acceptAlphabets(formValues.firstName,$event)" required>
<span class="error" ng-show="myString">Accept only letters</span>
<span class="error" ng-show="myStringLength">Accept only 50 characters</span>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" name="formValues.larstName" class="form-control" placeholder="Last Name" ng-model="formValues.larstName" required>
</div>
<div class="form-group">
<label>Date Of Birth</label>
<input type="text" name="formValues.dateOfBirth" class="form-control" id="exampleInputPassword1" placeholder="Date Of Birth" ng-model="formValues.dateOfBirth" ng-keyup="dateFun(formValues.dateOfBirth,$event)" required>
<span class="error" ng-show="dateVal">Incorrect Format, should be MM/DD/YYYY</span>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid" ng-model="formValues.submit">Submit</button>
</form>
<form ng-app="demoApp" ng-controller="validationCtrl"
name="myForm" novalidate>
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Your Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Your Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<p>Mobile:<br>
<input type="number" name="number" ng-model="number" required>
<span style="color:red" ng-show="myForm.number.$dirty && myForm.number.$invalid">
<span ng-show="myForm.number.$error.required">Your Phone is required.</span>
<span ng-show="myForm.number.$error.number">Invalid number.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid || myForm.number.$dirty && myForm.number.$invalid">
</p>
</form>
<script>
//This is controller
var app = angular.module('demoApp', []);
app.controller('validationCtrl', function($scope) {
$scope.user = 'angular';
$scope.email = 'angular.js@gmail.com';
});
</script>
질문하기엔 너무 늦었지만 외부 라이브러리를 사용하여 검증을 처리할 수 있습니다.앵귤러 폼 검증기(제가 작성)를 사용하면 다음과 같은 표준 검증기를 거의 배치하지 않아도 됩니다.
- 필수의
- 문자열(최소/최대 길이)
- 수(최소값/최대값)
- 양식
- 이메일
- URL
- 동일(이메일/비밀번호 확인용)
- 커스텀(자신의 검증에 접속할 수 있는 장소)
또한 여러 검증자를 하나의 필드에 결합할 수 있습니다.
<form name="introform" ng-controller="intro">
<div class="form-group" validator="required['Field is required'],string[5,20,'Should between 5 and 20 characters']">
<label for="requiredField">Required Field</label>
<input type="text" class="form-control" id="requiredField" name="requiredField"
placeholder="Required Field" ng-model="model.requiredField">
</div>
<button type="submit" class="btn btn-default" ng-disabled="!introform.$valid">Submit</button>
</form>
내 각도 좀 봐코드펜 링크의 JS 양식 유효성 검사
데모에서 필수, minlength, maxlength, e-메일, 비밀번호 대소문자를 확인하고 비밀번호 일치를 확인하는 예를 보여드렸습니다.
코드는 다음과 같습니다.
var myApp = angular.module('myApp',[]);
myApp.controller('mainController',['$scope', function($scope) {
}]);
myApp.directive('validConfirmPassword', function() {
return {
require:'ngModel',
link: function(scope, elem, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue, $scope) {
var noMatch = viewValue != scope.myForm.password.$viewValue;
ctrl.$setValidity('noMatch', !noMatch)
})
}
}
}) .content{ margin-top:50px; }
.danger-text { color: red; }<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myApp">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">AngularJS Form Validation</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="container content" ng-controller="mainController">
<div class="row">
<div class="col-sm-12">
<form name="myForm" novalidate>
<div class="row">
<div class="col-md-6 mb-3">
<label for="first_name">First Name</label>
<input type="text" name="firstname" ng-model="firstname" id="firstname" class="form-control" required>
<p ng-show="myForm.firstname.$touched && myForm.firstname.$invalid" class="danger-text">Please enter your first name</p>
</div>
<div class="col-md-6 mb-3">
<label for="last_name">Last Name</label>
<input type="text" name="last_name" ng-model="last_name" id="last_name" class="form-control" required>
<p ng-show="myForm.last_name.$invalid && myForm.last_name.$touched" class="danger-text">Please enter your last name</p>
</div>
</div> <!-- End of row -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="username">Username</label>
<input type="text" name="username" id="username" ng-model="username" class="form-control" ng-required="true" ng-minlength="4" ng-maxlength="10" >
<p ng-show="myForm.username.$error.required && myForm.username.$touched" class="danger-text">Please enter username</p>
<p ng-show="myForm.username.$error.minlength" class="danger-text">Username is too short</p>
<p ng-show="myForm.username.$error.maxlength" class="danger-text">Username is too long</p>
</div>
<div class="col-md-6 mb-3">
<label for="email">Email</label>
<input type="email" name="email" id="email" class="form-control" ng-model="email">
<p ng-show="myForm.email.$invalid && !myForm.email.$pristine" class="danger-text">Enter a valid email address</p>
</div>
</div> <!-- ENd of row -->
<div class="row">
<div class="col-md-6 mb-3">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" name="password" ng-model="password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" required />
<p class="danger-text" ng-show="myForm.password.$error.required && myForm.password.$touched">Password is required</p>
<p class="danger-text" ng-show="!myForm.password.$error.required && (myForm.password.$error.minlength || myForm.password.$error.maxlength) && myForm.password.$dirty">Passwords must be between 8 and 20 characters.</p>
<p class="danger-text" ng-show="!myForm.password.$error.required && !myForm.password.$error.minlength && !myForm.password.$error.maxlength && myForm.password.$error.pattern && myForm.password.$dirty">Must contain one lower & uppercase letter, and one non-alpha character (a number or a symbol.)</p>
</div> <!-- End of col md 6 -->
<div class="col-md-6 mb-3">
<label>Confirm Password</label>
<input type="password" id="confirm_password" name="confirm_password" class="form-control" ng-model="confirm_password" valid-confirm-password required />
<p class="danger-text" ng-show="myForm.confirm_password.$error.required && myForm.confirm_password.$dirty">Please confirm your password.</p>
<p class="danger-text" ng-show="!myForm.confirm_password.$error.required && myForm.confirm_password.$error.noMatch && myForm.password.$dirty">Passwords do not match.</p>
</div>
</div> <!-- ENd of row -->
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form> <!-- End of form -->
</div> <!-- End of col sm 12 -->
</div> <!-- End of row -->
</div> <!-- End of container -->
</div>index.displaces를 표시합니다.
<form class="add-task" id="myForm" name="myForm" method="post" ng-submit="submitForm(myForm.$valid)" novalidate>
<div class="form-actions">
<!-- ng-patten for validation -->
<span class="error" ng-show="myForm.username.$error.required">
Required!</span>
<div class="input-group">
<input type="text" ng-model="user2.username" name="username" ng-pattern="example.word" placeholder="User Name" required>
<input type="password" ng-model="user2.password" name="password" placeholder="user password" ng-minlength="4"
ng-maxlength="10" required>
<button class="btn btn-success" ng-show="displayadd" type="submit" ng-click="addUser(user2)" ng-disabled="myForm.$invalid"><i class="glyphicon glyphicon-plus"></i> Add New user</button>
<button class="btn btn-default" ng-show="displayupdate" ng-click="updateUser(user2)" value="Update"ng-disabled="myForm.$invalid"><span class="glyphicon glyphicon-save"></span>Save Change</button>
<p style="color:red" ng-show="myForm.password.$error.minlength" class="help-block">Password Is Very Short.</p>
<p style="color:red" ng-show="myForm.password.$error.maxlength" class="help-block">Password Is Very Long.</p>
</div>
</div>
</form>
app.js에는 다음 기능이 포함됩니다.
$scope.submitForm = function() {
if ($scope.myForm.$valid) {
alert('Our Form Is Submited....');
}
};
언급URL : https://stackoverflow.com/questions/15022180/how-can-i-simplify-form-validation
'programing' 카테고리의 다른 글
| 리액트에서 쉼표로 숫자를 포맷하려면 어떻게 해야 합니까? (0) | 2023.03.21 |
|---|---|
| Twitter 부트스트랩 모달 동적 구축 (0) | 2023.03.21 |
| AngularJS는 객체 배열 내의 객체 속성을 감시합니다. (0) | 2023.03.21 |
| 현재 루트명/컨트롤러를 기반으로 클래스를 설정하는 방법 (0) | 2023.03.21 |
| 사용자 지정 필드 데이터를 WooCommerce 주문에 추가합니다. (0) | 2023.03.21 |