지시문없이 JavaScript 함수를 사용하여 Angularjs 양식/필드 유효성 검사

Question

지시문을 사용하지 않고 이라는 각도로 필드의 유효성을 검사 할 수 있습니까? 예 : 입력 필드에서 다음 유효성 검사를 수행하려고합니다.

• 필드가 비어 있으면 "값에는 필드가 있어야합니다"라는 메시지가 표시되어야합니다.
• 필드에 숫자가 포함되어 있으면 숫자 문자 "필드에는 숫자 만 포함 할 수 있음"이 표시되어야합니다.
• EVEN 번호 - 사용자에게 메시지 "값은 짝수 여야합니다".

JavaScript 함수 호출에서 다음과 같은 유효성을 검사하고 싶습니다.

Google 검색을 사용하고 ng-valid 및 $ error를 사용할 수있는 방법을 찾았지만 제대로 작동하지 않았습니다. 아래 내가 가진 대답 중 하나에 따라입니다

코드 : 내가 마지막으로 [스팬] 내부에 무엇을 더를 만들기 위해 자바 스크립트 함수 안에 넣을

<div ng-app> 
<form name='theForm' novalidate> 
    <input type='text' name='theText' ng-model='theText' ng-pattern='/^[0-9]+$/'/> 
    <span ng-show='theForm.theText.$error.pattern'>Field can contain only digits</span> 
    <span ng-show='theText.length<1'>Field must contain a value</span> 
    <span ng-show='theText%2!=0&&document.getElementsByName("theText").value!=""&&!theForm.theText.$error.pattern&&!theForm.theText.$pristine'>Value must be an even number</span> 
    <br/><input type='submit' value='Submit' /> 
</form> 

일반 및 JS 변경 및 조건 변경 될 때 HTML 않습니다.

사람이 조언을 줄 수 있습니까? 작동 예제가 좋을 것입니다.

Answer 1

나는 아무도 그보다 간단하지 않습니다

$scope.isOdd = function($value){ 
    return $value % 2; 
} 
... 
<form name="myform"> 
    <input ng-model="myVal" name="value" required 
    ng-pattern="/^[0-9]*$/" ui-validate=" 'isOdd($value)' "></input> 
    <pre>{{myform.value.$error|json}}</pre> 
</form> 

ui-validate 언급하지 않았다 놀랐어요, 그리고 올바른 AngularJS와 검증 (안 바보 시계) 내가 아는

Here's a working demo

Answer 2

angularjs 양식 설명서 - http://docs.angularjs.org/guide/forms을 살펴보십시오. 일반적으로 요구, 최소, 최대 등의 HTML5 속성을 기반으로합니다.

첫 번째 요구 사항을 완료하려면 - "빈 필드는"필드에 값이 있어야합니다 "메시지가 표시되어야합니다. .

<input type="text" ng-model="user.name" name="uName" required /><br /> 
<div ng-show="form.uName.$invalid"> 
    <span ng-show="form.uName.$error.required">Field must contain a value.</span> 
</div> 

