ajax jquery校验用户是否已经注册
2023-09-11 14:20:13 时间
服务端代码这里就不贴了
html代码比较简单,需要自行引入jquery库
<body> 请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" /> <div id="result"></div> </body>
js代码
/* * 在页面装载完成时注册上这些工作 * */ $(document).ready(function() { //这里面的内容就是页面装载完成后需要执行的代码 var userNameNode = $("#userName"); //需要找到button按扭,注册事件 $("#verifyButton").click(function() { //1.获取文本框的内容 var userName = userNameNode.val(); //2.将这个内容发送给服务器端 if (userName == "") { alert("用户名不能为空"); } else { $.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){ //3.接收服务器端返回的数据,填充到div中 $("#result").html(response); }); } }); //需要找到文本框,注册事件 userNameNode.keyup(function(){ //获取当前文本框中的内容 var value = userNameNode.val(); if (value == "") { //让边框变成红色,并且带背景图 userNameNode.addClass("userText"); } else { //去掉边框和背景图 userNameNode.removeClass("userText"); } }); });
css样式,目的是让文本框中没有内容的时候边框为红色并下方有红色波浪
.userText { /*控制文本框的边框是红色的实线*/ border: 1px solid red; background-image: url(../images/userVerify.gif); background-repeat: repeat-x; background-position: bottom; }
相关文章
- 可想实现一个自己的简单jQuery库?(五)
- jquery给轮播图的第一张设置class样式
- jQuery插件 -- Form表单插件jquery.form.js
- jQuery Validate验证框架详解
- 第二百二十二节,jQuery EasyUI,DataGrid(数据表格)组件
- 第一百八十七节,jQuery,知问前端--cookie 插件,注册成功后生成cookie,显示登录状态
- 第二百零二节,jQuery EasyUI,Layout(布局)组件
- 电子签章盖章之jQuery插件jquery.zsign
- jquery+json的6种ajax请求
- jQuery Custom Selector JQuery自定义选择器
- jQuery插件开发--(转)
- jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)
- 采用jquery的imgAreaSelect样品图像裁剪示范插件实现
- JavaScript(20)jQuery HTML 加入和删除元素
- python web py入门(54)- jQuery - 失去焦点事件
- jQuery bind命名空间
- jQuery实现当按下回车键时绑定点击事件