将相对应的代码粘贴在对应的文件下,或者直接修改我的script和link路径可以直接运行~
直接上成品:(提交之后会将内容显示在网址中)
知识总结:
1、提交的数据放到form属性中
2、method想让其显示在网址上,要给下面label中的添加name属性
3、提交类题:将要提交的内容和submit按钮放在一个form中。给form添加一个onsubmit属性,里用js实现规则
4、submit只有函数返回为true时才会提交操作,每次点击submit属性都会刷新一次页面。
一)HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<link rel="stylesheet" type="text/css" href="log2.css">
<script type="text/javascript" src="log3.js"></script>
</head>
<body >
<div id="div">
<h3>旺财云注册</h3><!--action是提交的服务器地址,method是否将提交的写在网址上-->
<form action="#" method="get" id="re" onsubmit="sub()">
<input type="text" name="user:" placeholder="userName...." id="userName"><br>
<input type="password" name="passWord:" placeholder="passWord...." id="passWord"><br>
<input type="submit" value="注册" id="button" >
</form>
</div>
</body>
</html>
二)CSS代码:
/*简单的CSS样式设置*/
#div{
width: 200px;
height: 150px;
background: cornflowerblue;
text-align: center;
position: relative;
left: 270px;
}
#button{
width: 170px;
position: relative;
top: 10px;
}
三)JavaScript代码:
分为两部分,sub函数是本文用到的,方法二是另一种思路。
function sub (){
//通过函数添加规则
let user= document.getElementById("userName").value;
let passWord= document.getElementById("passWord").value;
let regUser=/^[a-zA-Z]{4,16}$/;
let regPassWord=/^[1-9]{6}$/;
if(!regUser.test(user)){
alert("请输入4到16位纯字母");
return false;
}
if (!regPassWord.test(passWord)){
alert("请输入6位纯数字的密码");
return false;
}
return true;
}
//解决方法二,本案例没用此方法
window.onload=function() {
//通过JavaScript的dom和bom来给form添加事件
document.getElementById("re").onsubmit = function () {
let user = document.getElementById("userName").value;
let passWord = document.getElementById("passWord").value;
let regUser = /^[a-zA-Z]{4,16}$/;
let regPassWord = /^[1-9]{6}$/;
if (!regUser.test(user)) {
alert("请输入4到16位纯字母");
return false;
}
if (!regPassWord.test(passWord)) {
alert("请输入6位纯数字的密码");
return false;
}
return true;
}
}