【JQuery】使用者名稱驗證
阿新 • • 發佈：2018-12-09
實現的功能：
在進行頁面重新整理的前提下，對使用者輸入使用者名稱進行驗證，並做出相應的提示！
在使用者在文字框中輸入資料的時候，文字框紅色的邊框消失；否則，紅色文字框出現！
HTML程式碼
<html> <head> <title> user</title> <meta http-equiv="Content-type" conten="text/html;charset=UTF-8"> <link type="text/css" rel = "stylesheet" href="user.css" /> <script type = "text/javascript" src="jquery-3.3.1.min.js"> </script> <script type ="text/javascript" src="user.js"> </script> </head> <body> 使用者名稱: <input type="text" id="userName" class="userText"/> <input type="button" value = "驗證" id="verufyButtion"> </body> </html>
CSS程式碼
.userText{
border : 1px solid red;
}JS程式碼
$(document).ready(function(){ $("#verufyButtion").click(function(){ //alert("finish"); var username=$("#username").val(); if(username==""){ alert("使用者名稱不能為空"); } else { get("http://192.168.20.62:8080/E:\Text\JQuery\user?userName="+encodeURI(encodeURI(userName)),null,function(response){ $("#result").html(reponse); }); } }); $("#userName").keyup(function(){ var value = $(this).val(); if(value==""){ $(this).addClass("userText"); } else{ $(this).removeClass("userText"); } }); });
要點：
- HTML中可以通過DOCTYPE來告知瀏覽器的渲染顯示方式
- 可以先定義div或span節點用於以後顯示伺服器返回資料
- border可以控制頁面元素的邊框
- 可以通過#idname或.classname的方式來制定html節點定義樣式
- 可以通過$（doucument）.ready(function(){})的方式來定義頁面裝載完成時，需要執行的方法
- 可以通過$（）方法來獲取介面的制定節點，引數是某種CSS的選擇器
- 可以在$()方法返回jquery物件上執行各種JQuery的方法來獲取資料，定義事件，執行操作
方法：
| 方法名 | 作用 |
| val() | 獲取節點的value屬性值 |
| html() |
設定某個節點中的html內容 |
| click() | 響應滑鼠點選事件 |
| keyup() | 響應鍵盤彈起事件 |
| $.get() |
可以和伺服器端進行get方式的互動，註冊的callback方法會在資料回來的時候被呼叫 這個方法會接受代表伺服器端返回資料的一個純文字的引數 |
| addclass() | 給某個節點新增class |
| removeclass() | 給某個節點刪除class |
簡做總結，感謝大家認真閱讀和點贊鼓勵！