Angularjs 文本框验证

来源：互联网发布：dbc2000 装备数据库编辑：程序博客网时间：2024/05/29 16:50

/*HTML:*/

<div class="container">
<div class="form row">
<form class="form-horizontal col-sm-offset-3 col-md-offset-3" id="register_form" name="myForm" novalidate ng-submit="register()">
<h3 class="form-title">注册用户</h3>
<div class="col-sm-9 col-md-9">

<div class="form-group">
<i class="fa fa-user fa-lg"></i>
用户名:
<input class="form-control required" type="text" name="username" ng-model="username" required />
<span ng-show="myForm.username.$invalid && submitted">
<span style="color:red" ng-show="myForm.username.$error.required">用户名是必须的。</span>
</span>
</div>

<div class="form-group">
<i class="fa fa-user fa-lg"></i>
密码:
<input class="form-control required" type="password" name="password" ng-model="password" required />

<span ng-show="myForm.password.$invalid && submitted">
<span style="color:red" ng-show="myForm.password.$error.required">密码是必须的。</span>
</span>
</div>

<div class="form-group">
<i class="fa fa-user fa-lg"></i>
确认密码:
<input class="form-control required" type="password" name="rpassword" ng-model="rpassword" required />
<span ng-show="myForm.rpassword.$invalid && submitted">
<span style="color:red" ng-show="myForm.rpassword.$error.required">确认密码是必须的。</span>
</span>
<span ng-show="myForm.rpassword.$valid">
<span style="color:red" ng-show="password!=rpassword">两次密码输入不一致</span>
</span>
</div>

<div class="form-group">
<i class="fa fa-envelope fa-lg"></i>
邮箱:
<input class="form-control eamil" type="email" name="email" ng-model="email" required />
<span style="color:red" ng-show="myForm.email.$invalid && submitted">
<span ng-show="myForm.email.$error.required">邮箱是必须的。</span>
</span>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid ">
<span ng-show="myForm.email.$error.email">非法的邮箱地址。</span>
</span>
</div>
<div class="form-group">
<input type="submit" class="btn btn-success pull-right" value="登录 " />
</div>
</div>
</form>
</div>
</div>

</body>

/*JS：*/

Angularjs文本框验证要想实现效果必须写在form标签中否则不会生效，submitted 几乎在每个文本框验证中都有填写这是为了实现统一判断，当用户点击登录按键且所有文本框

都没添值时，它会统一报错提示。

0 0