angularjs 表单验证（不完整版）

Posted 2020-08-20 嗨海

针对项目实践表单验证总结：

angular 的 form表单验证：form内需要novalidate取消默认验证，用ng自己的验证，form的名字是非常必要的

栗子：以注册为栗子，下面是注册的部分：

<form ng-submit=\'register\' name=\'registerForm\' novalidate>
    <!-- 用户名 -->
    <div class="form-group" ng-class=\'{"error":registerForm.nickname.$invalid && submitted}\'>
        <label>用户名</label>
        <input type="text" name="nickname" ng-model=\'nickname\' required>
        <div class="err-con"><span ng-show=\'registerForm.nickname.$error.required && submitted\'>请你输入用户名</span>
        </div>
    </div>
    <!-- 密码 -->
    <div class="form-group" ng-class=\'{"error":registerForm.password.$invalid && submitted}\'>
        <label>密码</label>
        <input type="text" name="password" ng-minlength=\'6\' ng-model=\'password\' required>
        <div class="err-con"><span ng-show=\'registerForm.password.$invalid && submitted\'>输入正确的密码</span>
        </div>
    </div>
    <!-- 确认密码 -->
    <div class="form-group" ng-class=\'{“error”:registerForm.confirmPassword.$invalid && submitted}\'>
        <label>密码</label>
        <input type="text" name="confirmPassword" ng-minlength=\'6\' ng-model=\'confirmPassword\' required>
        <div class="err-con"><span ng-show=\'password != confirmPassword && submitted\'>输入密码不一致</span></div>
    </div>
</form>

对上面简单解释下:

1、ng-class是为了在错误验证时为input加一个提示红色的边框。

2、submitted传true或false与验证共同控制是否错误提示显示。

3、registerForm.password.$invalid 验证是否符合规则，registerForm.nickname.$error.required判断是否存在

4、formName.inputName.$invalid 或 formName.inputName.$error

5、在验证码再次点击加一个ng-disabled, 手机正则加ng-pattern

6、ng-show判断里面是否符合规则显示错误提醒，比jquery验证可方便多啦

推荐链接：http://www.cnblogs.com/rohelm/p/4033513.html