Use js and regular expressions to verify the form. js Regular Expressions
Today, we will share with you the verification of a form, mainly including names, gender, age and ID card numbers. When it comes to verification, we mainly use regular expressions to standardize and verify the information you enter, and use regular expressions to compare and display differences with the information you enter to obtain verification results, that is, "pass" or "not pass ". In this article, I used the onblur event. The onblur attribute is triggered when the element loses focus. onblur is often used for Form Verification Code (for example, the user leaves the form field ).
Tip: The onblur attribute is opposite to the onfocus attribute.
I. First, let's look at the results. The following shows the final functional interface.Ii. Next, let's take a look at the body section.
<Body> <div id = "box"> <form onsubmit = "return check () "action =" register_success.html "> <fieldset> <legend> information registry </legend> <p> <label> Name: </label> <input type = "text" id = "txtname" class = "txt" onblur = "Name () "/> <span id =" span_name "> from 2 ~ -Six Chinese characters </span> </p> <label> password: </label> <input type = "password" id = "txtpwd" class = "txt" onblur = "Password () "/> <span id =" span_pwd "> enter 6 ~ 8 characters </span> </p> <label> confirm the password: </label> <input type = "password" id = "txtpwd2" class = "txt" onblur = "Password2 () "/> <span id =" span_pwd2 "> confirm the password again </span> </p> <label> gender: </label> <input type = "text" id = "txtsex" class = "txt" onblur = "Sex () "/> <span id =" span_sex "> select a male or female </span> </p> <label> age: </label> <input type = "text" id = "txtage" class = "txt" onblur = "Age () "/> <span id =" span_age "> consists of numbers greater than 9 and less than 100 </span> </p> <label> id card number: </label> <input type = "text" id = "txtnum" class = "txt" onblur = "Num () "/> <span id =" span_num "> consists of 18 digits </span> </p> <label> Student id: </label> <input type = "text" id = "txtstu" class = "txt" onblur = "Stu () "/> <span id =" span_stu "> consists of 12 digits </span> </p> <label> blood type: </label> <input type = "text" id = "txtxue" class = "txt" onblur = "Xuexing () "/> <span id =" span_xue "> enter A, B, AB, or O-type blood </span> </p> <label> address: </label> <input type = "text" id = "txtarea" class = "txt" onblur = "Area () "/> <span id =" span_area "> no less than 8 Chinese characters </span> </p> <label> Email: </label> <input type = "text" id = "txtemail" class = "txt" onblur = "Email () "/> <span id =" span_email "> such as jack@163.com </span> </p>3. The js part is the main content of the regular expression.
<Script type = "text/javascript"> function Name () {// verify the name var Name = document. getElementById ("txtname "). value; // obtain the information you entered var nameReg =/^ [\ u4e00-\ u9fa5] {2, 6} $/; // define constraints, 2 to 6 Chinese if (! NameReg. test (name) {// judge var t = span_name.innerHTML = "Please input 2 ~ 6 Chinese characters! "; // If the input is invalid, the message" return false;} else {span_name.innerHTML = "correct format" is displayed. // return true after verification is passed.} function Password () {// password var pwd = document. getElementById ("txtpwd "). value; var reg =/^ [\ d \ w] {6, 12} $/; if (! Reg. test (pwd) {span_pwd.innerHTML = "Please Input 6 ~ Number, letter, or password combination within 12 ";} else {span_pwd.innerHTML =" correct format ";} function Password2 () {// confirm the password var pwd = document. getElementById ("txtpwd "). value; var pwd2 = document. getElementById ("txtpwd2 "). value; if (pwd! = Pwd2) {span_pwd2.innerHTML = "two input inconsistencies";} else {span_pwd2.innerHTML = "correct format";} function Sex () {// verify gender var sex = document. getElementById ("txtsex "). value; var sexReg =/^ male $ | ^ female $/; if (! SexReg. test (sex) {span_sex.innerHTML = "enter a male or female! "; Return false;} else {span_sex.innerHTML =" correct format "; return true ;}} function Age () {// verify age var Age = document. getElementById ("txtage "). value; var ageReg =/(^ [1-9] [0-9]? $) | ^ 100 $/; if (! AgeReg. test (age) {span_age.innerHTML = "Enter 1 ~ The value is 100! "; Return false;} else {span_age.innerHTML =" correct format "; return true ;}} function Num () {// verify the ID card number (15 digits or 18 digits) var num = document. getElementById ("txtnum "). value; var numReg =/(^ \ d {15} $) | (^ \ d {17} ([0-9] | X) $)/; if (! NumReg. test (num) {span_num.innerHTML = "enter a 15-or 18-digit ID card number! "; Return false;} else {span_num.innerHTML =" correct format "; return true ;}} function Stu () {// verify student ID var stu = document. getElementById ("txtstu "). value; var stuReg =/^ \ d {12} $/; if (! StuReg. test (stu) {span_stu.innerHTML = "enter a 12-digit number! "; Return false;} else {span_stu.innerHTML =" correct format "; return true ;}} function Xuexing () {// verify the blood type var xue = document. getElementById ("txtxue "). value; var xueReg =/^ A $ | ^ B $ | ^ AB $ | ^ O $/; // var xueReg =/^ AB $ | ^ [A-Z] $ /; if (! XueReg. test (xue) {span_xue.innerHTML = "Please input A, B, AB or O-type blood! "; Return false;} else {span_xue.innerHTML =" correct format "; return true ;}} function Area () {// verify the address var area = document. getElementById ("txtarea "). value; var areaReg =/^ [\ u4e00-\ u9fa5] {8, }$/; if (! AreaReg. test (area) {span_area.innerHTML = "Enter at least 8 Chinese characters! "; Return false;} else {span_area.innerHTML =" correct format "; return true ;}} function Email () {// email address verification var Email = document. getElementById ("txtemail "). value; var reg1 =/^ [\ w \ d] {} @ [\ w \ d }\. [\ w] {2, 3} $/; if (! Reg1.test (email) {span_email.innerHTML = "error! For example: jack@163.com ";} else {span_email.innerHTML =" correct format "; }}</script>4. At the end of the article, we should add some styles to make it look nice.
<Style type = "text/css"> body {font-size: 15px;} fieldset {width: pixel PX; margin: auto; border: 1px solid # ccc ;} legend {margin-left: 180px;} p {margin: 20px auto;}/* input box */. txt {color: blue; border: 1px solid orange; width: 150px; padding-left: 5px;} span {color: red; font-size: 13px ;} # box1> p> input {margin-left: 100px ;}</style>Conclusion:
This article is created using pure js. in the value of the input box above, I use value;Val () can be used only when there is a jQuery plug-in, and value can be used without the jQuery plug-in. Val () is a function written by jQuery based on the value in the native JS.
Finally, I hope that all my friends who have read this article will be able to gain some benefits. I also hope that the experts will give us some advice and point out their shortcomings.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
