`

自己写的js验证例子，不满足条件时会有文字提示的！不用alert！

QQCSSITeye 
阅读更多

<script type="text/javascript">





function check(obj){
if(obj.value.length < 6 || obj.value.length > 16) {

document.getElementById("errorinfo").style.display = "block";
document.getElementById("submit").disabled = true;
}
 
 
 
  else {
 
  document.getElementById("errorinfo").style.display = "none";
  document.getElementById("submit").disabled = false; 
  }
 
 
   
}
function checkPwd(obj)
{
  if (obj.value.length < 6 || obj.value.length > 16) {
  document.getElementById("errorpwd").style.display = "block";
  document.getElementById("submit").disabled = true;
 
 
 
  }
  else {
 
  document.getElementById("errorpwd").style.display = "none";
  document.getElementById("submit").disabled = false;
 
  }
 
   
}
function checkRePwd(obj)
{
  var p=document.getElementById("password");
  if(obj.value.length<6||obj.value.length>16)
  {
     document.getElementById("errorrepwd1").style.display = "block";
      document.getElementById("submit").disabled = true;
    
   

  }
  if (p.value != obj.value) {
  document.getElementById("errorrepwd2").style.display = "block";
  document.getElementById("submit").disabled = true;
 
 
 
  }
  else {
    document.getElementById("errorrepwd1").style.display = "none";
  document.getElementById("errorrepwd2").style.display = "none";
  document.getElementById("submit").disabled = false;
 
  }
 
   
}
function checkemail(obj)
{
var cEmail=obj.value;

if(cEmail.match(/[\w-]+@{1}[\w-]+\.{1}\w{2,4}(\.{0,1}\w{2}){0,1}/ig)!=cEmail){
  document.getElementById("erroremail").style.display = "block";
   document.getElementById("submit").disabled = true;
 
  }
else{
  document.getElementById("erroremail").style.display = "none";
   document.getElementById("submit").disabled = false;
 
  }


 
   
}
function checkqq(obj){
var q=obj.value;
var filter=/^\s*[.0-9]{5,10}\s*$/;
    if(!filter.test(q)){
    document.getElementById("errorqq").style.display = "block";
    }else{
    document.getElementById("errorqq").style.display = "none";
   

}
}


</script>






<link href="<%=request.getContextPath()%>/style.css" rel="stylesheet" type="text/css">
</head>

<body bgcolor="#CCCCCC"  >
<p style="color:#FF0000" align="center">温馨提示:带&quot;*&quot;为必填内容</p>

<form name="form1" method="post" action="servlet/RegisterServlet" >
  <table width="41%" height="300" border="0" align="center" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
    <tr bgcolor="#FFFFFF">
      <td height="27" colspan="2" align="center" background="images/table.gif"><strong><font color="#FFFFFF">欢迎加入</font></strong></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td width="19%" height="27" align="center">账号：</td>
      <td width="81%" height="27"><input name="username" type="text" id="username" onblur="check(this)"/>
     * <div style="display:none" id="errorinfo">账号长度必须在6至16个字符之间</div></td>
    
    </tr>
    <tr bgcolor="#FFFFFF">
      <td width="19%" height="27" align="center">密码：</td>
      <td width="81%" height="27"><input name="password" type="password" id="password" onblur="checkPwd(this)"/>
     * <div style="display:none" id="errorpwd">密码长度必须在6至16个字符之间</div></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td width="19%" height="27" align="center">再次输入密码：</td>
      <td width="81%" height="27"><input name="rePassword" type="password" id="rePassword" onblur="checkRePwd(this)" />
     *
      <div style="display:none" id="errorrepwd1">两次输入密码不一致</div>
      <div style="display:none" id="errorrepwd2">密码长度必须在6至16个字符之间</div></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="27" align="center">性别：</td>
      <td height="27"><select name="sex" id="sex">
          <option value="男" selected>男</option>
          <option value="女">女</option>
        </select></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="27" align="center">邮件：</td>
      <td height="27"><input name="email" type="text" id="email" onblur="checkemail(this)"/>*
<div style="display:none" id="erroremail">输入邮箱格式有误</div></td>

    </tr>
  
    <tr bgcolor="#FFFFFF">
      <td height="31" align="center">QQ：</td>
      <td height="31"><input name="qq" type="text" id="qq" onblur="checkqq(this)" />
    

      <div style="display:none" id="errorqq">请输入正确的qq</div></td>
    </tr>
    <tr bgcolor="#FFFFFF">
      <td height="31" align="center">头象：</td>
      <td height="31"><input name="tx" type="radio" value="images/face01.gif" checked>
        <img src="<%=basePath%>images/face01.gif" width="32" height="32">
        <input type="radio" name="tx" value="images/face02.gif">
        <img src="<%=basePath%>images/face02.gif" width="32" height="32">
        <input type="radio" name="tx" value="images/face03.gif">
        <img src="<%=basePath%>images/face03.gif" width="32" height="32"> <br>
        <input type="radio" name="tx" value="images/face04.gif">
        <img src="<%=basePath%>images/face04.gif" width="32" height="32">
        <input type="radio" name="tx" value="images/face05.gif">
        <img src="<%=basePath%>images/face05.gif" width="32" height="32">
        <input type="radio" name="tx" value="images/face06.gif">
        <img src="<%=basePath%>images/face06.gif" width="32" height="32"></td>
    </tr>
   
    <tr bgcolor="#FFFFFF">
   
      <td height="31" colspan="2" align="center">
       <input type="submit" value="提交"  id="submit" style="width:50px" disabled="disabled"/>    &nbsp;&nbsp;
  <input style="width:50px;" type="reset" value="重置"/>&nbsp;&nbsp;
  <input style="width:50px;" type="button" value="返回" onClick="window.location.href='http://localhost:8080/lastuse/servlet/QueryServlet'">
      </td>
    </tr>
  </table>
</form>
效果图如下
  • 大小: 10.4 KB
分享到：
| java——MD5加密算法（含验证）
评论
1 楼 卖火柴的老特工 2011-05-14  
用图片作提交键，起submit作用，把鼠标移到图片上有文字提示：
<input type="image" src=" " alt="点击我"/>
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    temporary-email-address-validator-js:临时电子邮件地址验证器javascript

    javascript的临时/一次性电子邮件地址验证器使用带有Bower的Bower进行bower install temporary-email-address-validator或在此存储库中下载Disposable Email Validator javascript类。例子 [removed][removed]...

    工作中常用到的JS表单验证代码(包括例子)

    代码如下: ////—————-Author Teng————- //验证是否为空 function check_blank(obj, obj_name){ if(obj.value != ”){ return true; }else{ alert&#40;obj_name + “所填不能为空！”&#41;; obj.value = ...

    正则表达式

    所以,JavaScript可能会包含如下的代码: var pattern = /s$/; 这行代码创建一个新的RegExp对象,并将它赋给变量parttern.这个特殊的RegExp对象和所有以字母"s"结尾的字符串都匹配.用RegExp()也可以定义 一个等价...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    在b/s开发中经常用到的javaScript技术整理

    在b/s开发中经常用到的javaScript技术整理 一、验证类 1、数字验证内 1.1 整数 1.2 大于0的整数 （用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iMax 1.5 整数不能小于iMin 2、时间类 ...

    精通javascript

    • layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章（\第14章） • 14.1.htm confirm()方法用作判断条件 • 14.2.htm alert&#40;&#41;方法与confirm()方法的使用 ...

    EXT教程EXT用大量的实例演示Ext实例

    1.5. 为什么自己按照例子写的代码，显示出来总找不到图片 1.6. 我们还需要什么？ 1.7. 入门之前，都看helloworld。 1.7.1. 直接使用下载的发布包 1.7.2. 只把必要的东西放进项目中 2. 震撼吧！让你知道ext表格...

    EXT2.0中文教程

    1.5. 为什么自己按照例子写的代码，显示出来总找不到图片 1.6. 我们还需要什么？ 1.7. 入门之前，都看helloworld。 1.7.1. 直接使用下载的发布包 1.7.2. 只把必要的东西放进项目中 2. 震撼吧！让你知道ext表格控件...

    javascript验证手机号和实现星号(*)代替实例

    一、JavaScript替换手机号中间4位 // 匹配手机号首尾，以类似“123****8901”的形式输出 '12345678901'.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'); 示例 &lt;!doctype html&gt; &lt;...script type="text/ja

    精通JavaScript

    • layerlib.js 跨浏览器DHTML库 • 13.12.htm 跨浏览器DHTML库的使用 第14章（\第14章） • 14.1.htm confirm()方法用作判断条件 • 14.2.htm alert()方法与confirm()方法的使用 • 14.3....

    Ext 开发指南 学习资料

    1.4. 为什么自己按照例子写的代码，显示出来总找不到图片 1.5. 我们还需要什么？ 1.6. 入门之前，都看helloworld。 1.6.1. 直接使用下载的发布包 1.6.2. 只把必要的东西放进项目中 2. 震撼吧！让你知道ext表格控件的...

    利用JS判断字符串是否含有数字与特殊字符的方法小结

    本文主要介绍的是利用JS判断字符串是否含有数字与特殊字符的方法，文中有几种不同的方法，包括普通的JS验证法、正则表达式法，另外还有判断是否为浮点数的js函数，在最后还将简要介绍下isNAN函数的使用方法和例子，...

    【经验总结】编写JavaScript代码时应遵循的14条规律

    本文讲述了编写JavaScript代码时应遵循的14条规律。分享给大家供大家参考，具体如下： 1. 总是使用 ‘var’ 在javascript中，变量不是全局范围的就是函数范围的，使用”var”关键词将是保持变量简洁明了的关键。当...

    XML轻松学习手册--XML肯定是未来的发展趋势，不论是网页设计师还是网络程序员，都应该及时学习和了解

    　第二：新知识肯定会有很多新概念，尝试理解和接受，您才可能提高。不要害怕和逃避，毕竟我们还年轻。 　本文共分五大部分。分别是XML快速入门，XML的概念，XML的术语，XML的实现，XML的实例分析。最后附录介绍了...

    Ext Js权威指南(.zip.001

    Ex4.0共2个压缩包特性，《ext js权威指南》 前　言 第1章　ext js 4开发入门 / 1 1.1　学习ext js必需的基础知识 / 1 1.2　json概述 / 3 1.2.1　认识json / 3 1.2.2　json的结构 / 3 1.2.3　json的例子 / 4 1.2.4　...

    LayuiForm表单.txt

     layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)  });  //监听提交  form.on('submit(demo1)', function(data){  layer.alert(JSON.stringify(data.field), {...

    ASP.NET常用代码

    Redirect会导致post－back的产生从而丢失了错误信息，所以页面导向应该直接在服务器端执行，这样就可以在错误处理页面得到出错信息并进行相应的处理 10.清空Cookie Cookie.Expires=[DateTime]; Response.Cookies(...

Magicbox
Global site tag (gtag.js) - Google Analytics