HTML 简单的修改密码页面：密码为空，确认密码为空，两次密码是否相同，使用JS实现判断并且提示

使用form表单进行密码修改提交html body代码：修改密码<div><label for="pwdId">新密码：</label><input type="password" name="password" id="password" placeholder="新密码"/></div><div><label for

北木桥溪

7673人浏览 · 2021-12-03 11:24:46

北木桥溪 · 2021-12-03 11:24:46 发布

使用form表单进行密码修改提交
html body代码：

<body>
<div class="lg-container">
  <h1>修改密码</h1>
  <form action="/modify"  id="lg-form" name="lg-form" method="post">

  	<div>
  		<label for="pwdId">新密码：</label>
  		<input type="password" name="password" id="password" placeholder="新密码"/>
  	</div>

  	<div>
  		<label for="newPwdId"  style="float:left">确认密码：</label>
  		<input type="password" name="newPassword" id="newpassword" placeholder="确认密码" />
  	</div>

  	<div>
  		<button type="submit" id="login">提交</button>
  	</div>

  </form>
</div>   
</body>

js代码：

<script>
var lgform=document.getElementById("lg-form");
var password=document.getElementById("password");
var newPassword=document.getElementById("newpassword");
lgform.onsubmit=function(){
	if(password.value=="" || password.value==null){
		alert("新密码不能为空,请输入");
		return false;
	}else if(newPassword.value=="" || newPassword.value==null){
		alert("确认密码不能为空,请输入");
		return false;
	}else if(password.value!=newPassword.value){
		alert("两次密码不一样,请重新输入");
		password.value="";
		newPassword.value="";
		return false;
	}else{
		return true;
	}
}
</script>

效果图展示：

第一次输入密码是否为空判断
第二次输入密码判断是否为空
两次密码是否一样判断
如果出现以上提示，form表单都不能进行提交，需要重新输入提交。