javascript用户注册提示效果的简单实例

 更新时间:2013年08月17日 12:29:02   作者:  
这个可以增加用户验证,不用js alert来作提示,而是在右边提示,现在很多网站都这样做,有需要的朋友可以参考一下
复制代码 代码如下:

<script type="text/javascript">
var $= function(id)
{
 return document.getElementById(id);
}
function check()
{
 if( $('username').value == "" )
 {
  $('eusername').innerHTML='<p class="login_jjB"> 请输入注册用户名!</p>';  
  return false;
 }
 else
 {
  $('eusername').innerHTML='';
 }
 if( $('passwd').value == "" )
 {
  $('epasswd').innerHTML='<p class="login_jjB"> 输入密码!</p>';
  return false;  
 }
 else
 {
  $('epasswd').innerHTML='';
 }
 if( $('passwd2').value !=  $('passwd').value )
 {
  $('epasswd2').innerHTML='<p class="login_jjB"> 两次输入密码不一致!</p>';
  return false;  
 }
 else
 {
  $('epasswd2').innerHTML='';
 }
 if( $('email').value == "" )
 {
  $('eemail').innerHTML='<p class="login_jjB"> 邮箱地址!</p>'; 
  return false; 
 }
 else
 {
  $('eemail').innerHTML='';
 }
 if( $('vaild').value == "" )
 {
  $('evaild').innerHTML='<p class="login_jjB"> 请输入右边验证码!</p>'; 
  return false; 
 }
 else
 {
  $('evaild').innerHTML='';
 } 
}
</script>
<form name="registerform" id="registerform" method="POST" action="">
<input type="hidden" name="action" value="register">
  <input type="hidden" name="user_type" value="1">
<ul><li><h1>用户名:</h1>
    <div class="login_jjA">
    <span style="display:none;">
    <select name="cityid" id="cityid" style="width:100px;"    onblur="changelocation(document.registerform.cityid.options[document.registerform.cityid.selectedIndex].value)">
    <option value="">--公司不限--</option>
         <option value="2">--杭州舍易房地产代理有限公司--</option>
         </select>
              <select  name="cityareaid"  style="width:100px;"  id="cityareaid">
                  <option value="0">--不限门店--</option>
              </select>
    </span>
    <input name="username"  id="username" type="text" class="jinru_in" value=""   onblur="check();"  onclick="check();" /></div>
    <div  id="eusername"></div>
 </li>
 <li><h1>密码:</h1>
 <div class="login_jjA"><input name="passwd" type="password" id="passwd" class="jinru_in"  onblur="check();"  onclick="check();"  /></div>
    <div  id="epasswd"></div>
 </li>
 <li><h1>确认密码:</h1>
 <div class="login_jjA"><input name="passwd2" type="password" id="passwd2" class="jinru_in"  onblur="check();"  onclick="check();"  /></div>
    <div  id="epasswd2"></div>
 </li>
    <li><h1>邮箱地址:</h1>
 <div class="login_jjA"><input name="email" type="text" size="30" id="email"  value=""  class="jinru_in"  onblur="check();"  onclick="check();"  /></div>
    <div id="eemail"></div>
 </li>
 <li><h1>验证码:</h1>
 <div class="login_jjA">
    <input name="vaild" type="text" class="inlen"  id="vaild"  onblur="check();"  onclick="check();" size="5"  /><img  src="/valid.php" /></div>
    <div  id="ever"></div>
 </li>
 <li style="height:35px;"><h1> </h1>
 <div class="jinruD"><input value=" " type="submit"  onclick="javascript:return check();"  class="login_jj_btn"/></div>
 </li>
 </ul>
  </form>

相关文章

  • js 毫秒转天时分秒的实例

    js 毫秒转天时分秒的实例

    下面小编就为大家分享一篇js 毫秒转天时分秒的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11
  • 图解JavaScript作用域链底层原理

    图解JavaScript作用域链底层原理

    当代码在一个环境中执行时,会创建变量对象的一个作用域链,作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问,下面这篇文章主要给大家介绍了关于JavaScript作用域链底层原理的相关资料,需要的朋友可以参考下
    2021-11-11
  • js实现的Easy Tabs选项卡用法实例

    js实现的Easy Tabs选项卡用法实例

    这篇文章主要介绍了js实现的Easy Tabs选项卡用法,以完整实例形式较为详细的分析了JavaScript鼠标事件动态操作页面元素样式的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JavaScript中的数据类型有哪些

    JavaScript中的数据类型有哪些

    本文介绍了JavaScript中的八种数据类型:Undefined、Null、Boolean、Number、String、Symbol、BigInt和Object,基础数据类型存储在栈内存中,而引用数据类型存储在堆内存中,每种数据类型都有其特定的用途和特性
    2025-01-01
  • 微信小程序获取用户信息及手机号(后端TP5.0)

    微信小程序获取用户信息及手机号(后端TP5.0)

    这篇文章主要为大家详细介绍了微信小程序获取用户信息及手机号,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 简单方法判断JavaScript对象为null或者属性为空

    简单方法判断JavaScript对象为null或者属性为空

    对已声明但未初始化的和未声明的变量执行typeof,都返回undefined,null表示一个空对象指针,typeof操作会返回object
    2014-09-09
  • js 动态生成html 触发事件传参字符转义的实例

    js 动态生成html 触发事件传参字符转义的实例

    下面小编就为大家带来一篇js 动态生成html 触发事件传参字符转义的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

    js实现的真正的iframe高度自适应(兼容IE,FF,Opera)

    由于项目上的需要,要用一个iframe高度自适应的功能,在google上搜了很久,找了一些修改了下。大家可以测试下。
    2010-03-03
  • JavaScript实现同一页面内两个表单互相传值的方法

    JavaScript实现同一页面内两个表单互相传值的方法

    这篇文章主要介绍了JavaScript实现同一页面内两个表单互相传值的方法,涉及javascript鼠标事件及页面元素赋值操作的相关技巧,需要的朋友可以参考下
    2015-08-08
  • javascript实现下雨效果

    javascript实现下雨效果

    本文主要介绍了javascript实现下雨效果的示例代码。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03

最新评论