java 前端--Jquery表单验证

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery正则验证</title>
<link type="text/css" rel="stylesheet" href="css/2.jQuery正则验证.css"/>
</head>

<body>
<form action="#" method="post">
  <table>
    <tr>
       <td>用户名:</td>
       <td><input type="text" name="uname"/><span></span></td>
    </tr>
    <tr>
       <td>密码:</td>
       <td><input type="password" name="pwd"/><span></span></td>
    </tr>
    <tr>
       <td>手机:</td>
       <td><input type="text" name="phone"/><span></span></td>
    </tr>
     <tr>
       <td>邮箱:</td>
       <td><input type="text" name="email"/><span></span></td>
    </tr>
    <tr>
       <td>身份证:</td>
       <td><input type="text" name="cardno"/><span></span></td>
    </tr>
    <tr>
       <td><input type="submit" value="提交"/></td>
       <td><input type="reset" value="重置"/></td>
    </tr>
    
  </table>
</form>
</body>
</html>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/2.jQuery正则验证.js"></script>
html
/*获取焦点给提示规则 ,边框黄色   失去焦点验证给相应提示,边框绿色
1.用户名:规则:数组字母组成,但是不能以数字开头的6到10位

2.密码:规则:数字字母特殊字符(!@#¥%&*)组成,但是不能以特殊字符开头的6-16位

3.手机:规则:13,15,,17,18开头的11位手机号码

4.邮箱:
规则:
数字字母下划线@数字字母下划线.com
数字字母下划线@数字字母下划线.cn
数字字母下划线@数字字母下划线.com.cn

5.身份证:18位身份证号:前6位随机数字,中间8位出生年月  后4位编号 */
$(function(){
       //1.用户名获取焦点和失去焦点
      funUname();
      //2.密码获取焦点和失去焦点
      funPwd();
      //3.手机获取焦点和失去焦点
      funPhone();
      //4.邮箱获取焦点和失去焦点
      funEmail();
      //5.身份证获取焦点和失去焦点
      funcardno();
  
       
});

//1.用户名获取焦点和失去焦点
function funUname(){
   //获取焦点    
   $("[name=uname]").focus(function(){
       $(this).next().html("请输入由数字字母组成,但是不能以数字开头的6位用户名!");
       $(this).next().removeClass().addClass("one");
   });    
   
   //失去焦点
  $("[name=uname]").blur(function(){
       var uname=$("[name=uname]").val();
       var unameReg=/^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
       if(unameReg.test(uname)){
          $(this).next().html("输入正确!");
          $(this).next().removeClass().addClass("two");
       } else{
            $(this).next().html("输入错误,用户名由6位数组字母组成,但是不能以数字开头!");
            $(this).next().removeClass().addClass("three");
        }
    });
}



//2.密码获取焦点和失去焦点
function funPwd(){
   //获取焦点    
   $("[name=pwd]").focus(function(){
       $(this).next().html("请输入密码由数字字母特殊字符(!@#¥%&*)组成,但是不能以特殊字符开头的6-16位!");
       $(this).next().removeClass().addClass("one");
   });    
   
   //失去焦点
  $("[name=pwd]").blur(function(){
       var pwd=$("[name=pwd]").val();
       var pwdReg=/^[a-zA-Z0-9][a-zA-Z0-9!@#¥%&*]{5,15}$/;
       if(pwdReg.test(pwd)){
          $(this).next().html("输入正确!");
          $(this).next().removeClass().addClass("two");
       } else{
            $(this).next().html("输入错误,密码由数字字母特殊字符(!@#¥%&*)组成,但是不能以特殊字符开头的6-16位!");
            $(this).next().removeClass().addClass("three");
        }
    });
}


//3.手机获取焦点和失去焦点
function funPhone(){
   //获取焦点    
   $("[name=phone]").focus(function(){
       $(this).next().html("请输入手机由13,15,,17,18开头的11位手机号码!");
       $(this).next().removeClass().addClass("one");
   });    
   
   //失去焦点
  $("[name=phone]").blur(function(){
       var phone=$("[name=phone]").val();
       var phoneReg=/^(13|15|17|18)\d{9}$/;
       if(phoneReg.test(phone)){
          $(this).next().html("输入正确!");
          $(this).next().removeClass().addClass("two");
       } else{
            $(this).next().html("输入错误手机由13,15,17,18开头的11位手机号码!!");
            $(this).next().removeClass().addClass("three");
        }
    });
}

//4.邮箱获取焦点和失去焦点
function funEmail(){
   //获取焦点    
   $("[name=email]").focus(function(){
       $(this).next().html("请输入邮箱格式如下:holly@qq.com 或 holly@sina.com.cn 或 holly@sina.cn");
       $(this).next().removeClass().addClass("one");
   });    
   
   //失去焦点
  $("[name=email]").blur(function(){
       var email=$("[name=email]").val();
       var emailReg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
       if(emailReg.test(email)){
          $(this).next().html("输入正确!");
          $(this).next().removeClass().addClass("two");
       } else{
            $(this).next().html("输入错误邮箱格式如下:holly@qq.com 或 holly@sina.com.cn 或 holly@sina.cn!!");
            $(this).next().removeClass().addClass("three");
        }
    });
}

//5.身份证获取焦点和失去焦点
function funcardno(){
   //获取焦点    
   $("[name=cardno]").focus(function(){
       $(this).next().html("请输入身份证由18位身份证号:前6位随机数字,中间8位出生年月  后4位编号");
       $(this).next().removeClass().addClass("one");
   });    
   
   //失去焦点
  $("[name=cardno]").blur(function(){
       var cardno=$("[name=cardno]").val();
       var cardnoReg=/^\d{6}(19|20)\d{2}(0?[1-9]|1[0-2])(0?[1-9]|[1-2]\d|3[0-1])\d{4}$/;
       if(cardnoReg.test(cardno)){
          $(this).next().html("输入正确!");
          $(this).next().removeClass().addClass("two");
       } else{
            $(this).next().html("输入错身份证由18位身份证号:前6位随机数字,中间8位出生年月  后4位编号!");
            $(this).next().removeClass().addClass("three");
        }
    });
}
js

 

posted @ 2017-07-13 10:55  周无极  阅读(338)  评论(0编辑  收藏  举报