<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.bg_red{
color: #FF0000;
}
.border_red{
border:2px solid #FF0000;
}
.bg_green{
color: #32cd32;
}
.border_green{
border:2px solid #32cd32;
}
</style>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>
$(function(){
$(".name").blur(function(){
if($(".name").val()==""){
$(".name_text").html("用户名不能为空!");
$(".name_text").addClass("bg_red");
$(".name").addClass("border_red");
return false;
}else{
$(".name_text").html("√");
$(".name_text").addClass("bg_green");
$(".name").addClass("border_green");
$(".pw").focus();
}
});
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
$(".pw").blur(function(){
if($(".pw").val()==""){
$(".pw_text").html("密码不合法!");
$(".pw_text").addClass("bg_red");
$(".pw").addClass("border_red");
return false;
}else if($(".pw").val().length<6||$(".pw").val().length>12){
$(".pw_text").html("密码长度不合法!");
$(".pw_text").addClass("bg_red");
$(".pw").addClass("border_red");
return false;
}else if(false == mediumRegex.test($(".pw").val())){
$(".pw_text").html("密码不合法--至少要包含两种字符!");
$(".pw_text").addClass("bg_red");
$(".pw").addClass("border_red");
return false;
}else{
$(".pw_text").html("√");
$(".pw_text").addClass("bg_green");
$(".pw").addClass("border_green");
$(".pw2").focus();
}
});
$(".pw2").blur(function(){
if($(".pw2").val()==""){
$(".pw2_text").html("密码不合法!");
$(".pw2_text").addClass("bg_red");
$(".pw2").addClass("border_red");
return false;
}else if($(".pw2").val().length<6||$(".pw2").val().length>12){
$(".pw2").
$(".pw2_text").html("密码长度不合法!");
$(".pw2_text").addClass("bg_red");
$(".pw2").addClass("border_red");
return false;
}else if($(".pw").val()!=$(".pw2").val()){
$(".pw2_text").html("密码不一致!");
$(".pw2_text").addClass("bg_red");
$(".pw2").addClass("border_red");
return false;
}else{
$(".pw2_text").html("√");
$(".pw2_text").addClass("bg_green");
$(".pw2").addClass("border_green");
$(".email").focus();
}
});
var emailtest = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
$(".email").blur(function(){
if($(".email").val()==""){
$(".email_text").html("email不能为空!");
$(".email_text").addClass("bg_red");
$(".email").addClass("border_red");
return false;
}else if(!$(".email").val().match("@")){
$(".email_text").html("@!");
$(".email_text").addClass("bg_red");
$(".email").addClass("border_red");
return false;
}else if(!emailtest.test($(".email").val())){
$(".email_text").html("请输入正确的邮箱");
$(".email_text").addClass("bg_red");
$(".email").addClass("border_red");
return false;
}else{
$(".email_text").html("√");
$(".email_text").addClass("bg_green");
$(".email").addClass("border_green");
$(".phone").focus();
}
});
$(".phone").blur(function(){
if($(".phone").val()==""){
$(".phone_text").html("phone不能为空!");
$(".phone_text").addClass("bg_red");
$(".phone").addClass("border_red");
return false;
}else if(isNaN($(".phone").val())){
$(".phone_text").html("电话号为数字");
$(".phone_text").addClass("bg_red");
$(".phone").addClass("border_red");
return false;
}else if($(".phone").val().length<16||$(".phone").val().length>18){
$(".phone_text").html("电话号为16-18位");
$(".phone_text").addClass("bg_red");
$(".phone").addClass("border_red");
return false;
}else{
$(".phone_text").html("√");
$(".phone_text").addClass("bg_green");
$(".phone").addClass("border_green");
$(".idcard").focus();
}
});
$(".idcard").blur(function(){
if($(".idcard").val()==""){
$(".idcard_text").html("card不能为空!");
$(".idcard_text").addClass("bg_red");
$(".idcard").addClass("border_red");
return false;
}else if($(".idcard").val().length<16||$(".idcard").val().length>18){
$(".idcard_text").html("16-18位");
$(".idcard_text").addClass("bg_red");
$(".idcard").addClass("border_red");
return false;
}else{
$(".idcard_text").html("√");
$(".idcard_text").addClass("bg_green");
$(".idcard").addClass("border_green");
}
});
function mySubmit(flag){
return flag;
};
$("#myForm").submit(function(){
var info1=$(".name_text").text();
var info2=$(".pw_text").text();
var info3=$(".pw2_text").text();
var info4=$(".email_text").text();
var info5=$(".phone_text").text();
var info6=$(".idcard_text").text();
if(info1=="√"&&info2=="√"&&info3=="√"&&info4=="√"&&info5=="√"&&info6=="√"){
return mySubmit(true);
}else{
return mySubmit(false);
}
});
});
</script>
</head>
<body>
<center>
<form action="www.baidu.com" id="myForm" method="post" onsubmit="return mySubmit(true)">
<table border="1" cellspacing="0">
<tr>
<td>
用户名:
</td>
<td>
<input type="text" class="name" />
<span class="name_text"></span>
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password" class="pw" />
<span class="pw_text"></span>
</td>
</tr>
<tr>
<td>
确认密码:
</td>
<td>
<input type="password" class="pw2" />
<span class="pw2_text"></span>
</td>
</tr>
<tr>
<td>
邮箱:
</td>
<td>
<input type="text" class="email" />
<span class="email_text"></span>
</td>
</tr>
<tr>
<td>
手机号:
</td>
<td>
<input type="text" class="phone" />
<span class="phone_text"></span>
</td>
</tr>
<tr>
<td>
身份证:
</td>
<td>
<input type="text" class="idcard" />
<span class="idcard_text"></span>
</td>
</tr>
<tr align="center">
<td colspan="2">
<input class="sb" type="submit" value="提交" />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
An_form验证
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- bundle前面就是某个第三方的fmwk里的info.plist文件里的 executable 这个key值 不是...
- This chapter covers Effects with jQuery jQuery's utility ...
- 从PS导入 在PS中将素材分好图层。 将做好的素材保存成PSD文件。 打开AE>双击项目窗口>导入PSD文件 选择...
