<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
fieldset{
width: 50%;
margin: 0 auto;
}
input{
width: 100%;
height: 50px;
}
meter{
width: 100%;
height: 50px;
}
</style>
</head>
<body>
<fieldset>
<legend>学生档案</legend>
<p>姓名：</p>
<form action="">
<input type="text" placeholder="请输入姓名" id="xingming" required="required">
<p>手机号码：</p>
<input type="text" placeholder="请输入手机号" id="shouji" required="required">
<p>邮箱地址：</p>
<input type="email" >
<p>所属学院:</p>
<input type="text" list="cars" required>
<datalist id="cars">
<option value="xxx学院" ></option>
<option value="yyy学院" ></option>
<option value="zzz学院" ></option>
</datalist>
<p>入学成绩：</p>
<input type="text" value="0" id="cj" required>
<p>基础水平：</p>
<meter max="100" min="0" low="59" high="80" id="pos" optimum="90" value="0"></meter>
<p>入学时间：</p>
<input type="date" name="" id="" required>
<p>毕业时间：</p>
<input type="date" name="" id="" required>
<p></p>
<input type="submit" value="提交" id="tijiaoBtn">
</form>
</fieldset>
</body>
<script>
let pos = document.getElementById('pos')
let shouJi = document.getElementById('shouji')
let tijiaoBtn = document.getElementById('tijiaoBtn')
let xingming = document.getElementById('xingming')
let cj = document.getElementById('cj')
// console.log(cj.value)
cj.onblur = function(){
pos.value=cj.value
}
// console.log(tijiaoBtn)
// pos.onclick = function(e){
// let dianjix = e.offsetX
// let zongx = pos.offsetWidth
// pos.value = dianjix/zongx*(pos.max)
// }
//提交按钮
// tijiaoBtn.onclick =function(){
// if(shouJi.onblur()){
// alert(提交成功)
// shouJi.value=''
// }else{
// // alert(有错误)
// }
// }
// 正则验证 返回布尔
function checkReg(reg,ele){
return reg.test(ele.value);
}
shouJi.onblur = function(){
if(checkReg(/^1[34578]\d{9}$/,shouji)){
this.style.border = '2px solid green'
}else{
shouji.value=''
alert('手机格式输入错误')
}
}
</script>
</html>
1313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
