利用JavaScript实现表单的验证和提交(前端拦截无用的表单提交)

时间:2019-04-19
本文章向大家介绍利用JavaScript实现表单的验证和提交(前端拦截无用的表单提交)，主要包括利用JavaScript实现表单的验证和提交(前端拦截无用的表单提交)使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

利用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>
随机文章
Javascript知识点必读
最近更新