JavaScript learning notes
1. How to embed js
1.1 event handle writing js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="Tips" onclick='window.alert("hello")
alert("hello2");'/>
<!-- Pop up two prompts, window Can be omitted,';'Can be omitted-->
<!-- Note that you cannot use single quotes or double quotes at the same time -->
</body>
</html>
1.2 script block embedding
<script type="text/javascript">
alert("page begin")
</script>
<!DOCTYPE html>
<html>
<script type="text/javascript">
alert("page mid")
</script>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script type="text/javascript">
alert("page end")
</script>
<body>
<input type="button" name="" id="" value="Not directly displayed" />
</body>
</html>
1.3 import external independent js files
<!DOCTYPE html>
<script type="text/javascript" src="1.js">
<!-- Reference external js file -->
</script>
<html>
<head>
<script type="text/javascript" src="1.js">
<!-- Multiple references execute multiple times -->
</script>
<script type="text/javascript" src="1.js">
alert("The statement here will not be executed")
<!-- Reference external js file -->
</script>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
1.js
alert("js The file is imported")
2. Grammar
2.1 variables
In JavaScript, variables are declared using var
var i
Unassigned variables are of type undefined
There are also global variables and local variables in JavaScript. Usually, local variables are declared in functions, but variables are not defined during assignment, that is, global variables
There are 6 data types before ES6
- Undefined
- Number
- String
- Boolear
- Null has only one value: null
- Object
The first five are called basic data types, and the last one is called reference data types
2.2.1 Number
The Number type should pay attention to Nan (wrong type) and infinity (divided by 0), but the addition of Number and string is OK
The IsNaN (data) function is used to judge whether the value is a number. It will first try to convert the data into a number. If it fails, it will return true
So isNaN(true) returns false because true can be converted into a number. Similarly, "123" returns false and "number" returns true
The number function can convert data into numbers. If it cannot be converted, it returns NaN
**ParseInt (number) * * numbers can be rounded but not rounded
**Math. Ceil (number) * * numbers can be rounded up
In JavaScript, decimal calculation defaults to double calculation and will not be truncated
2.2.2 Boolean
The Boolean() function is used to convert data into Boolean values, which will be implicitly called in if statements or while statements
For example, empty string, 0, undefined, NaN, null will return false
2.2.3 String
There are two ways to define
var s = "string"//string type
var s = new String("string")//object type
//It's just different types. Everything else is the same
Common functions
- “string”. Length returns the length of a string
- “string”. charAt(3) returns a character with a subscript of 3
- “string”. concat("string2") concatenates the first string with the second
- ”string".indexOf(" i ") returns the subscript of the first" i "from left to right
- “string”. lastIndexOf("i") returns the subscript of the first "i" from right to left
- “string”. replace("i", "a") replaces i with a, effective only for the first i
- “string”. split("r") splits the string with r as the boundary. r itself is not included. After receiving, it is referenced with a subscript length can get the number
- “string”. substr(num1,num2) intercepts the following string including subscripts when there is only num1, and specifies the number of intercepts when num2 exists
- “string”. substring(num1,num2) the same as above when there is only num1, and num2 specifies the ending subscript
- "string".toLowerCase(),"string".toUpperCase()
2.2.4 object
The focus is on the prototype attribute, which is used to extend the attributes and methods of the object
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var obj = new Object()
Object.prototype.newfunction= function(){
alert("Add new function")
}
Object.prototype.newname="New name"
obj.newfunction()
alert(obj.newname)
//string can do the same
String.prototype.newfunction = function(){
return this[0]
}
//You can then call this method directly
alert("abc".newfunction())
</script>
</head>
<body>
</body>
</html>
2.2 function
Function definitions in JavaScript are loaded preferentially and cannot be overloaded. The latest function definition is taken when calling the function, and the number of parameters can not match before defining the function, such as
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function sum(x,y)
{
alert(x+","+y)
}
sum()
sum(1)
sum(1,2)
sum(1,2,3)
</script>
</body>
</html>
You can also call functions in event handlers.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function sum(x,y)
{
alert(x+","+y)
}
</script>
<input type="button" name="" id="" value="Call function" onclick="sum(1,2)"/>
</body>
</html>
2.3 commissioning
Press F12 in the browser to enter the debugging mode
Commonly used are
- Console
- viewer
- network
2.4 typeof operator
typeof can get the data type of a variable and return a lowercase string of that type
- undefined
- number
- string
- boolean
- object
- function
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function sum(x,y)
{
alert(x+y)
}
//Null is of type null, but the result is object
var v=null
console.log(typeof v)
//Output results to console
var z=true
console.log(typeof z)
var name="names"
console.log(typeof name)
var und=undefined//You can do it without it
console.log(typeof und)
var n=100
console.log(typeof n)
var object=new Object()
console.log(typeof object)
console.log(typeof sum)
</script>
</body>
</html>
2.5 void operator
example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="javascript:void(0)" onclick="alert('Here is a paragraph js code')">I can't jump</a>
</body>
</html>
void expression will not return any result after executing the expression. The url is a special case where JavaScript: must be added
Type 2.6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//myclass=function() can also be used
function myclass(name,age)
{
this.name=name;
this.age=age;
this.show=function(){
alert(name+":"+age)
}
}
myclass()//Ordinary function calls are invalid here
obj=new myclass("rabbit",12)//Class, here is the global variable
obj.show()
unf=new myclass()
unf.show()//The default is undefined
alert(obj.name+":"+obj["age"])//Two ways to access elements directly
//Custom classes can also be extended by prototype, which is not demonstrated here
</script>
</head>
<body>
</body>
</html>
2.7 equivalence and congruence operators=
Only determine whether the values are equal, and = also determines whether the data types are equal
true1 and true=1 have different results
NaN is not equivalent to any value, whether numeric or type
undefined and null are numerically equivalent but of different types
2.8 get the id of the tag
document is the top-level object of DOM
window is the top-level object of BOM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="text" name="" id="mytext" value="Current text" />
<script type="text/javascript">
alert("After confirmation, the contents of the text box will be changed")
var tar=document.getElementById("mytext")
tar.value="Text change"
alert("After confirmation, the type of text box will be changed")
tar.type="button"
//It can also output its contents
console.log(tar)
alert(tar)
</script>
</body>
</html>
2.9 other two methods of obtaining elements
- getElementsByName gets all elements with the same name
- getElementsByTagName gets all elements with the same tag
3. Events
3.1 common events
- blur lost focus
- Focus get focus
- Click mouse click
- dblclick mouse double click
- keydown keyboard press
- keyup keyboard pop up
- mousedown mouse down
- mouseup mouse
- mouseover mouse over
- mousemove mouse movement
- submit form submission
- Reset form reset
- select text selection
- The selected item in the change drop-down list is changed
- The load page is loaded
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Event test</title>
</head>
<body onload="console.log('If there is a prompt box, it will not be loaded until the prompt box is processed')">
<input type="text" name="" id="" value="" onblur="console.log('Lose focus')"/>
<br>
<input type="text" name="" id="" value="" onfocus="console.log('Get focus')"/>
<br>
<input type="button" name="" id="" value="" onclick="console.log('single click')"/>
<br>
<input type="button" name="" id="" value="" ondblclick="console.log('double-click')"/>
<br>
<input type="text" name="" id="" value="" onkeydown="console.log('down')" onkeyup="console.log('up')"/>
<br>
<div id="" onmousedown="console.log('Mouse down')" onmouseup="console.log('Mouse up')"
onmouseover="console.log('Mouse passing')" onmousemove="console.log('Mouse movement')" onmouseout="console.log('Mouse away')">
Mouse event test area
</div>
<form action="..." onsubmit="console.log('Submitted')" onreset="console.log('Reset')">
<input type="submit" name="" id="" value="Submit" />
<input type="reset" name="" id="" value="Reset" />
</form>
<br>
<select onchange="console.log('change')" >
<option value ="1" selected">1</option>
<option value ="2">2</option>
<option value ="3">3</option>
</select>
<br>
<textarea rows="60" cols="60" onselect="console.log('Select')">
</textarea>
</body>
</html>
3.2 event registration
3.2. 1. The first registration method
Adding a callback function to the listener is a little simple and will not be demonstrated. The only thing to note is that the embedded form of the function should be enclosed in parentheses
3.2. 2. The second registration method
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" name="" id="mybutton" value="Point me" />//Note that the declared id must be before the id is obtained, otherwise an error will be reported unless the load delay is used
<script type="text/javascript">
function prints(){
alert("Callback function execution")
}
var but=document.getElementById("mybutton")
but.onclick=prints//Be careful not to add parentheses
//Anonymous functions can also be used
</script>
</body>
</html>
load can cause a delay, which can solve the problem of prompt when the button is not loaded
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="ti()">
<script type="text/javascript">
function ti(){
alert("After confirmation, the contents of the text box will be changed")
var tar=document.getElementById("mytext")
tar.value="Text change"
alert("After confirmation, the type of text box will be changed")
tar.type="button"
//You can use window Onload = Ti instead, anonymous functions can also be used
//There is no need to add onload to the body at this time
}
<input type="text" name="" id="mytext" value="Current text" />
</script>
</body>
</html>
It should be noted that load will not be triggered until all JS scripts are executed, so it is usually written in this way to avoid errors
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var btn1=document.getElementById("z1");
btn1.onclick=function(){
console.log("Button 1 Click")
}
}
</script>
<input type="button" name="" id="z1" value="button1" />
</html>
3.3 event object
All events will pass an event object to the function when registering, even if the function does not accept any parameters
btn1.οnclick=function(x){
if(x.keyCode==13)
console.log("Press enter")
}
4. Control statement
-
if
-
switch
-
for
-
while
-
do while
-
break continue return
-
for in
-
with
var arr=[true,"abc",5,76,3.14]
for(var index in arr)
{
console.log(arr[index])//ergodic
}
function myclass(name,age)
{
this.myname=name;
this.myage=age;
}
var i=new myclass("rabbot",12);
for(var index in i)
{
console.log(index)//Traversal property name
}
for(var index in i)
{
console.log(i[index])//traversal attributes
}
The use of the with statement on a class allows the following statements to directly reference the attribute instead of adding ". Attribute"
Reference of type to namespace
5. Array
5.1 array declaration
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> var a1 = [];//Length is 0 var a2 = [1,2,3,true];//Types can be inconsistent //Array length is variable a1[100]=100;//Capacity expansion, A1 The length is 101 //Other unassigned variables are undefined a1[-100]=100//No error will be reported, but it has no practical effect. For undefined var arr1=new Array()//Array with length 0 var arr2=new Array(3)//Length 3 var arr3=new Array(1,2)//Length 2 //The for loop can be used for traversal, and the for in loop can also be used </script> </body> </html>
5.2 common array methods
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr= new Array(1,2,3);
arr.push(4);//Push 4 into the third bit of the array
arr.pop();//Returns 4, and the length of the array is reduced by one
arr.reverse();//Invert array
console.log(arr.join("-"));//Output 3-2-1 string
</script>
</body>
</html>
6.Date object
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> var time =new Date(); console.log(time); var year=time.getFullYear();//4-digit year var month=time.getMonth();//0~11 var xiqi=time.getDay();//Indicates the day of the week var day=time.getDate();//Indicates the day ordinal of a month console.log(year+"year"+(month+1)+"month"+day+"day"); var hour=time.getHours();//hour var minute=time.getMinutes(); var sec=time.getSeconds(); var millsec=time.getMilliseconds(); var strtime=time.toLocaleString(); console.log(strtime); var fromtime=time.getTime(); //Milliseconds from January 1, 1970, 000000000 to the present </script> </body> </html>
7.DOM
7.1 operation div and span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
var bt1=document.getElementById("b1");
var bt2=document.getElementById("b2");
bt1.onclick=function(){
var mydiv=document.getElementById('mydiv')
var myspan=document.getElementById('myspan')
mydiv.innerHTML="<font color='#Ff0000 '> content change < / font >“
myspan.innerHTML="<font color='#Ff0000 '> content change < / font >“
}
bt2.onclick=function(){
var mydiv=document.getElementById('mydiv')
var myspan=document.getElementById('myspan')
mydiv.innerText="<font color='#Ff0000 '> plain text change < / font >“
myspan.innerText="<font color='#Ff0000 '> plain text change < / font >“
}
}
</script>
<div id="mydiv">
Initial class capacity
</div>
<span id="myspan">
span The size of can vary with the size of the content
</span>
<br>
<input type="button" name="" id="b1" value="Button 1" />
<br>
<input type="button" name="" id="b2" value="Button 2" />
</body>
</html>
7.2 select all and deselect all check boxes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
document.getElementById("mybox").onclick=function(){
var hobbys=document.getElementsByName("hobby")
for(var index in hobbys)
{
hobbys[index].checked=document.getElementById("mybox").checked
}
}
var hobbys=document.getElementsByName("hobby")
for(var index in hobbys)
{
hobbys[index].onclick=function()
{
var count=0;
for(var index in hobbys)
{
if(hobbys[index].checked)
count++;
}
document.getElementById("mybox").checked=(count==hobbys.length)
}
}
}
</script>
<input type="checkbox" name="mybox" id="mybox" value="0" />Select all
<br>
<input type="checkbox" name="hobby" id="" value="1" />1
<br>
<input type="checkbox" name="hobby" id="" value="2" />2
<br>
<input type="checkbox" name="hobby" id="" value="3" />3
<br>
</body>
</html>
7.3 get the value of the drop-down list
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select id="myselect">
<option value ="1">Apple</option>
<option value ="2">rabbit</option>
</select>
<script type="text/javascript">
window.onload=function(){
document.getElementById("myselect").onchange=function(){
console.log(document.getElementById("myselect").value)
}
}
</script>
</body>
</html>
7.4 real time display of clock on Web page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function display(){
var time=new Date()
document.getElementById("mydiv").innerHTML=time.toLocaleString();
}
window.onload=function(){
document.getElementById("bt1").onclick=function(){
can = window.setInterval("display()",1000)
}
document.getElementById("bt2").onclick=function(){
window.clearInterval(can)
}
}
</script>
<input type="button" name="" id="bt1" value="Display time" />
<input type="button" name="" id="bt2" value="Stop time" />
<div id="mydiv">
</div>
</body>
</html>
8.BOM
8.1 opening and closing of windows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" name="" id="" value="The current window is open,This is the default" onclick="window.open('http://www.baidu.com','_self')"/>
<br>
<input type="button" name="" id="" value="Empty window" onclick="window.open('http://www.baidu.com','_blank')"/>
<br>
<input type="button" name="" id="" value="Parent window" onclick="window.open('http://www.baidu.com','_parent')"/>
<br>
<input type="button" name="" id="" value="Top level window" onclick="window.open('http://www.baidu.com','_top')"/>
<br>
<input type="button" name="" id="" value="Jump to local html file" onclick="window.open('new_file14.html')"/>
</body>
</html>
new_file14.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function display(){
var time=new Date()
document.getElementById("mydiv").innerHTML=time.toLocaleString();
}
window.onload=function(){
document.getElementById("bt1").onclick=function(){
can = window.setInterval("display()",1000)
}
document.getElementById("bt2").onclick=function(){
window.clearInterval(can)
}
}
</script>
<input type="button" name="" id="bt1" value="Display time" />
<input type="button" name="" id="bt2" value="Stop time" />
<input type="button" name="" id="" value="Jump back to the original page" onclick="window.close()"/>
<div id="mydiv">
</div>
</body>
</html>
8.2alert and confirm windows
Considering that alert has been used many times before, just demonstrate confirm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
document.getElementById('bt1').onclick=function(){
if(window.confirm("Are you sure you want to close the web page,All your unsaved data will be lost"))//Variables can also be used to accept return values
window.close();
}
}
</script>
<input type="button" name="" id="bt1" value="Close web page" />
</body>
</html>
8.3 top level window exchange
Code corresponding to the top-level window before exchange
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> Adjust the page in the small box to the top-level window <iframe src="new_file17.html" width="800px" height="600px"></iframe> </body> </html>
The code of the internal window, namely new_file17.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload=function(){
document.getElementById('b1').onclick=function(){
if(window.top.location!=window.self.location)
window.top.location=window.self.location
}
}
</script>
<input type="button" name="" id="b1" value="Set as top-level window" />
</body>
</html>
8.4 history
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <a href="new_file19.html">Point me</a> <br> <input type="button" name="" id="" value="One step forward" onclick="window.history.go(1)"/> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" name="" id="" value="back" onclick="window.history.back()"/> <!-- go(-1)Also --> </body> </html>
8.5 page Jump
At present, the main jump methods are as follows
- Hyperlinks
- Form action
- window.open(url,target)
- window. location. href/document. location. Href (you can also remove href)
Here's the last one
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="button" name="" id="b1" value="Point me" onclick="window.location.href='http://www.baidu.com'"/> <input type="button" name="" id="b2" value="Point me" onclick="document.location.href='http://www.baidu.com'"/> <!-- <input type="button" name="" id="b1" value="Point me" οnclick="window.location='http://www.baidu.com'"/> <input type="button" name="" id="b2" value="Point me" οnclick="document.location='http://www.baidu.com'"/> --> </body> </html>
9.JSON
9.1 Eval function
The eval function can interpret strings as JavaScript code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.eval("alert('This is not just a string')")
</script>
</body>
</html>
A prompt will appear on the web page
9.2 creation and reference of JSON objects
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//Tag array with {}
var student={
"name":"rabbit",//Can be any type
"age":12,
"hobbys":["coder","gamer","sleeper"],//[] marks an array, and the element can also be JSON
"family":{
"father":"tiger",
"mother":"sheep"//Nested json
}
}
//When called, either of the following methods can be used
console.log(student.name)
console.log(student["name"])
for(var index in student.hobbys)
console.log(student.hobbys[index])
console.log(student.family.father)
</script>
</body>
</html>
9.3 obtaining JSON objects
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var fromserverstirng="{\"name\":\"rabbit\",\"age\":12}"
window.eval("var json="+fromserverstirng)
console.log(json.name+":"+json.age)
</script>
</body>
</html>
9.4 JSON acceptance example of table data
Note that json is usually compressed into one line because strings cannot wrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.eval("var jsonobj="+"{\"students\":[{\"name\":\"rabbit\",\"ages\":12},{\"name\":\"rs\",\"ages\":13}]}")
window.onload=function(){
document.getElementById("b").onclick=function(){
var string ="";
for(var index=0;index<jsonobj.students.length;index++)
{
string+="<tr>"
string+="<td>"+(index+1)+"</td>";
string+="<td>"+jsonobj.students[index].name+"</td>";
string+="<td>"+jsonobj.students[index].ages+"</td>";
string+="</tr>"
}
document.getElementById("target").innerHTML=string
}
}
</script>
<input type="button" name="" id="b" value="Click me to display the data" /><br />
<table border="1px" width="50%">
<tr>
<th>Serial number</th>
<th>name</th>
<th>Age</th>
</tr>
<tbody id="target">
</tbody>
</table>
</body>
</html>
10. Regular expressions
10.1 regular declaration and basic syntax
As long as you can understand regular expressions, you can write some simple regular expressions. Generally, complex regular expressions are templates copied from the Internet
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//var regexp = / expression / tag
//The first declaration method is commonly used
//var regexp=new RegExp("expression", "tag")
//Second
/* Common markers are
g:global
i:Ignore case ignorecase
gi:Add the above
*/
var regexp= /^[0-9]*$///Add g or i
var ok=regexp.test("123456")//Match string, return true or false
console.log(ok)
//extend
var string = "1789.123.45"
string.replace(/./g,"-")//Put all the Replace with-
</script>
</body>
</html>
10.2 an example of a login interface
Note that the text of span and div is not manipulated by value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
span{
font-size: 12;
color: #FF0000;
}
#box{
width: 500px;
height: 500px;
position: absolute;
top: 30%;
left: 45%;
}
</style>
</head>
<body bgcolor="antiquewhite">
<script type="text/javascript">
window.onload=function(){
var name=document.getElementById("name");
var alert_name=document.getElementById("alert_name");
var password=document.getElementById("password");
var alert_pas=document.getElementById("alert_pas");
var password_conf=document.getElementById("password_conf");
var email=document.getElementById("email");
var alert_email=document.getElementById("alert_email");
var sub_btn=document.getElementById("sub_btn");
name.onblur=function(){
if(!name.value)
alert_name.innerText="❌User name cannot be empty";
else if(name.value.length<4||name.value.length>12)
alert_name.innerText="❌The user name should be between 4 and 12 characters long";
else
alert_name.innerHTML="<font color='green'>✔</font>";
}
name.onfocus=function(){
alert_name.innerText="";
}
password.onblur=function(){
if(!password.value)
alert_pas.innerText="❌Password cannot be empty";
else if(!(/^[a-zA-Z]\w{5,17}$/.test(password.value)))
alert_pas.innerText="❌Starts with a letter and is 6 in length~18 Can only contain letters, numbers, and underscores";
else
alert_pas.innerHTML="<font color='green'>✔</font>";
}
password.onfocus=function(){
alert_pas.innerText="";
}
password_conf.onblur=function(){
if(!password_conf.value)
alert_pas_conf.innerText="❌Confirm password cannot be empty";
else if(password_conf.value!=password.value)
alert_pas_conf.innerText="❌The confirmation password must be the same as the password";
else
alert_pas_conf.innerHTML="<font color='green'>✔</font>";
}
password_conf.onfocus=function(){
alert_pas_conf.innerText="";
}
email.onblur=function(){
if(!email.value)
alert_email.innerText="❌Mailbox cannot be empty"
else if(!(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email.value)))
alert_email.innerText="❌The mailbox format is incorrect"
else
alert_email.innerHTML="<font color='green'>✔</font>";
}
email.onfocus=function(){
email.innerText="";
}
sub_btn.onclick=function(){
name.onblur();
password.onblur();
password_conf.onblur();
email.onblur();
if(alert_name.innerText=="✔"&&alert_pas.innerText=="✔"&&alert_pas_conf.innerText=="✔"&&alert_email.innerText=="✔")
document.getElementById("myform").submit();
}
}
</script>
<div height="200px" style="">
</div>
<div id="box">
<form action="192.168.0.1" id="myform">
user name : <input type="text" name="name" id="name" />
<span id="alert_name"></span>
<br>
<br>
dense code : <input type="password" name="password" id="password"/>
<span id="alert_pas"> </span>
<br>
<br>
Confirm password:<input type="password" id="password_conf" value="" />
<span id="alert_pas_conf"> </span>
<br>
<br>
Post box : <input type="text" name="email" id="email"/>
<span id="alert_email"> </span>
<br>
<br>
<input type="button" id="sub_btn" value="Submit" />
</form>
</div>
</body>
</html>