10

ディレクティブを使用せずに角度でフィールドを検証する方法はありますか? 例: 入力フィールドで次の検証を行いたい。

  • フィールドが空の場合、「フィールドには値が必要です」というメッセージが表示されます。
  • フィールドに英数字が含まれている場合、「フィールドには数字のみを含めることができます」と表示する必要があります。
  • EVEN 番号 - ユーザーへのメッセージ「値は偶数でなければなりません」。

JavaScript関数の呼び出しで次の検証を行いたいです。

グーグルで調べたところ、 ng-valid と $error を使用する方法があることがわかりましたが、うまく機能させることができませんでした。

以下のコードは、私が得た回答の1つによるものです。

<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>

最後の [span] 内にあるものを取得し、JavaScript 関数内に配置して、より一般的なものにし、最終的に条件が変化したときに HTML ではなく JS のみを変更したい

誰かアドバイスしてもらえますか？実際の例は素晴らしいでしょう。

4

4 に答える 4

22

誰もui-validateについて言及していないことに驚いています

$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>

それ以上に簡単なことはなく、適切な AngularJS 検証です (ばかげた時計ではありません)。

これが実際のデモです

于 2013-08-08T18:43:49.327 に答える
3

質問が古いことは知っていますが、ディレクティブが必要ないことはわかっていますが、「Angular」の方法である場合はディレクティブの使用を検討できます...ここに私のAngular-Validationがあります。私は Github でプロジェクトを作成しましたが、利用可能なものと比較して非常に優れていると思います...私は優れた Laravel PHP フレームワークに基づいて、Angular で利用できるようにしました...非常にシンプルで、2 つ必要ですlinesコードの 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 行のコード、それよりも簡単にすることはできません...ああ、追加したい場合は、カスタム正規表現もサポートします。もう 1 つのボーナスとして、必要なトリガー イベントをサポートします。最も一般的なのは、おそらくonblurとonkeyupです。ああ、JSON 外部ファイルを介して複数のローカライズ言語もサポートしています。私は、1 つの非常にシンプルなディレクティブに、考えられるすべての機能を実際に追加しました。

1 つの入力に対して 10 行のコードを含むクラスター化されたフォームはもう必要ありません (申し訳ありませんが、常に少し極端であることがわかりました)。必要なのは 2 行だけで、入力に 5 つのバリデーターがある場合でも、これ以上は必要ありません。そして、フォームが無効にならないことを心配する必要はありません。私もそれを処理しました。すべてが適切な「Angular」の方法で処理されました。

私の Github プロジェクトAngular-Validationを見てみましょう ...きっと気に入っていただけると思います =)

更新
もう 1 つのキャンディー ボーナスです! ユーザー エクスペリエンスをさらにスムーズにするために、タイマーの検証を追加しました。コンセプトはシンプルです。ユーザーが入力している間は気にせず、ユーザーが一時停止したり入力を変更したりしたかどうかを検証します (onBlur)... 気に入りました!!!
好みに応じてタイマーをカスタマイズすることもできます。ディレクティブ内でデフォルトを 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"  />

更新 #3
ディレクティブをリファクタリングして<span>、エラーを表示する必要がないようにしました。ディレクティブはエラーを単独で処理するようになりました。コードの変更が一番上に反映されていることを確認してください。

DEMO Plunker
にライブデモを追加しました

于 2014-02-09T05:11:12.073 に答える
2

さて、あなたは関数を作成しようとすることができます

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

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

メソッドは、現在のコントローラー スコープまたは $rootScope で定義できます。

ディレクティブの方が優れているため、あまり角度のない方法ではありませんが、うまくいくと思います。

于 2013-08-08T13:14:49.553 に答える