HTML做登录非空验证,使用JQuery实现登录的非空验证

操作说明：用户点击登录按钮后，若用户名为空，则弹出“用户名不能为空”的提示框，同时终止请求；若用户名不为空，密码为空，则弹出“密码不能为空”的提示框，同时终止请求。

Insert title here

body{

background-color: pink;

}

$(document).ready(function(){

/*

text()方法：获取或设置成对出现的标签中的文本值

对象.text()：获取文本值

对象.text("new value")：设置文本值

html()方法与text()方法的唯一区别是html()方法可以解析html()标签

*/

//给文本框绑定focus事件

$("#username").focus(function(){

//把显示错误信息的span标签里面的内容置空

$("#msgSpan").html("");

});

/*

val():获取或设置input标签的value属性值

对象.val(); 获取value属性值

对象.val("new value"); 设置value属性值

*/

//给登录按钮绑定单击事件

$("#subId").click(function(){

//获取用户输入的用户名

var username = $("#username").val();

//判断用户名是否为空

if(username == ""){

alert("用户名不能为空");

//取消默认行为

return false;

}

//获取用户输入的密码用户名

var password = $("#pwd").val();

//判断密码是否为空

if(password == ""){

alert("密码不能为空");

//取消默认行为

return false;

}

});

});

欢迎登录

用户名称：

用户密码：

标签：JQuery,非空,用户名,val,登录,text,value,html,为空

来源： https://www.cnblogs.com/yanchaoyi/p/13444046.html