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'};
}]);
angular js实现表单验证
最新推荐文章于 2024-04-16 21:42:54 发布