表单密码账号邮箱练习

最新推荐文章于 2022-10-06 21:27:58 发布

原创最新推荐文章于 2022-10-06 21:27:58 发布 · 884 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#表单 #密码 #邮箱 #java #自学

实战记录专栏收录该内容

37 篇文章

订阅专栏

1. 完成一个表单

2. 需求

a. 所有内容不可以为空

b. 邮箱必须邮箱的规则

c. 用户名与密码长度必须6位以上

d. 密码与重复密码必须一致

3. 我们可以使用下而表达式来完成以上条件的判断

为空 /^\s*$/ 空字符的正则表达式可以通过test()方法来判断

邮箱格式 /^(\w)+@(\w)+(\.\w+)+$/

长度必须6位以上 /^(\w){6,}$/

4. 对于表单提交时，需要进行校验，可以使用onsubmit来进行校验，注意，如果使用onsubmit来操作，它必须写在form表单标签上，并且必须有返回值才可以控制表单是否可以提交。

<!DOCTYPE html>
<html>
<head>
<title>day0306.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
 function check1(){
	 
	 return checkpasswrod()&&checkLength("username")&&checkLength()&&checkEm()&&checkNull("eamil")&&checkNull("username")&&checkNull("password")&&checkNull("repassword"); 
 }
 //判断是不是空每个元素都要判断 ,所以传入一个变量 obj  每次传入不同的 表单元素进行判断
 function checkNull(obj) {
	var a= document.getElementById(obj).value;
	 var reg =/^\s*$/; //一个活多个空白
	 //正者表达里有test() 方法;
	 if(reg.test(a)) {
		 //做一个拼接即可的到所有的span 元素"<font color='red'>"++"不能为空</font>";document.getElementById(obj).previousSibling.nodeValue 是上一个元素的值 他是文本
		 document.getElementById(obj+"_msg").innerHTML="<font color='red'> "+document.getElementById(obj).previousSibling.nodeValue+"不为空</font>";
		 return false;
	 }
	 return true;
 }
 
 function checkEm() {
	 var a= document.getElementById("eamil").value;
	 var reg = /^(\w)+@(\w)+(\.\w+)+$/;
	 if(reg.test(a)){
		 
	 return true;
	 }
		 document.getElementById("eamil_msg").innerHTML="gun";
	 
  return false;
 }
 
 function checkLength(e){
	 var a= document.getElementById("eamil").value;
	 var reg =  /^(\w){6,}$/;
	 if(reg.test(a)){
		 
	 return true;
	 }
	 document.getElementById(e+"_msg").innerHTML="<font color='red'> "+document.getElementById(e).previousSibling.nodeValue+"长度不对</font>";

	 return false;
 }
  function checkpasswrod() {
	  if(document.getElementById("repassword").value!=document.getElementById("password").value){
		  document.getElementById("repassword_msg").innerHTML="<font color='red'> "+document.getElementById("repassword").previousSibling.nodeValue+"密码不同</font>";
		  return false;
	  }
	  return true;
  }
 
</script>
</head>

<body>
	<form action="#" method="post" onsubmit="return check1()">
		邮箱<input type="text" id="eamil" name="eamil" /><span id="eamil_msg"></span><br>
		用户名 <input type="text" id="username" name="username" /><span
			id="username_msg"></span><br> 密码<input type="password"
			id="password" name="password" /><span id="password_msg"></span><br>
		重复密码<input type="password" id="repassword" name="repassword" /><span
			id="repassword_msg"></span><br> <input type="submit" value="提交"
			id="submit" name="submit" />
	</form>
</body>
</html>