angularjs 研究1 : 表单的验证
最近在项目中用到angularjs的表单验证,通过网上的一些文章和自己的感觉,可以大致中css样式(和ng-命令对应的class)和 js(格式为: 表单名.字段名.验证的点。如 loginForm.email.$invalid ) 两个方向上进行研究 1.css样式:每个ng-命令都会在html代码中对应一个或多个className。 如下图所示 <form name="loginForm" ng-submit="login(loginJson)" novalidate>
<div class="form-group ptrt">
<label for="email">Email address</label>
<input type="email" class="form-control" ng-model="loginJson.email" id="email" name="email" placeholder="Email" required ng-minlength="5" ng-maxlength="20" />
<span ng-show="loginForm.email.$dirty && loginForm.email.$invalid">
<span ng-show="loginForm.email.$error.minlength" class="form-validation-error">email长度不能小于5</span>
<span ng-show="loginForm.email.$error.maxlength" class="form-validation-error">email长度不能大于20</span>
<span ng-show="loginForm.email.$error.required" class="form-validation-error">email不能为空</span>
</span>
</div>
<button type="submit" class="btn btn-default" ng-disabled="loginForm.email.$invalid">Submit</button>
而且这些className 在用户的交互中,也会发生变化。 下面会根据一些常见的验证过程,来说明用户交互和className的变化 ng-disabled="loginForm.email.$invalid || loginForm.password.$invalid"
由于添加了ng-disabled命令,提交的按钮为不可用状态。
<span ng-show="loginForm.email.$dirty && loginForm.email.$invalid">
<span ng-show="loginForm.email.$error.minlength" class="form-validation-error">email长度不能小于5</span>
<span ng-show="loginForm.email.$error.maxlength" class="form-validation-error">email长度不能大于20</span>
<span ng-show="loginForm.email.$error.required" class="form-validation-error">email不能为空</span>
<span ng-show="!loginForm.email.$error.minlength && !loginForm.email.$error.maxlength && loginForm.email.$error.email" class="form-validation-error">email格式不正确</span>
</span>
上面的代码意思是输入框的值发生变化但是还有还没有通过验证的时候,就显示下面的4种错误提示中的一种。需要注意的是第四种错误提示,由于它会第一和第二的错误提示可能会同时出现,所以要对它的显示要做一个格外的限制。 这里有一个补充说明的地方就是 <input type="checkbox" id="isAutoLogin" />
针对这种checkbox,如果使用像icheck 这种改变checkbox默认样式的插件,会对其ng-model 的取值造成印象。 这里有另一种验证方式 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |