角度js中的自定义验证

时间:2014-06-08 03:41:54

标签: angularjs angularjs-directive

嗨所有的角度开发者,我正在使用角度js获取验证问题。我可以在Form下进行验证,我可以通过Form以角度js检查每个验证字段。但我想通过使用Div而不是Form来做同样的工作。很多人建议我你可以做角度指令。但怎么样?他们不清楚我。我将如何检查Div下的所有验证指令?我还没有找到任何解决方案。有人有想法或解决方案吗?我在下面给出了我的例子。现在我想通过使用angular js指令来验证这一点。感谢

    <div name="userForm" novalidate>

        <!-- NAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
            <label>Name*</label>
            <input type="text" name="name" class="form-control" ng-model="user.name" required>
            <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
        </div>

        <!-- USERNAME -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }">
            <label>Username</label>
            <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8">
            <p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
            <p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
        </div>

        <!-- EMAIL -->
        <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }">
            <label>Email</label>
            <input type="email" name="email" class="form-control" ng-model="user.email">
            <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
        </div>

        <button type="button" ng-click="Save()" class="btn btn-primary">Submit</button>

    </div>

2 个答案:

答案 0 :(得分:1)

使用ng-form:

 <div ng-form="userForm" novalidate>
  ...
 </div>

答案 1 :(得分:0)

相关问题