AngularJS 之输入验证

AngularJS 表单和控件可以提供验证功能，并对用户输入的非法数据进行警告。
客户端的验证不能确保用户输入数据的安全，所以服务端的数据验证也是必须的。

  • 属性       描述
  • $dirty     表单内容被修改
  • $valid     字段内容合法的
  • $invalid   字段内容是非法的
  • $pristine  表单内容未被修改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="">
<div class="col-md-6">
        <form role="form" class="form-horizontal" name="myForm">
            <div class="form-group">
                <div class="col-md-4">
                    <label for="name">1.必填项</label>
                </div>
                <div class="col-md-8">
                    <input class="form-control" id="name" name="user" type="text" required ng-model='user.name' />
                    <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
                        <span ng-show="myForm.user.$error.required">此项为必填项</span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label for="minlength">2.最小长度=5</label>
                </div>
                <div class="col-md-8">
                    <input type="text" name="minLengthTarget" id="minlength" ng-minlength="5" ng-model="user.minlength" class="form-control" />
                    <span style="color:red" ng-show="myForm.minLengthTarget.$dirty && myForm.minLengthTarget.$invalid">
                        <span ng-show="myForm.minLengthTarget.$error.minlength">长度必须大于等于 5</span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label for="minlength">3.最大长度=20</label>
          </div>
                <div class="col-md-8">
                    <input type="text" name="maxLengthTarget" ng-model="user.maxlength" ng-maxlength="20" class="form-control" />
                    <span style="color:red" ng-show="myForm.maxLengthTarget.$dirty && myForm.maxLengthTarget.$invalid">
                        <span ng-show="myForm.maxLengthTarget.$error.maxlength">长度必须小于等于 20</span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label for="minlength">4. 模式匹配</label>
                </div>
                <div class="col-md-8">
                    <input type="text" name="regExpTarget"  ng-model="user.pattern" ng-pattern="/^[a-zA-Z]*\d$/" class="form-control" />
                    <span style="color:red" ng-show="myForm.regExpTarget.$dirty && myForm.regExpTarget.$invalid">
                        <span ng-show="myForm.regExpTarget.$error.pattern">不满足正则表达式{{myForm.regExpTarget.$error}}</span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label for="email">5. 电子邮件</label>
          </div>
                <div class="col-md-8">
                    <input type="email" name="mail" id="email" name="email" ng-model="user.email" class="form-control" />
                    <span style="color:red" ng-show="myForm.mail.$dirty && myForm.mail.$invalid">
                        <span ng-show="myForm.mail.$error.email">不满足邮件格式{{myForm.mail.$error}}</span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label for="age">6. 数字</label>
          </div>
                <div class="col-md-8">
                    <input type="number" name="num" id="age" name="age" ng-model="user.age" class="form-control" />
                    <span style="color:red" ng-show="myForm.num.$dirty && myForm.num.$invalid">
                        <span ng-show="myForm.num.$error.number">不满足数字格式{{myForm.num.$error}}</span>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-4">
                    <label for="url"> 7. URL</label>
          </div>
                <div class="col-md-8">
                    <input type="url" name="url" id="url" name="homepage" ng-model="user.url" class="form-control" />
                    <span style="color:red" ng-show="myForm.url.$dirty && myForm.url.$invalid">
                        <span ng-show="myForm.url.$error.url">不满足 url 格式{{myForm.url.$error}}</span>
                    </span>
                </div>
            </div>
            <div class="form-group text-center">
                <input class="btn btn-primary btn-lg" type="submit" value="提交" />
            </div>
        </form>
    </div>
    <div class="col-md-12">
        1.必填项:{{user.name}}<br>
        2.最小长度=5:{{user.minlength}}<br>
        3.最大长度=20:{{user.maxlength}}<br>
        4.模式匹配:{{user.pattern}}<br>
        5.电子邮件:{{user.email}}<br>
        6.数字:{{user.age}}<br>
        7.URL:{{user.url}}<br>
    </div>
</body>
</html>