AngularJs 간편한 시작 (6) 양식 검증

11669 단어 AngularJS
폼 데이터의 검사는 WEB의 안전성을 향상시키는 데 큰 의미가 없다. 왜냐하면 서버가 받은 요청이 반드시 우리의 전단 페이지에서 오는 것이 아니라 다른 사이트에서 올 수 있기 때문이다. 해커는 스스로 폼을 만들어서 데이터를 우리의 서버(즉 크로스 스테이션 위조 요청)에 제출할 수 있기 때문에 전단 페이지의 검사를 돌아갈 수 있다.HTTP 프로토콜에 익숙하면 프로그램에서 수동으로 HTTP 요청을 만들어 서버에 보낼 수 있기 때문에 서버 측의 데이터 검사는 절대로 없어서는 안 된다.
WEB 전단 데이터 검사의 의미는 사용자 체험을 개선하는 데 있다. 사용자는 데이터를 서버에 제출한 후에야 어떤 데이터가 불법인지 알 필요가 없다.
AngularJs를 사용하여 표 요소에 대한 검사를 하는 것은 상당히 편리합니다. input 요소에서 사용할 수 있는 모든 검사 옵션을 살펴보겠습니다.

1. 필수 항목


양식 입력이 작성되었는지 확인합니다. 입력 필드 요소에 HTML5 태그 required를 추가하면 됩니다.`<input type="text" required />

2. 최소 길이


양식에 입력한 텍스트 길이가 최소값보다 큰지 확인하고, 입력 필드에 AngularJS 명령어 ng-minleng="{number}"를 사용합니다.<input type="text" ng-minlength="5" />

3. 최대 길이


양식에 입력한 텍스트의 길이가 최대치보다 작거나 같는지 확인하고, 입력 필드에 AngularJS 명령 ng-maxlength="{number}"를 사용합니다<input type="text" ng-maxlength="20" />

4. 패턴 일치


ng-pattern='/PATTERN/'를 사용하여 지정한 정규 표현식과 일치하도록 입력합니다<input type="text" ng-pattern="[a-zA-Z]" />

5. 이메일


입력한 내용이 전자메일인지 확인하십시오. 아래와 같이 input의 형식을 전자메일로 설정하면 됩니다<input type="email" name="email" ng-model="user.email" />

6. 숫자


입력 내용이 숫자인지 확인하고 input 형식을number:<input type="number" name="age" ng-model="user.age" />

7. URL


입력 내용이 URL인지 확인하고 input 형식을 url:<input type="url" name="homepage" ng-model="user.facebook_url" />
구체적인 사례 코드를 살펴보겠습니다.
<!DOCTYPE html>
<html ng-app="loginMod">
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="angular-1.3.0.14/angular.js"></script>
    <script type="text/javascript" src="angular-1.3.0.14/angular-messages.js"></script>
    <title>tutorial06_1</title>
    <style> input.ng-invalid { border: 1px solid red; } input.ng-valid { border: 1px solid green; } </style>
</head>
<body>
<div>
    <form name="loginForm" novalidate ng-submit="login()" ng-controller="LoginController">
        <div style="width:280px;float:left">
            <label> ：</label>
            <input type="text" placeholder=" " name="uname" ng-model="uname" ng-minlength= 3 ng-maxlength=10 required />
        </div>
        <div class="error" ng-messages="loginForm.uname.$error" style="color:red;">
            <div ng-message="required"> </div>
            <div ng-message="minlength"> 3</div>
            <div ng-message="maxlength"> 10</div>
        </div>
        <br/><br/>
        <button type="submit"> </button>
    </form>
</div>
<script> var loginMod = angular.module('loginMod', ['ngMessages']); loginMod.controller("LoginController",function($scope,$log){ $scope.login = function() { $log.info(" "); } }); </script>
</body>
</html>

양식 검사는 AngularJs의 ngMessages 모듈로 angular-messages에 봉인됩니다.js 파일에서 다음과 같이 입력해야 합니다.
<script type="text/javascript" src="angular-1.3.0.14/angular-messages.js">

이외에도 ngMessages를 응용 프로그램의 의존 모듈로 도입하는 것을 AngularJs에 알려야 한다. 아래와 같다.
var loginMod = angular.module('loginMod', ['ngMessages']);

required 는 텍스트 상자를 필수 항목으로 지정하고, ng-minlength 는 최소 길이를 지정하며, ng-maxlength 는 최대 길이를 지정합니다. 검사 작업은 AngularJs 내부에서 이루어집니다. 조건이 충족되지 않을 때의 알림 정보만 정의하면 됩니다.
<div class="error" ng-messages="loginForm.uname.$error" style="color:red;">
            <div ng-message="required"> </div>
            <div ng-message="minlength"> 3</div>
            <div ng-message="maxlength"> 10</div>
 </div>

마지막으로 브라우저에서 효과를 살펴보겠습니다.
우리는 또 힌트 정보를 하나의 단독 errors에 쓸 수 있다.html 파일:
<div ng-message="required"> </div>
<div ng-message="minlength"> 3</div>
<div ng-message="maxlength"> 10</div>

그리고 페이지에서 ng-messages-include 속성을 사용하여 이 정보를 도입합니다.
 <div class="error" ng-messages="loginForm.uname.$error" 
      style="color:red;" ng-messages-include="errors/errors.html">
 </div>

소스 주소:https://github.com/rongbo-j/angularjs
openstack에서 계산 노드 삭제
알 수 없는 브라우저 http 캐시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage