1.运行结果
2.代码及解释
<!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>
*{margin: 0px;padding: 0px;}
#maindiv{
width: 550px;
height: 500px;
border: 2px solid rgb(75, 163, 156);
margin-left: 2px;
background-color: rgb(162, 226, 235);
}
span{
height: 6px;
line-height: 6px;
width: 100%;
margin-left: 1px;
position: absolute;
top:10px;
left:250px;
}
p{
color: rgb(250, 64, 64);
}
.mytext2{
margin-top: 45px;
}
.mytext3{
margin-top: 90px;
}
.mytext4{
margin-top: 130px;
}
.mytext5{
margin-top: 174px;
}
.mytext6{
margin-top: 217px;
}
.mytext7{
margin-top: 260px;
}
.mytext8{
margin-top: 305px;
}
</style>
</head>
<body>
<div id = "maindiv">
<form action="https://www.baidu.com/" method="POST" name = "myform" onsubmit="return doSubmit()" >
登录账号:<input type="text" name="myid"onblur="checkMyid()"/><br/><span class = "mytext1"><p>6-18位有效字符(字母、数字、下划线)</p></span><br/>
登录密码:<input type="password" name="mypass"onblur="checkMypass()"/><br/><span class = "mytext2"><p>6-18位任意字符</p></span><br/>
重复密码:<input type="password" name="mydbpass" onblur="checkMydbpass()"/><br/><span class = "mytext3"><p>重复密码与登录密码一致</p></span><br/>
性 别:<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex"value="女"/>女<br/><span class = "mytext4"><p>必须选择一个</p></span>
<br/>
年 龄:<input type="text" name="myage" onblur="checkMyage()"/><br/><span class = "mytext5"><p>大于0的整数</p></span><br/>
手机号码:<input type="text" name="myphone" onblur="checkMyphone()"/><br/><span class = "mytext6"><p>由1开头的11位整数</p></span><br/>
邮 箱:<input type="text" name="myemail" onblur="checkMyemail()"/><br/><span class = "mytext7"><p>有效的Email地址</p></span><br/>
学 历:<select name="myed">
<option value="">请选择</option>
<option name="myed" value="小学">小学</option>
<option name="myed" value="初中">初中</option>
<option name="myed" value="高中">高中</option>
<option name="myed" value="专科">专科</option>
<option name="myed" value="本科">本科</option>
</select>
<br/><span class = "mytext8"><p>必须选择一个选项</p></span><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</div>
</body>
<script>
//检查账号
function checkMyid(){
var id = document.myform.myid.value;
if(id.match(/^\w{6,18}$/) == null){
alert("请输入正确的账号！");
return false;
}
return true;
}
var pass = null;
//检查密码
function checkMypass(){
pass = document.myform.mypass.value;
if(pass.match(/^\w{6,18}$/) == null){
alert("请输入正确格式的密码!");
return false;
}
return true;
}
//重复密码的检查
function checkMydbpass(){
var dbpass = document.myform.mydbpass.value;
if(dbpass != pass){
alert("两次输入的密码不一致!");
return false;
}
return true;
}
//年龄
function checkMyage(){
var age = document.myform.myage.value;
if(age.match(/^\d{1,3}$/) == null){
alert("请输入正取的年龄!");
return false;
}
if(age>150){
alert("年龄应小于150!");
return false;
}
return true;
}
//电话号码
function checkMyphone(){
var phone = document.myform.myphone.value;
if(phone.match(/^1\d{10}/) == null){
alert("请输入正确的手机号码!");
return false;
}
return true;
}
//邮箱
function checkMyemail(){
var mail = document.myform.myemail.value;
if(mail.match(/^\w+@\w+(\.\w+){1,2}$/) == null){
alert("请输入正确的邮箱格式");
return false;
}
return true;
}
//检查性别有没有选
function checkSex(){
var sex = document.myform.sex.value;
if(sex.match(/^.$/) == null){
alert("性别不能为空!");
return false;
}
return true;
}
//检查学历
function checkEd(){
var ed = document.myform.myed.value;
if(ed == ""){
alert("学历不能为空");
return false;
}
return true;
}
function doSubmit(){
return checkMyid() && checkMypass() && checkMydbpass() && checkSex() && checkMyage() && checkMyphone() && checkMyemail() && checkEd();
}
</script>
</html>