<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
<!-- novalidate 去掉浏览器自带的验证功能-->
<form action="" method="get" novalidate name="myform">
<fieldset>
<legend>个人信息登陆:</legend>
手机号:
<input type="text" name="telnum" ng-model="telnum" ng-pattern='/^(1[^012][0-9]{9})$/' required>
密码:
<input type="password" name="password" ng-model="password" ng-minlength="6" ng-maxlength="14" required>
</fieldset>
</form>
<div style="color: red" ng-show="myform.telnum.$dirty && myform.telnum.$error.required">手机号必填</div>
<div style="color: red" ng-show="myform.password.$dirty && myform.password.$error.required">密码必填</div>
<div style="color: red" ng-show="myform.password.$dirty && myform.password.$error.minlength">密码必须大于6</div>
<div style="color: red" ng-show="myform.password.$dirty && myform.password.$error.maxlength">密码必须小于14</div>
<div style="color: red" ng-show="myform.telnum.$dirty && myform.telnum.$error.pattern">必须是11位手机号</div>
</body>
</html>语法:
表单里的name和ng-model必须保持一致,两者都不可缺少
required表示此项必填不能为空
ng-minlength最小字符长度
ng-maxlength最大字符长度
ng-pattren后跟正则表达式
修改过的输入框:
myform.username.$dirty
未修改过的输入框:
myform.username.$pristine
验证不通过的输入框:
myform.username.$invalid 当error为空集合时,说明验证通过,$invalid值为false
验证通过的输入框:
myform.username.$valid
验证某个条件是否通过:
myform.username.$error.XXX
这里的$error是错误集合
320
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
