从网上查到了相关的JS脚本代码，自己再做了一点小修改，集成到我的代码中。这里小编还有一篇超全的邮箱自动化匹配的文章分享给大家：《jquery实现邮箱自动填充提示功能》
六、密码强度
密码强度检测是为了给用户一个善意的提醒，希望用户对自己信息有更强的保护心理。所以即使密码为弱，也不应该影响数据提交。三种等级在下面会显示不同的提示语，会提示用户增加密码强度，或鼓励用户将密码强度更进一步，或肯定这个密码的强度。
密码强度在网上有很多插件，但是这次我自己写CSS，然后自己做匹配强度，这样做是为了能更好的集成到我的网站页面中。不同强度显示不同的颜色块与提示。
regex.checkPwdStrong = function(str) {//密码强度是否为强 var rule = /^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\W).*$/g; return rule.test(str); }; regex.checkPwdMedium = function(str) {//密码强度是否为中等 var rule = /^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$/g; return rule.test(str); }; regex.checkPwdPoor = function(str) {//密码强度是否为弱 var rule = /(?=.{6,}).*/g; return rule.test(str); };
.pwd_complex{padding:5px 0;height:15px} .pwd_complex span{height:6px;width:80px;margin-right:5px;display:inline-block;border:1px solid #c2c2c2;overflow:hidden} .pwd_complex .strong{border:1px solid #45ac07;background:#61cc1f} .pwd_complex .strong_word{color:#45ac07} .pwd_complex .medium{border:1px solid #45ac07;background:#9AF518} .pwd_complex .medium_word{color:#61cc1f} .pwd_complex .poor{border:1px solid #FF9C3A;background:#FFCA92} .pwd_complex .poor_word{color:#FF9C3A}
这里小编再给大家推荐一篇超全的邮箱密码强度验证的的文章分享给大家：《jquery判断密码强度的验证代码》
七、控制注册按钮
选中与不选中我本来做的是另外一个效果，就是没选中的时候将马上注册这个按钮隐藏掉，但后面觉得不妥，如果用户不小心将选中框取消，按钮又突然消失了，会使用户疑惑，有可能他们就终止注册或者刷新页面，重新输入相应的内容，无论做哪种操作，都会让用户感到不愉快。
后面我就想到将按钮变灰，在html中被禁用的 input 默认显示灰色，利用了一下用户的一些习惯。让按钮存在于页面上，暗示用户还有操作没完成，这里其实倒是可以再加些小提示，明确哪里没有做好，我偷懒了下没有做那种提示。
服务条款下面我用虚线标识了一下，并且在移上去的时候显示手的图标，暗示用户这里可以点击，点击服务条款弹出一个内容层，里面是协议内容，我没有做打开一张新页面那种提醒方式，我觉得这种时候用户的注意力应该集中在当前页面，而不是新开一个窗口，再去浏览那里的信息，分散了他的注意力，还有就是新开了一个窗口浏览器又多了个标签，挺占地方的。
八、最后验证
当我点击提交按钮的时候，会用JS脚本做最后的验证，防止将错误信息提交到服务器端，如果有输入还没符合要求，会有一个小手定位到错误的输入框旁边，并做了来回移动的动画效果。一个会动的错误提示，我相信能更加吸引住用户的注意，然后做相应修改。这里使用了CSS3的新技术，一直想把一些已经学到了的东西应用到实际操作中，这里正好做了个尝试。这个动画提示还很粗糙，但给了我一个新的想法。唯一觉得变复杂的就是CSS代码一下子庞大了很多。
这个动画就是在控制margin-left的值，做来回移动。
.cssanimations .ico_prompt{ -moz-animation-duration: .7s; -moz-animation-name: prompt_hand; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -webkit-animation-duration: .7s; -webkit-animation-name: prompt_hand; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -o-animation-duration: .7s; -o-animation-name: prompt_hand; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -ms-animation-duration: .7s; -ms-animation-name: prompt_hand; -ms-animation-iteration-count: infinite; -ms-animation-direction: alternate; animation-duration: .7s; animation-name: prompt_hand; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes prompt_hand { from {margin-left:10px} to {margin-left:2px} } @-moz-keyframes prompt_hand { from {margin-left:10px} to {margin-left:2px} } @-webkit-keyframes prompt_hand { from {margin-left:10px} to {margin-left:2px} } @-o-keyframes prompt_hand { from {margin-left:10px} to {margin-left:2px} @-ms-keyframes prompt_hand { from {margin-left:10px} to {margin-left:2px} }
九、按钮标记