Jquery+Css+Html enables front-end verification of login user and password and user login
preface
Application scenario: the login of any program can be realized, and the front-end verification of user name, password memory, or mobile phone number, email and other information can be verified.
Tip: the following is the main content of this article. The following cases can be used for reference
1, What is Jquery?
JQuery is free and open source, using the MIT license agreement. The syntax design of jQuery can make developers more convenient, such as manipulating document objects, selecting DOM elements, making animation effects, event processing, using Ajax and other functions. In addition, jQuery provides API s for developers to write plug-ins. Its modular use makes it easy for developers to develop powerful static or dynamic web pages. (Baidu Encyclopedia).
2, What is Css?
Cascading style sheets (English full name: Cascading Style Sheets) is a computer language used to represent file styles such as HTML (an application of Standard General Markup Language) or XML (a subset of Standard General Markup Language). CSS can not only modify the web page statically, but also format the elements of the web page dynamically with various scripting languages. CSS can accurately control the layout of elements in the web page at the pixel level, support almost all font and size styles, and have the ability to edit web page objects and model styles. (Baidu Encyclopedia).
3, What is Html?
The full name of HTML is hypertext markup language, which is a markup language. It includes a series of labels, which can unify the document format on the network and connect the scattered Internet resources into a logical whole. HTML text is a descriptive text composed of HTML commands. HTML commands can describe text, graphics, animation, sound, tables, links, etc. (Baidu Encyclopedia).
4, Jquery front end code implementation
First import jquery JS file, so that the page has the function of jquery. This function requires two pages, a login page and a successful login page (you can stream private messages if you need files, and you will return when you see them after work)
1. Create login page
establish. txt text, then write the code to save, and then change the text suffix to Save html and open it with a browser
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Login page </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<!--Import jquery library-->
<script src='jquery.js'></script>
<script>
//Let the object with id uid get the focus when the page is loaded
$(document).ready(function(){
//var oInput = $("#uid");
//oInput.focus();// Get focus
// Conversion between dom objects and jquery objects. The objects captured and generated by native js are called dom objects. The objects created and captured through jquery are called jquery objects. Only jquery objects can call methods in jquery
//var oInput = document.getElementById("uid");
//var oInput = $("#uid");
//Convert dom object to jquery object (wearing vest)
//oInput = $(oInput);
//console.log(oInput.val());
//Convert jquery object to dom object
//oInput = oInput[0];
//console.log(oInput.value);
var oInput = $("#uid");
oInput.focus();
});
function check()
{
//Get the value of uid
var uid = $("#uid").val();
if(uid == "")
{
alert("user ID Required!");
$("#uid").focus();
return ;
}
else
{
//Verify whether the password is three digits
var reg = new RegExp("^\\d{3}$");
var flag = reg.test($("#upass").val());
if(flag==false)
{
alert("The password must be 3 digits");
$("#upass").focus().select();
}
else
{
//Submit expression
$("#thisform").attr({action:"result.html",method:"post"}).submit();
}
}
}
</script>
</HEAD>
<BODY>
<form id='thisform'>
<TABLE border='1px' width='500px' align='center'>
<TR>
<TD>user ID:</TD>
<TD><input id='uid' /></TD>
</TR>
<TR>
<TD>User password:</TD>
<TD><input id='upass' /></TD>
</TR>
<TR>
<TD colspan='2' align='center'>
<input type='button' value="Sign in" onclick='check()'/>
</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>
2. Create a successful login page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Login success page </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> Welcome to login successfully..... </BODY> </HTML>
1. js code and logic processing code should be written in the < script > < / script > body of the tag.
2. css code and page display style should be written in the < style > < / style > body of the tag.
3. The label < body > < / body > body mainly displays the content of the page.
4. The label < head > < / head > body is mainly the header format area.
5. The < HTML > < / HTML > body of the tag is the area of the entire page.
6. The tag < script src = "jquery.js" > < / script > introduces jQuery JS file src is equal to the local path.
3. Effect realization
1. Enter the user name zhx and password 123456 and click the login button.
Regular verification is performed on the password. If you want to perform regular verification on the password, you can use the corresponding regular expression. Here, for the convenience of demonstration, the password can only be 3 digits.
1. Enter the user name zhx and password 123 and click the login button.
Jump to the login success page.
summary
Realize the verification of login function related information user name, password, mobile phone number, email and other information. Verify it when entering the page as much as possible, avoid verification at the back end as much as possible, and reduce the interaction frequency with the back end.