AngularJS表单验证(AngularJs)

第六种状态,验证用户输入网址格式字符串
AngularJS 1

 

其二种情状,必填字段,验证用户输入日期。
AngularJS 2

第五种状态,对文本框限制只好输入数字,而且有数值范围,最小值为7,最大值为109:

AngularJS 3

AngularJS 4AngularJS 5

第二种情况,必填字段,使用type=number来界定输入字符为数字。
AngularJS 6

 var cvApp = angular.module('CustomValidationApp', []);
        cvApp.controller('cvController', function ($scope, $http) {
        });

 

AngularJS 7

Html Source Code

 

 

状态 描述
$invalid 未通过验证
$valid 经过验证
$pristine 未修改过
$dirty 修改
$error 错误

 

AngularJS, 

 

第四种意况,字段域验证用户输入的邮箱地址格式是否正确

 

实时操作演示:
AngularJS 8

JS Code

 

 

这一次,学习angularjs的表单的辨证,angularjs提供上表三种情况验证:

 第一种境况,文本框必须填写,还要求字符串的纤维长度和最大尺寸。
AngularJS 9

 <form name="form1" ng-app="CustomValidationApp" ng-controller="cvController" novalidate>
        <p>
            <label>Item</label>
            <input type="text" name="Text" ng-model="Text" required ng-minlength=4 ng-maxlength=13 />
            <div class="error" ng-show="form1.Text.$dirty && form1.Text.$invalid">
                <small class="error" ng-show="form1.Text.$error.required">
                    Text请求值。
                </small>
                <small class="error" ng-show="form1.Text.$error.minlength">
                    Text最小长度为4个字符。
                </small>
                <small class="error" ng-show="form1.Text.$error.maxlength">
                    Text最大长度为13个字符。
                </small>
            </div>
        </p>
        <p>
            <label>Number</label>
            <input type="number" name="Number" ng-model="Number" required />
            <div class="error" ng-show="form1.Number.$dirty && form1.Number.$invalid">
                <small class="error" ng-show="form1.Number.$error.required">
                    Number请求值。
                </small>
                <small class="error" ng-show="form1.Number.$error.number">
                    Number必须为数字。
                </small>
            </div>
        </p>
        <p>
            <label>Date</label>
            <input type="date" name="Date" ng-model="Date" required placeholder="yyyy-MM-dd" />
            <div class="error" ng-show="form1.Date.$dirty && form1.Date.$invalid">
                <small class="error" ng-show="form1.Date.$error.required">
                    Date请求值。
                </small>
                <small class="error" ng-show="form1.Date.$error.date">
                    Date必须为日期。
                </small>
            </div>
        </p>
        <p>
            <label>Email</label>
            <input type="email" name="email" ng-model="email" required />
            <div class="error" ng-show="form1.email.$dirty && form1.email.$invalid">
                <small class="error" ng-show="form1.email.$error.required">
                    email请求值。
                </small>
                <small class="error" ng-show="form1.email.$error.email">
                    email必须为邮箱地址。
                </small>
            </div>
        </p>
        <p>
            <label>Range</label>
            <input type="number" name="Range" ng-model="Range" min="7" max="109" required />
            <div class="error" ng-show="form1.Range.$dirty && form1.Range.$invalid">
                <small class="error" ng-show="form1.Range.$error.required">
                    Range请求值。
                </small>
                <small class="error" ng-show="form1.Range.$error.number">
                    Range必须为数字。
                </small>
                <small class="error" ng-show="form1.Range.$error.min">
                    Range最小值为7。
                </small>
                <small class="error" ng-show="form1.Range.$error.max">
                    Range最大值为109。
                </small>
            </div>
        </p>
        <p>
            <label>url</label>
            <input type="url" name="url" ng-model="url" required />
            <div class="error" ng-show="form1.url.$dirty && form1.url.$invalid">
                <small class="error" ng-show="form1.url.$error.required">
                    url请求值。
                </small>
                <small class="error" ng-show="form1.url.$error.url">
                    url必须为url格式。
                </small>
            </div>
        </p>
        <p>
            <label>pattern</label>
            <input type="text" name="pattern" ng-model="pattern" ng-pattern="/^[a-zA-Z]*$/" required />
            <div class="error" ng-show="form1.pattern.$dirty && form1.pattern.$invalid">
                <small class="error" ng-show="form1.pattern.$error.required">
                    pattern请求值。
                </small>
                <small class="error" ng-show="form1.pattern.$error.pattern">
                    pattern必须大小写字符。
                </small>
            </div>
        </p>
    </form>

第七种意况,使用pattern正则来证实用户输入的多少,下边是只可以输入英文字母大小写。

验证器 描述
required 必需的
ng-required 基于控制器布尔条件标记输入字段为必需
ng-minlength 最小长度
ng-maxlength 最大长度
ng-pattern 指定的正则表达式模式进行检查
type=”email” 电子邮件验证
type=”number” 数字验证
type=”date” 如果浏览器支持,显示一个HTML日期选择器。否则,默认为一个文本输入
type=”url” 验证URL文本输入

除此以外,AngularJS内置的验证器:

下边Insus.NET分别举个例证举办实施与认证:
AngularJS 10

 

AngularJS 11AngularJS 12

AngularJS 13

相关文章