숫자 전용 필드는이 일치하는 정규 표현식 (예 : http://www.wufoo.com/html5/attributes/10-pattern.html)로 pattern 속성을 사용할 수 있습니다 : 그런 일을 할 uwould

를 짝수 검증을 위해, 나는 확실하지 않다 - 나는 당신이 그것에 대한 커스텀 유효성 검사 (지시어를 만들어야 함을 의미)를해야하거나, 어쨌든 pattern 속성.

마지막으로 중요한 것은 <form> 태그에 novalidate을 추가하는 것입니다. 그렇지 않으면 브라우저뿐만 아니라 당신의 필드 유효성을 검사 할 것입니다 그리고 당신은 원하지 않는 :

<form ... novalidate> 
... 
</form> 

Answer 3

그럼 당신이

<span ng-show='isEven(theText)'>Value must be an even number</span> 

$scope.isEven=function(data) { 
    if(data) { 
     return data%2===0 
    } 
    return true; 
} 

방법 중 하나는 현재 정의 할 수있는 FUNC를 만들려고 할 수 있습니다 컨트롤러 범위 또는 $ rootScope.

매우 모호하지는 않지만 지시문이 좋을 수도 있지만 작동한다고 생각합니다.

Answer 4

입니다 질문은 오래되었고 당신이 지시어를 원하지 않는다는 것을 알고 있지만 "각도"라면 지시어를 사용하는 것을 고려해 볼 수 있습니다 ... 그럼 여기 내 Angular-Validation입니다. 나는 Github에 관한 프로젝트를 만들었고 사용 가능한 모든 것과 비교해 보았습니다 ... 저는 훌륭한 Laravel PHP 프레임 워크에 기반을두고 Angular 아래에서 사용할 수있게 만들었습니다 ... 너무 단순합니다. 이 필요합니다. 2 줄 1 줄의 코드, 1 줄의 입력, 1 줄의 오류 표시, 그게 ... 결코 더 절대로!

<!-- example 1 --> 
<label for="input1">Email</label> 
<input type="text" validation="email|min_len:3|max_len:25|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" /> 

그래서 내가 유효성 검사 규칙의 어떤 양 (유효성 검사기 이미 25 + 유형)를 정의 할 수 있습니다 나는 간단한 지시 validation="min_len:2|max_len:10|required|integer"에서 원하는 및 오류 메시지가 항상 옆에 표시됩니다 말했다 충분,의 몇 가지 예를들 수 있습니다 <span> 당신은 이미 그것을 좋아하지 않아? 당신의 입력을위한 1 줄의 코드, 에러 표시를위한 1 줄의 코드, 당신은 그보다 간단 할 수 없습니다 ... 오, 당신이 추가하고 싶다면 커스텀 정규식을 지원합니다. 또 다른 보너스로, 원하는 트리거 이벤트를 지원합니다. 가장 일반적인 것은 onblur과 onkeyup입니다. 아, 그리고 JSON 외부 파일을 통해 여러 지역 언어를 지원합니다. 나는 정말로 내가 원했던 상상할 수있는 모든 기능을 하나의 미친 단순한 지시문에 추가했다.

더 이상 클러스터 된 양식 1 입력에 대해 10 줄의 코드가있는 양식 (미안하지만 항상 조금 극단적 인 것으로 나타남). 필요한 유일한 것은 2 줄입니다. 더 이상 5 개의 유효성 검사기가있는 입력에 대해서도 마찬가지입니다. 무효화되지 않는 형태에 대한 걱정은 없었고, 나는 또한 그것을 돌 보았습니다. 모두 좋은 "각도"방식으로 처리되었습니다.

내 Github에서 프로젝트 Angular-Validation 한 번 봐 ... 나는

UPDATE
또 다른 사탕 보너스) = 당신이 그것을 사랑 할거야 확신합니다! 보다 부드러운 사용자 환경을 만들기 위해 타이머에 대한 유효성 검사를 추가했습니다. 개념은 간단하지만 입력하는 동안 사용자를 귀찮게하지 않고 일시 중지하거나 입력을 변경하면 유효성을 검사합니다 (onBlur) ... Love it !!!
원하는대로 타이머를 사용자 정의 할 수도 있습니다. 지시문 내에서 1 초로 기본 설정하기로했지만 사용자 정의하려는 경우 예를 들어 typing-limit="5000"과 같이 호출하여 5 초가 걸릴 수 있습니다. 타임 아웃. 전체 예 :

<input type="text" ng-model="form1.input1" typing-limit="5000" validation="integer|required" name="input1" /> 
<span class="validation text-danger"></span> 

업데이트 # 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" /> 

UPDATE # 3
입니다 <span>에 오류를 표시 할 필요가 없도록 지시문을 리 팩터 처리 했으므로 이제 지시문이 자체적으로 처리합니다. 변경 사항은 맨 위에 반영됩니다.

DEMO
추가