表单验证更新

This commit is contained in:
landaiqing 2023-05-01 22:10:16 +08:00
parent 381fefa889
commit 5ea2a40ec4
2 changed files with 34 additions and 8 deletions

View File

@ -12,7 +12,7 @@
</head>
<body>
<div class="main">
<form action="form">
<form action="form" onsubmit="return func();">
<div class="container">
<div class="card">
<a class="singup">jQuery-表单验证</a>
@ -40,7 +40,7 @@
</div>
<button class="enter">Enter</button>
<button class="enter" type="submit">Enter</button>
</div>
</div>
@ -60,8 +60,25 @@
$('.Password').blur(function () {
$('.Password').tooltip('password');
})
})
function func(){
var flag1= $('.Username').tooltip('userName');
var flag2= $('.Email').tooltip('email');
var flag3= $('.Password').tooltip('password');
if(flag1&&flag2&&flag3){
return true;
}else{
alert("请填写正确的用户名密码或邮箱!!!");
return false;
}
}
</script>
</html>

View File

@ -6,24 +6,25 @@
var success = "success";
var error = "Error";
var info = "UserName";
//这些方法里面的this指针已经被替换为了$(this)
var reg = /^[a-zA-Z0-9\_\+\-\&\$\*]{6,10}$/;
if (this.val()==''){
// $(".info1").css('color','#000');
$(".info1").show().html(info);
return;
return false;
}
else if (this.val().match(reg)) {
$(".info1").css('color','green');
// $(".info1").css('background','#fff');
$(".info1").show().html(success);
return true;
}
else {
$(".info1").css('color','red');
$(".info1").show().html(error);
return false;
}
@ -37,37 +38,45 @@
if (this.val()==''){
// $(".info1").css('color','#000');
$(".info3").show().html(info);
return;
return false;
}
else if (this.val().match(reg)) {
$(".info3").css('color','green');
$(".info3").show().html(success);
return true;
}
else {
$(".info3").css('color','red');
$(".info3").show().html(error);
return false;
}
},
//邮箱验证
email : function( ) {
var success = "success";
var error = "Error";
var info = "Email";
var reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
if (this.val()==''){
// $(".info1").css('color','#000');
$(".info2").show().html(info);
return;
return false;
}
else if (this.val().match(reg)) {
$(".info2").css('color','green');
$(".info2").show().html(success);
return true;
}
else {
$(".info2").css('color','red');
$(".info2").show().html(error);
return false;
}
},
}
};