表单验证和表单提交

最新推荐文章于 2024-04-20 14:59:10 发布

朱国武

最新推荐文章于 2024-04-20 14:59:10 发布

阅读量237

点赞数 1

分类专栏： JavaScript笔记

本文链接：https://blog.csdn.net/GuoWuZhu/article/details/102618936

版权

JavaScript笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用户注册时，对输入的数据进行前台校验，防止数据错误和丢失
表单验证一般都结合js事件和函数，还有正则表达式总和运用
表达验证规则：
form标签，创建表单
属性有
action：提交表单到哪个地方
label：方便用户点击表单元素
for：要和表单的元素id一样
onsubmit：必须写，表单重点
写法:οnsubmit=“return 函数名()”
onsubmit需要接受函数的返回值，true表单会提交
，false不会提交
所以函数里面必须要写return false/true，表示表单是否提交成功
表单案列

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			td {
				background-color: aliceblue;
			}	
			input {
				background-color: deepskyblue;
				color: white;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td>
					<form action="task01_jump.html" onsubmit="return checked()">
						<p>请输入你的名字</p>
						<input type="text" id="name" />
						<p>请输入你的密码</p>
						<input type="password" id="pwd" />
						<p>再次输入密码确认</p>
						<input type="password" id="pwdreturn" />
						<p>性别：<label><input type="radio" name="sex" checked="checked" />男</label><label><input type="radio" name="sex"/>女<label></p>
						<p>年龄：<select name="" id="years">
						<option value="2019">2019</option>
								</select>
						<select name="" id="months">
							<option value="" >10</option>
						</select>
						<select name=""id="dates">
							<option value="" >18</option>
						</select>
						</p>
						<p>职业: <label><input type="checkbox" />工人</label><label><input type="checkbox" />老师</label></p>
						<p>请输入你的邮箱地址</p>
						<input type="text" id="email"/>
						<p>请输入你的手机号码</p>
						<input type="text" id="iphone"/><br />
						<input type="submit" value="注册" id="btn"/>
					</form>
				</td>
				<td>
					<img src="../img/Img314235964.jpg" style="max-width: 100%;height:auto; float: left;" />
				</td>
			</tr>
		</table>
	</body>\
	<script type="text/javascript">
		function $(id) {
			return document.getElementById(id);
		}
		var oname=$("name");
		var reg_name = /^[a-zA-Z_$]\w{5}/;
		var opwdreturn = $("pwdreturn");
		var reg_pwd=/\w{6}/;
		var opwd = $("pwd");
		var oyears=$("years");
		var reg_years=/^[16-99]$/;
		var omonths=$("months");
		var odates=$("dates");
		var oemail=$("email");
		var reg_email=/^\w{3,}@[a-z0-9]+\.[a-z]{3}(\.[a-z]{2})?$/;
		var oiphone=$("iphone");
		var reg_iphone=/^1\d{10}$/;
		var obtn=$("btn");
		var flag1=true;
		var flag2=true;
		var flag3=true;
		function checked(){
			var oname = $("name"); 
			if(oname.value == '') {
				alert("用户名不能为空");
				oname.focus();
				return false;
			}
			if(!reg_name.test(oname.value)){
				alert("用户名至少6位，以字母、下划线、$开头，后接数字");
				oname.focus();
				return false;
			}
			if(opwd.value == '') {
				alert("密码不能为空");
				opwd.focus();
				return false;
			}
			if(!reg_pwd.test(opwd.value)) {
				alert("密码至少6位")
				opwd.focus();			
				return false;
			}
//			if(opwdreturn.value==''){
//				alert("")
//				opwdreturn.focus();
//				return false;
//			}
			if(opwdreturn.value!=opwd.value){
				alert("两次密码输入不一致")
				opwdreturn.focus();
				return false;
			}
			if(oemail.value==''){
				alert("邮箱地址不能为空")
				oemail.focus();
				return false;
			}
			if(!reg_email.test(oemail.value)){
				alert("邮箱输入有误");
				oemail.focus();
				return false;
			}
			if(oiphone.value==''){
				alert("手机号码不能为空");
				oiphone.focus();
				return false;
			}
			if(!reg_iphone.test(oiphone.value)){
				alert(" 以1开头，必须是11位数字");
				oiphone.focus();
				return false;
			}
			return true;
		}
		oyears.onfocus=function(){
			if(flag1){
				for (var i = 0; i <100; i++) {
					var num=1920;
					var all=document.createElement("option");
					num+=i;
					all.innerHTML=num;
					oyears.appendChild(all);
				}
				return flag1=false;
			}		
		}
		omonths.onfocus=function(){
			if(flag2){
				for (var i = 0; i < 12; i++) {
					var num=1;
					var all=document.createElement("option");
					num+=i;
					all.innerHTML=num;
					omonths.appendChild(all);
				}
				return flag2=false;
			}
			
		}
		odates.onfocus=function(){
			if(flag3){
				for (var i = 0; i <30; i++) {
					var num=1;
					var all=document.createElement("option");
					num+=i;
					all.innerHTML=num;
					odates.appendChild(all);
				}
				return flag3=false;
			}
		}
	</script>
</html>

朱国武

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
表单验证和表单提交

用户注册时，对输入的数据进行前台校验，防止数据错误和丢失表单验证一般都结合js事件和函数，还有正则表达式总和运用表达验证规则：form标签，创建表单属性有action：提交表单到哪个地方label：方便用户点击表单元素for：要和表单的元素id一样onsubmit：必须写，表单重点写法:οnsubmit=“return 函数名()”onsubmit需要接受函数的返回值，true...
复制链接

扫一扫