angular表单

anglar 表单验证实操

先来看一些基本的 先要大概了解下面几个基本的命令

• novalidate 禁止浏览器自带的表单验证功能
• form 必须有 name
• input 必须有name 和 ng-model
• ng-minlength=”4” 最低输入4位
• ng-maxlength=”20” 最多输入20位
• required 输入不能为空
• $invalid 不合法
• $dirty 被修改过的

例子1.

结构部分：
 <form name="form" novalidate>
    <div>
        <label>用户名：</label><br/>
        <input type="text" placeholder="请输入用户名"
               name="username"
               ng-model="data.name"
               ng-minlength="4"
               ng-maxlength="20"
               required>

        <!--如果最小长度 或者 最大长度出错 并且 已经被修改过了 那么p里面的内容才会显示-->
        <p ng-if="(form.username.$error.minlength ||form.username.$error.maxlength)
        && form.username.$dirty">用户名应该在4-20位之间</p>

        <p class="error" ng-if="form.username.$error.required && form.username.$dirty">用户名不能为空</p>
    </div>
</form>
 　
js部分
<script src="js/angular.js"></script>
<script>
    angular.module("app",[])
        .controller("myCtrl",function($scope){
            $scope.data={}
        })
<script>

例子2：
通常在注册账号的界面 输入密码之后 还会有一个再次输入密码 来对比的 如果不一样会有提示前后密码不一

结构部分：
 <form name="form" novalidate>
    <div>
        <label>请输入密码：</label><br/>
        <input type="password" placeholder="请输入密码"
               name="userPassword"
               ng-model="pas"
               ng-minlength="6"
               required>

        <!--如果最小长度出错 并且 已经被修改过了 那么p里面的内容才会显示-->
        <p ng-if="form.username.$error.minlength && form.username.$dirty">
            密码应在6位以上
        </p>
    </div>
    <div>
        <label>请确认密码：</label><br/>
        <input type="password" placeholder="请再一次输入密码"
               name="userPassword2"
               ng-model="pas2"
               required>

        <!--对比两个ng-model的值 如果不一样 则提示前后密码不一样-->
        <p ng-if="pas ！= pas2">
            前后密码输入不一样
        </p>
    </div>
</form>

例子3： 正则在表单中的应用
使用ng-pattern=”/PATTERN/”来确保输入能够匹配指定的正则表达式：

<form name="form" novalidate>

    <input ng-model="num" name="num" ng-pattern="/[a-zA-Z]/">
    <!--简单的说 我在上面一个input输入数字的话 ，下面的div是不会显示的 因为不匹配上面的正则-->
    <div ng-bind="num"></div>

</form>