12-9html

最新推荐文章于 2024-08-15 17:26:28 发布

关山月！

最新推荐文章于 2024-08-15 17:26:28 发布

阅读量535

点赞数

文章标签： elementui javascript webview

本文链接：https://blog.csdn.net/qq_44890321/article/details/121831348

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="#" method="post" name="foormname">
			
		姓名 <input type="text" name="user" id="user" value=""  placeholder="输入姓名"  class="user"/>			
		密码  <input type="password" name="pass" id="pass" value="" class="pass"/>	
		邮箱 <input type="email" name="em" id="em" value="" class="em" />
		<input type="button" value="提交" name="submitname" onclick="fn()"/>
		</form>		
		<script type="text/javascript">
			function $(a){
				return document.getElementById(a);	
			}
			function n$(a){
				return document.getElementsByName(a);
			}
			function tag$(a){
				return document.getElementsByTagName(a);
			}
			function fn(){
				//id
//				alert($("user").value);
//				var user=$("user").value;
//				var pass=$("pass").value;
//				alert(`姓名:${user};密码:${pass}`);
				//获取姓名密码并弹窗alert
				
				//name
//				var  user = n$("user")[0].value;
//				var  pass = n$("pass")[0].value;
//				alert(`姓名:${user};密码:${pass}`);
//				alert("姓名:"+user+";密码:"+pass);

				//input
				var user = tag$("input")[0].value;
				var pass = tag$("input")[1].value;
				var em = tag$("input")[2].value;
				
				alert("姓名:"+user+";密码:"+pass+";邮箱:"+em);
				
				
				
			}
			
		
//			获取dom节点属性的方法       
//			document.getElementById("id属性值");返回的是第一个符合条件的值
//			document.getElementsByName("name名称");返回的是数组
//			document.getElementsByTagName("返回的是数组")
//			document.getElementsByClassName("class属性值")返回的数组
//			元素节点.属性   -> 属性值
	
		//input标记的value属性；1.获取input标记节点  2.input标记节点.value
		//通过form来获取节点	
		//document.forms--->数组
		//myform.elements---->数组
		//document.form的name属性
		//form.input的name属性
		//定义一个变量       
		var myform = document.forms[0];//返回的是数组
		var myinput = myform.elements[0];
		var myinput1 = myform.submitname;
		var myform1 = document.formname;
		console.log(myform===myform1);
		console.log(myinput===myinput1);
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		

	</head>
	<body>
		<form action="#" method="post" name="formname">
			邮箱地址:<input type="email" name="eamil" id="eamil" value="" />
			<input type="submit" value="验证邮箱地址" onclick="fn()"/>
		</form>
				<script type="text/javascript">
			
			function fn(){
			var msg=`1.必须存在@以及.;2.@不能是第一个字符; 3..不能是最后一个字符;4.@和.至少相隔两个字符;
			5.如果有两个点,那么两个点之间也应该至少相隔两个字符;
			`;
			var emailaddress = document.formname.email.value; 
			var length = emailaddress.length;
			var index1 = emailaddress.indexOf("@");//不存在返沪-1
			var index2 = emailaddress.indexOf(".");//从前面向后面
			var index3 = emailaddress.lastIndexOf(".");//从面后向前面
			if(index1!=-1&& index3!=-1 && index3>index1+2 && index1!=0 && index3!=emailLength-1)
			{
				if(index2==index3)
				{
					emailFlag = (index2>=index1+3)?true:false;	
				}else{
					emailFlag = (index3>=index2+3 && index2>=index1+3)?true:false;
				}	
			}
			else{
				emailFlag=false;
			}
			if(!emailFlag){
				msg += "邮箱地址不合法\n\n"
				
			}else{
				msg += "邮箱地址合法\n\n"
			}
			alert(msg)
			
			
			
			
			}
			
			
		</script>	
		
		
	</body>
</html>

表单事件

1）获取焦点与失去焦点事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
        <script type="text/javascript">
			function getFocus(){document.bgColor="aqua"}
			function loseFocus(){document.bgColor="blue"}
		</script>
	</head>
	<body>
		表单事件：获取焦点事件onFocus 失去焦点事件onBlur 
	</body>
	<form>
		<input type="button" onfocus="getFocus()" value="获取失去焦点触发事件" onblur="loseFocus()"/>
		<input type="button" value="获得事件" onblur="loseFocus()"/>
	</form>
</html>

2）提交及重置事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单提交 重置事件的应用</title>
		<script type="text/javascript">
			function $(id){
				return document.getElementById(id);
			}
			function submitTest(){
				var msg = "用户名："+$("input1").value;
				msg= msg + "\n密码"+ $("input2").value;
				alert(msg);
				return false;
			}
			function resetTest(){alert("将数据清空")}
		</script>
	</head>
	<body>

<form onSubmit="return submitTest();" onReset="resetTest()">
	
<fieldset id="">
	<legend>表单数据</legend>
	<br><label>用户名:</label><input type="text" name="" id="input1" value="" />
	<br><label>密&nbsp;码:</label><input type="password" name="" id="input2" value="" />
	<br><input type="submit" name="" id="" value="提交" />
	<input type="reset" name="" id="" value="重置" />
</fieldset>
</form>
	</body>
</html>

关山月！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12-9html

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="#" method="post" name="foormname"> 姓名 <input type="text" name="user" id="user" value=.
复制链接

扫一扫