javascript实现的表单验证

liuwenwenjava

浏览: 10002 次
性别:
来自: 北京

最近访客更多访客>>

whj1107

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web开发

javascript实现表单验证

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <style type="text/css">
   span{
    color:red;
   }
  </style>
  <script type="text/javascript">
   function check(frm)
   {
    /* \s-- 用户输入的空格制表符换行符空白字符等其中的一个这些都匹配
    *   $-- 字符串结束的地方匹配
    * /g 全局匹配也就是，每个地方都匹配
    *   \w a--z A---Z 之间 0---9之间都匹配
    *    \d 任意数字 0---9之间的任意数字
    */

    var uname=frm.username.value.replace(/(^\s+)|(\s+$)/g,"");
    var flag = true;
    document.getElementById("unameMsg").innerHTML="";
    document.getElementById("pwdMsg").innerHTML="";
    document.getElementById("pwdMsg2").innerHTML="";
    document.getElementById("ageMsg").innerHTML="";
    document.getElementById("phoneMsg").innerHTML="";
    document.getElementById("emailMsg").innerHTML="";
    //用户名的验证
    if(uname.length == 0)
    {
     document.getElementById("unameMsg").innerHTML="用户名不能为空";
     flag = false;
     }
    else if(uname.length <=5||uname.length >=10)
    {
      document.getElementById("unameMsg").innerHTML="用户名的长度必须是5-10位"
       flag = false;
     }
    else{
      if(!(/^\w+$/.test(uname))){
        document.getElementById("unameMsg").innerHTML="用户名格式必须是字母数字下划线";
        flag = false;
       }
     }
    //密码的验证
    var pwd = frm.pwd.value.replace(/(^\s+)|(\s+$)/g,"");
    if(pwd.length == 0)
    {
     document.getElementById("pwdMsg").innerHTML="密码不能为空";
     flag = false;
    }
    else if(pwd.length <= 5||pwd.length >=15){
      document.getElementById("pwdMsg").innerHTML="密码长度必须是5到15位";
      flag = false;
       }
    else{
     if(!(/^\w+$/.test(pwd))){
      document.getElementById("pwdMsg").innerHTML="密码必须是字母数字下划线";
      flag = false;
     }
     }
    //确认密码的验证
    var pwd2=frm.pwd2.value.replace(/(^\s+)|(\s+$)/g,"")
    if(pwd2.length == 0)
    {
      document.getElementById("pwdMsg2").innerHTML="确认密码不能为空";
      flag = false;
     }
    else if(pwd2.length <=5||pwd2.length >=15)
      {
        document.getElementById("pwdMsg2").innerHTML="确认密码的长度必须是5-15位";
        flag=false;
      }
    else {
      if(!(/^\w+$/.test(pwd2)))
      {
       document.getElementById("pwdMsg2").innerHTML="确认密码的格式必须是字母数字下划线";
       flag = false;
       }
     }
    //判断2次输入的密码是否正确
    if(pwd!=pwd2)
    {
     document.getElementById("pwdMsg2").innerHTML="两次输入的密码不一致,请重新输入";
     flag = false;
     }
    /*
    //验证性别
     if(!sex[0].checked && !sex[1].checked)
     {
      alert("请选择性别");
      flag = false;
      }
      */
    //判断年龄并且位数介于 1--3位之间
    var age = frm.age.value.replace(/(^\s+)|(\s+$)/g,"");
    if(age.length == 0)
    {
     document.getElementById("ageMsg").innerHTML="年龄不能为空!";
     flag = false;
     }
    else if(age < 1||age > 200)
    {
      document.getElementById("ageMsg").innerHTML="年龄必须是介于1到200之间";
      flag = false;
     }
    else{
      if(!(/^([0-9]\d+|[0-9])$/.test(age))){
        document.getElementById("ageMsg").innerHTML="年龄不能超过3位数或者不是数字";
        flag = false;
       }
     }
   //验证手机电话号码
   var phone=frm.phone.value.replace(/(s+)|(s+$)/g,"");
    if(phone.length == 0)
    {
     document.getElementById("phoneMsg").innerHTML="电话号码不能为空";
     flag = false;
    }
    else if((phone < 1 && phone > 11))
    {
     document.getElementById("phoneMsg").innerHTML="电话号码的长度必须是11位";
     flag = false;
     }
    else {
     //注意这里的意思和用户输入的信息是恰好相反的
      if(!(/^1[3,5,8]\d{9}$/.test(phone)))
      {
       document.getElementById("phoneMsg").innerHTML="电话号码的格式是13……,15……,18……组成";
       flag = false;
       }
     }

    //验证邮箱
    var email=frm.email.value.replace(/(^\s+)|(\s+$)/g,"");
    if(email.length == 0)
    {
      document.getElementById("emailMsg").innerHTML="邮箱不能为空";
      flag = false;
     }
    else if(email.length < 0||email.length >50)
    {
      document.getElementById("emailMsg").innerHTML="邮箱长度必须是0到50之间";
      flag = false;
     }
    else{
      if(!(/^[0-9a-zA-Z]\w+@[0-9a-zA-Z]{2,10}.(com.cn|com|net|cn)$/.test(email)))
      {
       document.getElementById("emailMsg").innerHTML="邮箱格式必须是标准格式";
       flag = false;
       }
     }

    return flag;

    }

  </script>
</head>

<body>
     <form onclick="return check(this)" method="post">
      用户名:<input type="text" name="username" /><span id=unameMsg ></span><br/>
      密码:<input type="password" name="pwd" /><span id=pwdMsg></span><br/>
      确认密码<input type="password" name="pwd2" /><span id=pwdMsg2></span><br/>
      年龄:<input type=text name="age" /><span id="ageMsg"></span><br/>
      手机号码:<input type="text" name="phone"/><span id="phoneMsg"></span><br/>
      邮箱:<input type="text" name="email" /><span id="emailMsg"></span><br/>
       <input type="submit" value="注册"/>
       <input type="reset" value="取消"/>
     </form>
</body>
</html>