sublime表单验证

最新推荐文章于 2023-04-12 19:40:43 发布

愚城

最新推荐文章于 2023-04-12 19:40:43 发布

阅读量553

点赞数

分类专栏： js学习笔记

本文链接：https://blog.csdn.net/fangyuwuzhu/article/details/79743100

版权

js学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0; padding: 0;}
.center{
margin: auto auto;
width: 600px;
padding-top:100px ;
}
.di{
height: 50px;
}
.di input{
height: 40px;
width: 400px;
}
.red{
color:red;
}
.green{
color:green;
}
</style>
</head>
<body>
<div class="center">
<form action="http://www.baidu.com" οnsubmit="return formCheck()">
<div class="di">
<input type="text" placeholder="用户名为3~6位字符" id="username" /><span id="usernametips"></span>
</div>
<div class="di">
<input type="password" placeholder="密码长度为6~12位字符" id="password1" /><span id="password1tips"></span>
</div>
<div class="di">
<input type="password" placeholder="确认密码" id="password2" /><span id="password2tips"></span>
</div>
<div class="di">
<input type="submit" value="注册" style="background-color: #317EF3;color: #FFFFFF;font-size: 20px;"/>
</div>
</form>
</div>
<script>
function formCheck(){
var usernameInput=document.getElementById("username");
var usernametips=document.getElementById("usernametips");
var password1Input=document.getElementById("password1");
var password1tips=document.getElementById("password1tips");
var password2Input=document.getElementById("password2");
var password2tips=document.getElementById("password2tips");
if(usernameInput.value.length<3 || usernameInput.value.length>6){
usernametips.innerHTML="用户名不合法";
usernametips.className="red";
return false;
}else{
usernametips.innerHTML="用户名合法";
usernametips.className="green";
}
if(password1Input.value.length<6 || password1Input.value.length>12){
password1tips.innerHTML="密码不合法";
password1tips.className="red";
return false;
}else{
password1tips.innerHTML="密码合法";
password1tips.className="green";
}
if(password2Input.value.length<6 || password2Input.value.length>12){
password2tips.innerHTML="密码不合法";
password2tips.className="red";
return false;
}else {
if(password1Input.value != password2Input.value){
password2tips.innerHTML="两次输入不一致";
password2tips.className="red";
return false;
}else{
password2tips.innerHTML="密码合法";
password2tips.className="green";
}
}
return true;
}
</script>
</body>

</html>

愚城

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
sublime表单验证

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{margin: 0; padding: 0;} .center{ m
复制链接

扫一扫