angular js实现表单验证

来源:互联网 发布:mac os 磁盘清理 编辑:程序博客网 时间:2024/04/30 13:12

1、html代码        <form name="testform" novalidate="novalidate">            验证表单是否已经填写:<input type="text" required ng-model="user.name"/>*不能为空*            <label>{{user.name}}</label>            <hr />            验证长度最小值为5:<input type="text" ng-minlength="5" ng-model="user.minlength"/>*最小长度为5*            <label>{{user.minlength}}</label>            <hr />            验证长度最大值为20:<input type="text" ng-maxlength="20" ng-model="user.maxlength"/>*最大长度为20*            <label>{{user.maxlength}}</label>            <hr />            验证匹配指定的正则表达式:<input type="text" ng-pattern="/^[a-zA-Z]*\d$/" ng-model="user.pattern" />*输入为字母*            <label>{{user.pattern}}</label>            <hr />            验证电子邮件:<input type="email" name="email" ng-model="user.email" />*输入电子邮箱*            <label>{{user.email}}</label>            <hr />            验证是否为数字:<input type="number" name="age" ng-model="user.age" />*输入数字*            <label>{{user.age}}</label>            <hr />            验证是否为链接:<input type="url" name="homepage" ng-model="user.facebook_url" />*输入为链接*            <label>{{user.facebook_url}}</label>        </form>2、js代码<script>    var app = angular.module('myApp', []);    app.controller('MyController',['$scope','$filter', function ($scope,$filter) {        $scope.person = {name:'weijie'};}]);


0 0
原创粉丝点击