JQuery登陆验证之判断用户名密码相同等

最新推荐文章于 2021-10-20 22:11:23 发布

原创

最新推荐文章于 2021-10-20 22:11:23 发布 · 1.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #Login

本文通过JQuery实现登录验证，重点在于判断用户名和密码是否相同。提供详细代码及注释，展示如何在登录过程中进行前端验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

详细代码及注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			 * addclass（）是向被选择的元素添加属性，后期的时候，需要用到.box添加红色的错误边框
			 */
			.box{
				border : 2px solid red;
			}  
		</style>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#name").blur(function(){
					//获取文本框内容
					var name = $("#name").val();
					//判断
					if(name.length<6||name.length>10||name==""){
						$("#name").addClass("box"); /*此时，输入框边框变红*/
						$("#name").focus();  /*聚焦，必须正确的时候才可以接着填写*/
						$("#span1").css({"color":"red"});//字体颜色变红
						$("#span1").text("输入错误请重新输入"); //此时，通过text()替换文字
					}else{
						$("#name").removeClass("box");
						$("#span1").css({"color":"green"});
						$("#span1").text("输入正确");
					}
				});
			
				$("#psw").blur(functi