自定义会员注册项加入js验证

2016-07-07 15:01 来源：www.chinab4c.com 作者：ecshop专家





如上图所示，qq为自定义会员注册项，加入了“QQ号码只能由数字组成”等js验证，几处简单的小修改，代码如下：

1、language/zh_cn/user.php，找到“/* user_passport.dwt js语言文件 */”并在下方插入：
  1. $_LANG['passport_js']['msg_qq_blank'] = '<font color=\"cc3300\">- QQ号码只能由数字组成</font>';
  2. $_LANG['passport_js']['msg_qq_length'] = '<font color=\"cc3300\">- QQ号码只能在5-10位字符之间</font>';
复制代码


2、js/user.js，找一处合适的地方，插入：
  1. function check_qq(qq)
  2. {
  3. if ( !Utils.isNumber(qq) )
  4. {
  5. document.getElementById('qq_notice').innerHTML = msg_qq_blank;
  6. }
  7. else if ( qq == '' || (qq.length < 5 || qq.length > 10) )
  8. {
  9. document.getElementById('qq_notice').innerHTML = msg_qq_length;
  10. }
  11. else
  12. {
  13. document.getElementById('qq_notice').innerHTML = msg_can_rg;
  14. }
  15. }
复制代码



并找到“qq_invalid”那里（就是弹窗那一块），修改整个判断，和上面对应起来：
  1. if (!Utils.isNumber(qq))
  2. {
  3. msg += delHtmlTag(msg_qq_blank) + '\n';
  4. }
  5. else if(qq == '' || (qq.length < 5 || qq.length > 10))
  6. {
  7. msg += delHtmlTag(msg_qq_length) + '\n';
  8. }
复制代码


3、最后修改模板，themes/模板名/user_passport.dwt，在合适的位置插入qq输入框，例如：
  1. <p id="extend_field2i"><label>QQ：</label>
  2. <span class="login_form_input"><input name="extend_field2" onblur="check_qq(this.value);" type="text" size="25" class="inputBg" /></span>
  3. <span class="login_form_point" id="qq_notice"><span>请填写您的QQ号码</span><span>方便及时为您解决问题</span></span>
  4. </p>
复制代码

回答：
还有一个额外的问题，例如：
  1. $_LANG['passport_js']['mobile_phone_invalid'] = '<font color=\"cc3300\">- 手机号格式错误，请重新输入</font>';
复制代码

这样的话，在js弹出窗口中就会出现把“<font color=\"cc3300\">”等这些html标签加进来的情况，如下图：


要去掉这些html标签的话，达到下图效果：


需要修改js/user.js，插入去html标签的函数：
  1. function delHtmlTag(str)
  2. {
  3. return str.replace(/<[^>]+>/g,"");//去掉所有的html标记
  4. }
复制代码

然后将：
  1. msg += mobile_phone_invalid + '\n';
复制代码

修改为：
  1. msg += delHtmlTag(mobile_phone_invalid) + '\n';
复制代码

就可以了

因为我需要用font加载一个css样式，所以不得已这样弄

这个功能不错，非常人性化，十分感谢！