`

自己写的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="点击我"/>
发表评论

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

相关推荐

    javascript表单验证例子

    JavaScript是Web开发中不可或缺的一部分，尤其在前端交互和数据验证方面扮演着重要角色。表单验证是JavaScript的一个关键应用场景，它允许我们在用户提交数据前检查输入的有效性，从而提高用户体验并减轻服务器的...

    JQuer用户名验证例子-java

    **jQuery用户名验证例子** 在网页应用中，用户输入的验证是非常关键的一环，它能确保数据的正确性，提升用户体验，防止恶意攻击等。...学习并理解这个例子，对于开发人员来说，有助于提升网页应用的用户体验和安全性。

    验证表单组件(js实现)

    - `right.gif`：通常用于表示验证通过的提示图标，当用户输入满足条件时显示。 - `及时客户端验证.html`：这个文件可能展示了实时验证的例子，即在用户输入时立即进行验证，如输入长度、格式检查等。 - `文件域...

    js 验证页面 checkform

    在网页开发中，JavaScript（简称JS）是一种广泛用于客户端脚本语言，特别是在处理表单验证时，它能够提供实时的数据检查，从而提升用户体验并减轻服务器端的压力。"js 验证页面 checkform"是一个常见的实践，它涉及...

    Js验证输入数据范围

    在JavaScript（Js）中，数据验证是Web开发中不可或缺的一部分，它主要用于确保用户提交的数据符合预设的条件或格式。这个DEMO示例是关于如何使用JavaScript来验证输入数据的范围，这通常涉及到数字、日期或其他类型...

    JS正则验证大全 (.Net客户端验证)

    JavaScript（简称JS）是一种轻量级的脚本语言，常用于网页和网络应用中的客户端数据验证，以确保用户输入的数据符合预期格式。在.NET开发环境中，客户端验证是提高用户体验的重要一环，因为它可以在数据提交到服务器...

    js验证代码测试成功锦集

    JavaScript，简称JS，是一种轻量级的解释型编程语言，常用于网页和网络应用的开发。在网页中，JavaScript主要用于增强用户体验，实现动态交互。在提供的文件内容中，我们可以看到两个具体的JavaScript验证代码示例，...

    js提交表单及js表单验证

    ### JS提交表单及JS表单验证 在Web开发中，JavaScript经常被用来增强用户体验，其中一个重要的应用领域就是表单验证。通过JavaScript进行前端验证，可以及时反馈用户输入错误，提高交互效率。本文将详细解释如何...

    html、js简单表单验证

    在这个例子中，当用户在输入框中输入时，如果长度小于6，就会弹出警告。JavaScript还可以用于更复杂的验证逻辑，如检查密码强度、日期格式、手机号码格式等。 此外，CSS可以用于美化验证提示信息，比如错误提示的...

    js 验证

    在Web开发中，JavaScript验证是必不可少的一环，它可以帮助我们在用户提交数据前验证输入的有效性，避免无效数据进入服务器，提高用户体验，减少服务器压力。 这篇名为“js验证”的博文可能详细探讨了如何利用...

    验证邮箱格式的JS

    在Web开发中，表单验证是不可或缺的一部分，它确保用户输入的数据满足特定的格式或条件。其中，邮箱验证是最常见的需求之一。本篇文章将详细介绍如何使用JavaScript来验证邮箱格式，并深入探讨正则表达式的应用、DOM...

    简单的表单验证

    开发者通常会在`submit`事件上添加验证逻辑，以在用户尝试提交时检查输入。 例如，验证一个必填字段可以这样写： ```javascript document.getElementById('myForm').addEventListener('submit', function(event) {...

    js练习4：使用HTML5验证博客园注册页面.zip

    // 检查所有验证条件 if (!validateEmail() || !validatePhoneNumber()) { alert("请检查您的输入并修正错误"); return; } // 如果所有验证都通过，可以继续处理表单提交 // ... }); ``` 在这个压缩包文件...

    超漂亮常用的js例子

    总之，“超漂亮常用的js例子”这个资源很可能提供了丰富的JavaScript实战代码，对于学习和提升JavaScript技能，尤其是前端交互部分，非常有帮助。开发者可以通过研究这些例子，理解其工作原理，然后应用到自己的项目...

    JS通用表单验证函数1

    在JavaScript编程中，表单验证是网页开发中的一个重要环节，它确保用户输入的数据符合预期的格式和规则，从而提高用户体验并防止错误数据的提交。"JS通用表单验证函数1"是一个针对这一需求的解决方案，它提供了一种...

    js实用快速理解的例子

    `alert()`函数就是用来弹出带有消息的对话框，这里是"该提示框是通过onload事件调用的。" 第二个例子涉及变量的声明和使用。在JS中，`var`关键字用于声明变量，如`var firstname`。接着，可以给变量赋值，如`...

    SweetAlert是一款使用纯js制作的消息警告框插件

    SweetAlert是一款纯JavaScript编写的轻量级但功能强大的消息警告框插件，它为Web开发者提供了更为美观且可自定义的对话框体验。在传统的Web应用中，原生的警告框通常只提供基本的确认或警告功能，而SweetAlert则通过...

    JavaScript表单验证大全

    ### JavaScript表单验证大全 #### 1. 字符串长度限制与判断字符长度 在Web应用中，我们经常需要对用户输入的数据进行长度限制。例如，一个用户名字段可能需要限制在一定长度范围内，以防止过长的数据导致数据库...

    原生js实现表单验证（提交后验证）

    这段代码首先获取表单元素的值，然后逐个检查它们是否满足预设的条件。例如，检查用户名是否为空，邮箱是否符合正则表达式，以及密码长度是否至少为8个字符。如果验证失败，将弹出警告信息，并阻止表单的进一步提交...

    JS通用表单验证函数

    在这个例子中，`id`字段必须输入非空且不含空格的字符，否则提交时会触发警告并阻止表单提交。 **注意事项与扩展功能：** 编写正则表达式时应谨慎，避免潜在的安全问题，防止恶意用户利用正则漏洞。此外，该函数还...

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