前端通过JS对用户名和密码进行筛选(非空)

前端通过JS对用户名和密码进行筛选(非空)

<form id="FormId" name="FormName" action="Test2.jsp" method="get">
 	 用户名:<input type="text" id="m_username" name="m_username" value=" "></br> </br>
          密 码:<input type="Password" id="m_password" name="m_password" value="123456">  </br></br>
     <button onclick="checkUP()">button登录</button>
	 <input type="submit" value="登陆">
  </form>


  <script>
  	var username = document.getElementById("m_username");
  	var password = document.getElementById("m_password");

  	
  	function checkUP(){
  		return checkUserName()&&checkPassWord();
  	}
  	
  	function checkUserName(){
  		
  		if(username.value==" "||username.value==""){
  			alert("用户名不能为空");
  			//如果验证不通过通过此方法跳转到指定页面.
  			document.FormName.action="Test_getQueryList.jsp";
  		}else if(username.value==null){
  			alert("用户名不能为null");
  			document.FormName.action="Test_getQueryList.jsp";
  		}else{
  			return true;
  		}
  	}
  	
  	function checkPassWord(){
  		if(password.value==" "||password.value==""){
  			alert("密码不能为空");
  			document.FormName.action="Test_getQueryList.jsp";
  		}else if(password.value==null){
  			alert("密码不能为null");
  			document.FormName.action="Test_getQueryList.jsp";
  		}else{
  			return true;
  		}
  	}
  </script>
在WEB中对用户名密码进行有效性测试可以使用前端的JavaScript或后端的服务器语言来实现。 首先,对于非空性和长度范围的测试,可以使用JavaScript进行客户端验证。在表单提交前,对输入框中的值进行判断,如果为空或超出长度范围则给出提示。 例如: ```html <form> <input type="text" id="username" name="username"> <input type="password" id="password" name="password"> <input type="password" id="confirmPassword" name="confirmPassword"> <button type="submit">注册</button> </form> <script> const form = document.querySelector('form'); form.addEventListener('submit', (event) => { const username = document.querySelector('#username'); const password = document.querySelector('#password'); const confirmPassword = document.querySelector('#confirmPassword'); if(username.value === '') { alert('用户名不能为空'); event.preventDefault(); } if(password.value.length < 6 || password.value.length > 16) { alert('密码长度应为6-16位'); event.preventDefault(); } if(confirmPassword.value !== password.value) { alert('两次输入的密码不一致'); event.preventDefault(); } }); </script> ``` 在上述代码中,我们对用户名密码和确认密码进行非空和长度范围的验证,并在验证失败时通过 `alert` 方法给出提示。需要注意的是,`event.preventDefault()` 方法可以阻止表单的默认提交行为。 对于后端的服务器语言,可以在接收到表单提交数据后对数据进行验证。例如,在PHP中可以使用以下代码: ```php <?php $username = $_POST['username']; $password = $_POST['password']; $confirmPassword = $_POST['confirmPassword']; if(empty($username)) { echo '用户名不能为空'; exit; } if(strlen($password) < 6 || strlen($password) > 16) { echo '密码长度应为6-16位'; exit; } if($confirmPassword !== $password) { echo '两次输入的密码不一致'; exit; } // 数据验证通过,进行后续操作 ?> ``` 在上述代码中,我们通过 `$_POST` 获取表单提交的数据,并对用户名密码和确认密码进行非空和长度范围的验证。如果验证失败,则直接输出错误信息并退出程序。否则,可以进行后续的业务逻辑处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值