Use jquery to create user login interface
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script src="js/jquery-1.8.0.min.js"></script> 8 <script> 9 var cnresu = false; 10 $(function(){ 11 $("input[name='uname']").blur(function(){//blur从链接上移开焦点(鼠标离开框时) 12 var unamestr = $(this).val(); 13 var regstr = /^[\u4e00-\u9fa5]{2,4}$/; 14 if(!regstr.test(unamestr)){ 15 $(this).parent().next("dd").html("必须是2-4个汉字"); 16 cnresu = false; 17 return; 18 } 19 cnresu = true; 20 }); 21 $("input[name='uname']").focus(function(){//focus给予链接焦点(鼠标点中框时) 22 $(this).css("border","solid 1px #dddddd"); 23 //$(this).val(""); 24 $(this).parent().next("dd").html(""); 25 }); 26 }); 27 </script> 28 <style> 29 #home{ 30 width: 600px; 31 height: 300px; 32 margin: auto; 33 background-color: #7FFFD4; 34 } 35 #head{ 36 padding-top: 20px; 37 height: 100px; 38 } 39 .dl1{ 40 clear: both; 41 } 42 .dl1 dt{ 43 float: left; 44 text-align: right; 45 width: 150px; 46 height: 30px; 47 line-height: 30px; 48 } 49 .dl1 dd{ 50 float: left; 51 height: 30px; 52 line-height: 30px; 53 } 54 #foot{ 55 text-align: center; 56 } 57 h1{ 58 padding-top: 20px; 59 text-align: center; 60 color: bisque; 61 } 62 </style> 63 <body> 64 <p id="home"> 65 <h1>用户登陆</h1> 66 <p id="head"> 67 <form action="biaodan.html" name="regform" method="post" > 68 <dl class="dl1"> 69 <dt>用户名 : </dt> 70 <dd><input type="text" name="uname"/></dd> 71 <dd id="erroruname"></dd> 72 </dl> 73 <dl class="dl1"> 74 <dt>密码 : </dt> 75 <dd><input type="password"/></dd> 76 <dd id="errorpass"></dd> 77 </dl> 78 </p> 79 <p id="foot"> 80 <input type="submit" value="提交"/> 81 <input type="reset" value="重置"/> 82 </p >83 </form> 84 </p> 85 </body> 86 </html>
Running screenshot
The above is the detailed content of Use jquery to create user login interface. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











With the rapid development of social media, Xiaohongshu has become one of the most popular social platforms. Users can create a Xiaohongshu account to show their personal identity and communicate and interact with other users. If you need to find a user’s Xiaohongshu number, you can follow these simple steps. 1. How to use Xiaohongshu account to find users? 1. Open the Xiaohongshu APP, click the "Discover" button in the lower right corner, and then select the "Notes" option. 2. In the note list, find the note posted by the user you want to find. Click to enter the note details page. 3. On the note details page, click the "Follow" button below the user's avatar to enter the user's personal homepage. 4. In the upper right corner of the user's personal homepage, click the three-dot button and select "Personal Information"

In Ubuntu systems, the root user is usually disabled. To activate the root user, you can use the passwd command to set a password and then use the su- command to log in as root. The root user is a user with unrestricted system administrative rights. He has permissions to access and modify files, user management, software installation and removal, and system configuration changes. There are obvious differences between the root user and ordinary users. The root user has the highest authority and broader control rights in the system. The root user can execute important system commands and edit system files, which ordinary users cannot do. In this guide, I'll explore the Ubuntu root user, how to log in as root, and how it differs from a normal user. Notice

How to log in to the email address of Enterprise WeChat? You can log in to the email address in the Enterprise WeChat APP, but most users don’t know how to log in to the email address. Next is the graphic tutorial on how to log in to the email address of Enterprise WeChat brought by the editor for interested users. Come and take a look! Enterprise WeChat usage tutorial How to log in to the Enterprise WeChat email 1. First open the Enterprise WeChat APP, go to the [Workbench] at the bottom of the main page and click to come to the special area; 2. Then in the workbench area, select the [Enterprise Mailbox] service; 3. Then jump to the corporate email function page, click [Bind] or [Change Email] at the bottom; 4. Finally, enter [QQ Account] and [Password] on the page shown below to log in to the email.

Wegame is a software used with Tencent games. You can use it to start games and gain acceleration. Recently, many users have experienced prompts that login operations are too frequent when using it. Faced with this prompt, many users do not know How can we solve it successfully? In this software tutorial, we will share the solution with you. Let’s learn about it together. What should I do if Wegame login operations are too frequent? Method 1: 1. First, make sure our network connection is normal. (You can try opening the browser to see if you can access the Internet) 2. If it is a network failure, then try restarting the router, reconnecting the network cable, and restarting the computer to solve the problem. Method 2: 1. If there is no problem with the network, then select &

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
![GeForce Experience login freezes [Fix]](https://img.php.cn/upload/article/000/887/227/171084420790568.png?x-oss-process=image/resize,m_fill,h_207,w_330)
This article will guide you to solve the GeForceExperience login crash issue on Windows 11/10. Typically, this can be caused by unstable network connections, corrupted DNS cache, outdated or corrupted graphics card drivers, etc. Fix GeForceExperience Login Black Screen Before starting, make sure to restart your internet connection and computer. Sometimes, the problem may just be due to a temporary issue. If you are still experiencing NVIDIA GeForce Experience login black screen issue, please consider taking the following suggestions: Check your internet connection Switch to another internet connection Disable your

Analysis of user password storage mechanism in Linux system In Linux system, the storage of user password is one of the very important security mechanisms. This article will analyze the storage mechanism of user passwords in Linux systems, including the encrypted storage of passwords, the password verification process, and how to securely manage user passwords. At the same time, specific code examples will be used to demonstrate the actual operation process of password storage. 1. Encrypted storage of passwords In Linux systems, user passwords are not stored in the system in plain text, but are encrypted and stored. L

Oracle database is a commonly used relational database management system, and many users will encounter problems with the use of table spaces. In Oracle database, a user can have multiple table spaces, which can better manage data storage and organization. This article will explore how a user can have multiple table spaces in an Oracle database and provide specific code examples. In Oracle database, table space is a logical structure used to store objects such as tables, indexes, and views. Every database has at least one tablespace,
