利用js对表单进行基本的验证
验证功能:
- 用户名必须填写
- 密码长度8-16之间
- 邮箱地址,手机号必须符合正确格式
- 必须同意(勾选复选框)才能提交
js代码段:
<script>
//对document.getElementById进行简单封装
function $id(id) {
return document.getElementById(id);
}
$id("submitBtn").addEventListener('click',function () {
//获取表单元素
let f = document.forms[0];
//获取用户名
let uname = f.username.value;
//获取密码
let pwd = f.password.value;
//获取电话
let phone = f.tel.value;
//获取邮箱地址
let email = f.email.value;
//标记量,用于判断表单是否能够提交
let torf = false;
//用户名不能为空
if (uname.length == 0) {
$id("vname").innerText="请输入用户名";
torf = false;
}else{
$id("vname").innerText="";
torf = true;
}
//密码长度必须为8-16之间
if (pwd.length>=8 && pwd.length<=16){
$id("vpwd").innerText="";
torf = true;
} else if (pwd.length == 0) {
$id("vpwd").innerText="密码不能为空";
torf = false;
}else{
$id("vpwd").innerText="密码长度必须为8-16";
torf = false;
}
//验证电话
let regexP = /^1[385]\d{9}$/;
if (regexP.test(phone)){
$id("vphone").innerText="";
torf = true;
}else if (phone.length == 0){
$id("vphone").innerText="电话号码不能为空";
torf = false;
} else{
$id("vphone").innerText="电话号码格式不对";
torf = false;
}
//验证邮箱
let regexE = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
if (regexE.test(email)){
$id("vemail").innerText="";
torf = true;
} else if (email.length == 0){
$id("vemail").innerText="邮箱不能为空";
torf = false;
} else{
$id("vemail").innerText="邮箱格式输入有误";
torf = false;
}
// 复选框验证
if (document.querySelector('input[name=sure]').checked){
$id("vsure").innerText="";
}else{
$id("vsure").innerText="请勾选";
torf = false;
}
if (torf){
f.submit();
}
})
</script>
注册页面设计(css样式就不在这献丑了,重点也不在这):
<div class="right">
<div style="margin: 40px 0 20px 68px;">
<img src="TB1_Gn8RXXXXXXqaFXXXXXXXXXX-380-54.png">
</div>
<div class="right1">
<span class="span1"><b>欢迎注册</b></span><br>
<span class="span2">已有帐号?<a href="#" style="text-decoration: none">登录</a></span>
<form style="padding: 60px 0 0 45px" action="">
<table>
<tr>
<td>用户名:</td>
<td><input type="text" name="username"></td>
<td><span id="vname"></span></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password"></td>
<td><span id="vpwd"></span></td>
</tr>
<tr>
<td>电话号码:</td>
<td><input type="text" name="tel"></td>
<td><span id="vphone"></span></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email"></td>
<td><span id="vemail"></span></td>
</tr>
</table>
<button type="button" class="button" id="submitBtn" >注册</button>
</form>
<input type="checkbox" value="1" class="check" name="sure">
<label style="font-size: 10px">阅读并接受</label>
<a href="#" style="font-size: 10px">《天猫用户协议》</a>
<label style="font-size: 10px">及</label>
<a href="#" style="font-size: 10px">《天猫隐私权保护声明》</a>
<span id="vsure"></span>
</div>
</div>
测试结果: