angularJS中表单验证

最新推荐文章于 2022-03-27 19:22:23 发布

小悟空爱吃桃

最新推荐文章于 2022-03-27 19:22:23 发布

阅读量190

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gramdog/article/details/79413253

本文介绍了一个使用AngularJS实现的表单验证示例，包括必填项和电子邮件格式验证。通过$dirty和$invalid等属性显示错误提示，并禁用提交按钮直到所有字段都正确填写。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$dirty	表单有填写记录
$valid	字段内容合法的
$invalid	字段内容是非法的
$pristine	表单没有填写记录

<form ng-app="myApp" ng-controller="validateCtrl"

name="myForm" novalidate>

<p>用户名:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">用户名是必须的。</span>
</span>
</p>

<p>邮箱:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</p>

<p>
<input type="submit"
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
</p>

</form>