Angularjs 表单验证3-密码、确认密码处理

来源:互联网 发布:淘宝手机靓号 编辑:程序博客网 时间:2024/06/05 17:04

一、表单定义

    <form class="form form-horizontal" name="myForm" novalidate>        <div class="form-group">            <label class="col-md-2 control-label"><span style="color:red">*</span>会员编号:</label>            <label class="col-md-1 control-label">@AccountHelper.Code_Above</label>        </div>        <div class="form-group">            <label class="col-md-2 control-label">                <span class="text-danger">*</span> 旧登录密码            </label>            <div class="col-md-4">                <input class="form-control" type="password" ng-model="entity.OldPwd" name="OldPwd" placeholder="请输入旧登录密码"                        required />                <small class="text-danger" ng-show="myForm.OldPwd.$dirty && myForm.OldPwd.$invalid">                    <span ng-show="myForm.OldPwd.$error.required">密码是必须的</span>                </small>            </div>        </div>        <div class="form-group">            <label class="col-md-2 control-label">                <span class="text-danger">*</span> 新登录密码            </label>            <div class="col-md-4">                <input class="form-control" type="password" ng-model="entity.NewPwd" name="NewPwd" placeholder="请输入登录密码"                        required />                <small class="text-danger" ng-show="myForm.NewPwd.$dirty && myForm.NewPwd.$invalid">                    <span ng-show="myForm.NewPwd.$error.required">密码是必须的</span>                </small>            </div>        </div>        <div class="form-group">            <label class="col-md-2 control-label">                <span class="text-danger">*</span> 确认密码            </label>            <div class="col-md-4">                <input class="form-control" type="password"                        ng-model="entity.LoginPwdC"                         name="LoginPwdC" placeholder="请输入再次登录密码"                        required />                <small class="text-danger" ng-show="myForm.LoginPwdC.$dirty && myForm.LoginPwdC.$invalid">                    <span ng-show="myForm.LoginPwdC.$error.required">密码是必须的</span>                </small>                <small class="text-danger" ng-show="myForm.LoginPwdC.$dirty&&entity.LoginPwdC!=entity.NewPwd">两次输入的密码不一致</small>            </div>        </div>        <div class="form-group">            <div class="col-md-2"></div>            <div class="col-md-4">                <button type="submit" class="btn btn-primary" ng-click="save()"                         ng-disabled="myForm.$invalid||entity.LoginPwdC!=entity.NewPwd">保存</button>            </div>        </div>    </form>


二、特别说明:

确认密码使用的是$scope的属性

<small class="text-danger" ng-show="myForm.LoginPwdC.$dirty&&entity.LoginPwdC!=entity.NewPwd">两次输入的密码不一致</small>
   <button type="submit" class="btn btn-primary" ng-click="save()"                         ng-disabled="myForm.$invalid||entity.LoginPwdC!=entity.NewPwd">保存</button>

更多:

AngularJs 自定义表单验证

AngularJs表单验证实例1

AngularJS阻止事件冒泡$event.stopPropagation()


原创粉丝点击