Home > Developer > Web Develop
long time No blog, really is a sin, later can not be so, only study not thinking, learning is useless, I hope in the blog Park can record their own learning, although the record is some simple technology, but can play to consolidate themselves and a little help and I like chicken is also good, haha, sorry, There's a lot of gossip.
Today, I would like to review the form before the verification method, because tomorrow's work to use, and a long time no review, are almost forgotten.
Now is the study of the net, about the form verification, now know, in addition to the previous kind of fool-style each form option to use a function to verify, there are two methods is more convenient, today first introduce the first, in the front-end implementation of forms validation Method-- A form validation method based on Validate.js.
Note Yo, the following I used to hang out the code, and then finally put the full code, provide copy and paste, small partners don't rush to knock Oh!
1. Download and introduce validate.js
First of all, we need to download a copy of the Validate.js file, which can be downloaded to the jquery website or csdn.
After downloading, create a new HTML file, and then successively introduce the Jquery.js file and validate.js into the HTML code, I'll create a new file named Formcheck.html, as shown in:
here I introduced the layui.css style file for a good look at the form I was waiting for.
2. Create a form
3. Implementing validation of form data using Validate.js
Again, we look directly at the code:
In addition to these test methods, Validate.js also encapsulated in including the mailbox format verification, phone number format verification, such as authentication, the use of the same method and numbers in the same, want to learn more about the students can self-view the specific JS content Oh. The code in the Rules section limits the specification of the input data, and the message sets the error message.
4. View Results
This verification method is very simple and convenient, with the help of a JS plug-in, easy to do data validation, I hope this simple demo can help me the same dish chicken oh, first wrote here, to sleep, good night Oh!
Yes, almost forgot to complete the code, please consultation fee:
1<! DOCTYPE html>234<meta charset="UTF-8">5<title> front-end form validation </title>6<link rel="stylesheet"Type="Text/css"href="Layui-v2.3.0/layui/css/layui.css"/>7<script src="Http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>8<script type="Text/javascript"Src="Js/jquery.validate.js"></script>9<script type="Text/javascript"Src="Layui-v2.3.0/layui/layui.js"></script>Ten<style type="Text/css"> One#form-box{ A width:700px; - height:300px; - Margin:auto; the position:relative; - top:100px; - } -</style> + -<body> +<form action="formcheck.html"Method="Post"> A<div id="Form-box" class="Layui-form Layui-form-pane"> at<divclass="Layui-form-item"> -<labelclass="Layui-form-label"> User name </label> -<divclass="Layui-input-inline"> -<input type="text"Name="UserName" class="Layui-input"> -</div> -</div> in<divclass="Layui-form-item"> -<labelclass="Layui-form-label"> Password </label> to<divclass="Layui-input-inline"> +<input type="text"Name="PassWord" class="Layui-input"> -</div> the</div> *<divclass="Layui-form-item"> $<input type="Submit"Name=""Id="Frmsubmit"Value="Submit" class="layui-btn layui-btn-primary layui-btn-normal"/>Panax Notoginseng</div> -</div> the</form> +</body> A<script type="Text/javascript"> the $ (function () { +$("form"). Validate ({ - rules: { $ userName: { $Requiredtrue,//The item indicates that the field is required -MaxLength5 //indicates that the maximum length of the field is 5 - }, the PassWord: { -Requiredtrue,WuyiNumbertrue //indicates that the field must be a numeric the } - }, Wu messages: { - userName: { AboutRequired"* Required Fields", $MaxLength"* Maximum of 5 characters" - }, - PassWord: { -Required"* Required Fields", ANumber"* Must be a valid number" + } the } - }) $ }); the</script> theHope to help you Oh!
My Email:[email protected]
form data validation Method (i)--using Validate.js to implement form data validation
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
