检验表单
1. 主要功能
- 两次密码输入一致
- 邮箱格式正确
- 手机号格式正确
- 提交表单时校验表单项是否合法
2. 代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>表单校验</title>
<style type="text/css">
.regist_bg {
width: 100%;
height: 600px;
padding-top: 40px;
background-image: url(../img/bg.jpg);
}
.regist {
border: 7px inset #ccc;
width: 700px;
padding: 40px 0;
padding-left: 80px;
background-color: #fff;
margin-left: 25%;
border-radius: 10px;
}
input[type="submit"] {
background-color: aliceblue;
width: 100px;
height: 35px;
color: red;
cursor: pointer;
border-radius: 5px;
}
.warn {
color: red;
font-size: 12px;
display: none;
}
</style>
<!--
表单校验
1.两次密码输入一致
2.邮箱格式正确
3.手机号格式正确
4.提交表单时校验表单项是否合法
总结:
form表单的 onsubmit 事件 表单提交之前触发,用法实例:
οnsubmit="return 函数()" 函数返回true则表单正常提交,函数返回false则阻止表单提交
-->
</head>
<body>
<div class="regist_bg">
<div class="regist">
<form action="#" onsubmit="return judge()">
<table width="700px" height="350px">
<tr>
<td colspan="3">
<font color="#3164af">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input id="loginnameId" type="text" name="loginname" size="50"/>
<span id="loginnamewarn" class="warn">用户名不能为空</span>
</td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="50"/></td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="50"/>
<span id="pwdwarn" class="warn">密码不一致</span>
</td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input id="emailId" type="text" name="email" size="50"/>
<span id="emailwarn" class="warn">邮箱格式有误</span>
</td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" name="username" size="50"/></td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="gender" value="男" checked="checked"/>男
<input type="radio" name="gender" value="女"/>女
</td>
</tr>
<tr>
<td align="right">电话号码</td>
<td colspan="2"><input id="phoneId" type="text" name="phone" size="50"/>
<span id="phonewarn" class="warn">手机格式有误</span>
</td>
</tr>
<tr>
<td align="right">所在地</td>
<td colspan="3">
<select id="provinceId" onchange="selectCity(this.value)" style="width:150px">
<option value="">----请-选-择-省----</option>
<option value="0">北京</option>
<option value="1">辽宁省</option>
<option value="2">江苏省</option>
</select>
<select id="cityId" style="width:150px">
<option>----请-选-择-市----</option>
</select>
</td>
</tr>
<tr>
<td width="80" align="right">验证码</td>
<td width="100"><input type="text" name="verifyCode"/></td>
<td><img src="../img/checkCode.png"/></td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input id="rebtn" type="submit" value="注册"/>
</td>
</tr>
</table>
</form>
</div>
</div>
<script>
let loginpwdId = document.querySelector("#loginpwdId");//获取密码框
let reloginpwdId = document.querySelector("#reloginpwdId");//获取确认密码框
let pwdwarn = document.querySelector("#pwdwarn");//密码警告信息
let emailId = document.querySelector("#emailId");//邮件输入框
let emailwarn = document.querySelector("#emailwarn");//邮件警告信息
let phoneId = document.querySelector("#phoneId");
let phonewarn = document.querySelector("#phonewarn");
//1.两次密码输入一致
function pwd() {//校验确认密码
let boo = loginpwdId.value == reloginpwdId.value;//判断密码是否一致
if (boo) {//合法,隐藏警告
pwdwarn.style.display = "none";//隐藏
} else {//不合法,显示警告
pwdwarn.style.display = "inline";//显示
}
return boo;//返回密码是否合法
}
reloginpwdId.onchange = pwd;//当确认密码值改变时调用pwd方法执行
//2.邮箱格式正确
function mail() {//校验邮件格式
let email = /\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;//创建一个正则表达式对象, 匹配邮箱格式
let boo = email.test(emailId.value);//校验邮件格式
if (boo) {//合法,隐藏警告
emailwarn.style.display = "none";//隐藏
} else {//不合法,显示警告
emailwarn.style.display = "inline";//显示
}
return boo;//返回邮件是否合法
}
emailId.onchange = mail;//当邮件输入框的值改变时调用mail方法执行
//3.手机号格式正确
function pho() {
let phone = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;//创建一个正则表达式,匹配电话号码
let boo = phone.test(phoneId.value);
if (boo) {
phonewarn.style.display = "none";
} else{
phonewarn.style.display = "inline";
}
return boo;
}
phoneId.onchange = pho;
//4.提交表单时校验表单项是否合法.
function judge() {//表单提交校验
return pwd() && mail();//所有表单项都合法才返回true
}
</script>
</body>
</html>
注意：JS 函数当做方法执行时加括号，当做值注册给事件的时候不加。如：
phoneId.onchange = pho;
- 展示效果：
