<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{color: red;font-size: 12px;display: none;}
</style>
<script type="text/javascript">
/*
form表单：用来进行前后端数据交互
action :数据将要提交的地址URL
method :get(GET) post(POST) HTTP协议
get: suceess.html?username='jack'&pwd='123456' 简单 安全性隐患 传输内容有限制
post: suceess.html 安全性高，没有传输大小限制 麻烦
onsubmit: 提交事件 return 表达式;
若表达式为true或者'' 校验通过
若表达式为false 校验不通过
前后端交互：请求--应答 模式
表单校验：在前端完成数据合法性校验
*/
</script>
</head>
<body>
<form action="success.html" method="post" onsubmit="return dis()">
<label for="">用户名：</label><input type="text" id="username"><span id="tip-name">*用户名为8-12为字符</span><br>
<label for="">密码</label><input type="text" id="pwd"><span id="tip-pwd">*密码为6位数字</span><br>
<input type="submit" value="登录">
</form>
<script type="text/javascript">
var txtName=document.getElementById('username');
var txtPwd=document.getElementById('pwd');
var tipName=document.getElementById('tip-name');
var tipPwd=document.getElementById('tip-pwd');
//校验
function dis(){
//获取输入框内容
var tName=txtName.value;
var tPwd=txtPwd.value;
//判断
if(!(tName.length>=8&&tName.length<=12)){
tipName.style.display='inline-block';
return false;//校验不通过
}
if(tPwd.length!=6){
tipPwd.style.display='inline-block';
return false;
}
return true;
}
</script>
</body>
</html>form表单校验
猜你喜欢
转载自blog.csdn.net/weixin_44606660/article/details/87620955
今日推荐
周排行