利用JavaScript实现表单的验证和提交(前端拦截无用的表单提交)
注册表单提交,利用js来拦截掉无用的注册信息,同时验证注册是否通过
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<script type="text/javascript">
function checkUsername(){
var username=document.getElementById("username").value;
if(username.length<6||username.length>16){
document.getElementById("usernamefalse").style.visibility="visible";
return false;
}else{
document.getElementById("usernamefalse").style.visibility="hidden";
return true;
}
}
function chechpwd(){
var pwd=document.getElementById("pwd").value;
if(pwd.length<6||pwd.length>16){
document.getElementById("pwdfalse").style.visibility="visible";
return false;
}else{
document.getElementById("pwdfalse").style.visibility="hidden";
return true;
}
}
function chechphone(){
var phone=document.getElementById("phone").value;
var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
if (!myreg.test(phone)) {
document.getElementById("phonefalse").style.visibility="visible";
return false;
}else{
document.getElementById("phonefalse").style.visibility="hidden";
return true;
}
}
function checkread(){
var rule=document.getElementById("rule");
if(!rule.checked){
document.getElementById("rulefalse").style.visibility="visible";
return false;
}else{
document.getElementById("rulefalse").style.visibility="hidden";
return true;
}
}
function checkall(){
var cun=checkUsername();
var cpd=chechpwd();
var cp=chechphone();
var cr=checkread();
if(cun&&cpd&&cp&&cr){
return true;
}else{
return false;
}
}
</script>
<style type="text/css">
label{
visibility: hidden;
}
</style>
</head>
<body bgcolor="gainsboro">
<center>
<h1>欢迎注册</h1>
<h3>每一天,乐在沟通</h3>
<hr />
<!--action指目标地址,method指传输方式-->
<form action="" method="post" onsubmit="return checkall()">
<table border="0" cellspacing="5" cellpadding="10" width="120">
<tr>
<td colspan="3">
<input type="text" name="" id="username" placeholder="昵称" size="40" onblur="checkUsername()"/>
<label id="usernamefalse" style="color: red;">昵称要在6到16位之间</label>
</td>
</tr>
<tr>
<td colspan="3">
<input type="password" name="" id="pwd" placeholder="密码" size="40""chechpwd()"/>
<label id="pwdfalse" style="color: red;">密码要在6到16位之间</label>
</td>
</tr>
<tr>
<td colspan="3">
<select name="区号">
<option value="">+86</option>
<option value="">+852</option>
<option value="">+853</option>
<option value="">+886</option>
</select>
<input type="text" name="" id="phone" placeholder="手机号码" size="30" align="right" onblur="chechphone()" />
<label id="phonefalse" style="color: red;">手机号不存在</label>
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
<input type="radio" name="sex" id="" value="" />男
</td>
<td align="left">
<input type="radio" name="sex" id="" value="" checked="checked"/>女
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="submit" value="立即注册" />
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="reset" value="重置 "/>
</td>
</tr>
<tr>
<td colspan="3">
<input type="checkbox" name="" id="rule" value="" onblur="return checkread()"/><a href="#"><font size="2">我已阅读并同意相关服务条款和隐私政策</font></a>
<br />
<label id="rulefalse" style="color: red;">必须勾选相关协议</label>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>