Validform + layer implements beautiful form verification effects, validformlayer

Validform + layer implements beautiful form verification effects, validformlayer

Validform is an excellent form verification plug-in, and layer is an excellent pop-up window plug-in. Let's take an example to see the sparks between the two.

First introduce jquery, Validform, and layer

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="http://res.layui.com/lay/lib/layer/src/layer.js"></script> <script type="text/javascript" src="http://lib.h-ui.net/Validform/5.3.2/Validform.min.js"></script> 

HTML

<Form action = "post. php "method =" post "name =" form "class =" form-horizontal "id =" form-Validform "> <div class =" row cl "> <label class = "form-label col-3"> <span class = "c-red"> * </span> nickname: </label> <div class = "formControls col-8"> <input type = "text" class = "input-text" value = "" placeholder = "3-16 bits can be used chinese and English characters "id =" uname "name =" uname "datatype =" * 2-16 "nullmsg =" user nickname cannot be blank "> </div> <div class = "row cl"> <l Abel class = "form-label col-3"> <span class = "c-red"> * </span> User Password: </label> <div class = "formControls col-8"> <input type = "text" class = "input-text" value = "" placeholder = "5-20 bits, the value range is [0-9a-zA-Z _@!. -] "Id =" pwd "name =" pwd "datatype ="/\ w {5, 20}/I "nullmsg =" user password cannot be blank "> </div> </div> <div class = "row cl"> <label class = "form-label col-3"> <span class = "c-red"> * </span> email: </label> <div class = "formControls col-8"> <input type = "text" class = "input-text" value = "" placeholder = "**** @***. * ** "id =" email "name =" email "datatype =" e "nullmsg =" Email cannot be blank "> </div> <div class = "row cl"> <label class = "form-label Col-3 "> </label> <div class =" formControls col-8 "> <a href =" javascript:; "id =" safecodes "style =" color: red "> <? Php echo $ safecode;?> </A> </div> <div class = "row cl" style = "text-align: center "> <input class =" btn-primary radius "type =" submit "value =" submit "> </div> </form>

JS

<Script type = "text/javascript"> $ (function () {$ ("# form-Validform "). validform ({tiptype: 4, ajaxPost: true, callback: function (data) {if (data. status = 1) {layer. msg (data.info, {icon: data. status, time: 1000}, function () {location. reload (); // refresh the page});} else {layer. msg (data.info, {icon: data. status, time: 3000}) ;}}); $ ('# safecodes '). click (function () {$ ('# safecode '). val ($ ('# safecodes '). text () ;}); </script>

Server return

{"info":"\u6210\u529f","status":1,"url":""} 

In this example, click "Submit"-> "verify form one by one"-> complete verification ajax submission-> judge based on returned information-> A message is displayed.

Articles you may be interested in:

• JQuery Form Verification plug-in formValidation for personalized error messages
• Getting started with jquery validate. js Form Verification
• Jquery exercise form verification implementation code
• Code for implementing the form verification function using jquery (concise)
• Use the formValidator plug-in for jquery Form Verification
• Jquery plugin easyUi Form Verification submission (sample code)
• Form Verification Based on Bootstrap + jQuery. validate
• Small and powerful jquery layer pop-up window plug-in