发表于: 2018-10-20 23:35:22
1 271
今天完成的:
前台“修改密码”、“实名认证”、“银行卡绑定”的表单验证、http请求等。
明天计划的:
“更换手机”、银行卡绑定/解绑、“我的理财”,以及其他页面的假数据渲染。
现在感觉只是单纯的数据请求/渲染、写写事件还是比较简单,涉及表单验证的时候稍有点懵了。。
(忽然感觉css样式也有点烦 ( *⊙~⊙) )
遇到的问题:
错误信息提示的写法、正则卡了一下。关于ng-show和ng-message掌握的不熟练。
通过ng-disabled使按钮禁用遇到问题:实名认证的前两个页面禁用都实现了,然后第三个页面基本照着第二个写的,按钮还是禁用不掉。然后耗了挺久在排查问题,最后发现是将input框绑定上ng-model就可以了(红字)
<form name="verify3Form" novalidate>
<div class="verify_tip">
本次操作需要短信验证,请输入138XXXX8888收到的短信验证码。
</div>
<div class="verify_code lineHeight_34" style="display: flex;">
<span style="flex: none">验证码:</span>
<input type="text" class="form-control" placeholder="请输入短信验证码" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" autocomplete="off" ng-model="smsCode" ng-minlength="6" maxlength="6" required>
<button style="flex: none; margin-right: 10px;" class="btn btn-default">重发验证码</button>
</div>
<div class="sms_tip">
<p>60s后可重新获取</p>
</div>
<div>
<button type="submit" class="complete_verify next_step"ng-disabled="verify3Form.$invalid" ng-click="verifyDone()">下一步</button>
</div>
</form>
今日收获:
var reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{7,20}$/;
这个正则表达式规定了必须包括字母数字特殊字符中任意2种组合。
ng-message的简单应用:
<p ng-message="required">邮箱必填</p>
<p ng-message="minlength">邮箱长度太短</p>
<p ng-message="maxlength">邮箱长度太长</p>
<p ng-message="email">邮箱无效</p>
有个问题,就是 ng-show 或者 ng-message 可不可以对文档中的两个值进行比较然后得出 true 或 false 来进行展示或隐藏。在写修改密码那块的时候有个校验是要两次新密码输入一致,想着能不能将两个双向绑定的值作为表达式在 ng-show 中校验是否相等,不过没能实现。还是说只有自带的那些 $invalid $valid $pristine $ dirty 什么的。
评论