Jquery implements a simple mobile verification form and jquery Verification Form

Jquery implements a simple mobile verification form and jquery Verification Form

Verify that the red submit button is displayed

BindBlur: function () {// jquery multilevel verification form var n =n ('# item_name'); var p =$ ('# price '); var r = $ ('# reserv'); show (velidate ()); // perform a verification first after the page is loaded. // verify and bind the three fields to be verified. Here, you can also write a code // $ ('# item_name ', '# price', $ (' # reserv ')). on ({blur: function () {show (today date ()}); n. on ({blur: function () {show (velidate ()}); p. on ({blur: function () {show (velidate ()}); r. on ({blur: function () {show (velidate ()}); function velidate () {// obtain the verification result var flag = true; if (n. val () = "") {flag = false;} if (p. val () = "0" | p. val () = "") {flag = false;} if (r. val () = "0" | r. val () = "") {flag = false;} return flag;} function show (flag) {// reflect the verification result to the page if (flag) {$ (". down-complete-btn ").css (" background-color "," # b02125 ");} else {$ (". down-complete-btn ").css (" background-color "," # 8f8f8f ");}}},

Verification, called when the user clicks submit, will locate the need for perfection

check:function(){  var n = $('#item_name');  var p = $('#price');  var r = $('#reserve');  if(n.val()==""){n.focus();return false;}  if(p.val()=="0" || p.val()==""){p.focus();return false;}  if(r.val()=="0" || r.val()==""){r.focus();return false;}  return true;},

This section is called for verification before ajax submission and submission.

PostData: function () {$ (". down-complete-btn "). click (function () {if (Add. check () {$. ajax ({type: 'post', dataType: 'json', data: {id: $ ("# item_id "). val (), name: $ ("# item_name "). val (), price: $ ("# price "). val (), photos: $ ("# photos "). val (),}, cache: false, url: '/main/goods/add', success: function (data) {if (data. code = 1) {alert ("modified successfully");} else {console. log (data) ;}, error: function () {alert ('network exception ');}});}});}

Easy_form_validate.js

Require. config ({paths: {"jquery ":". /lib/jquery-1.11.1.min ", 'icon _ upload ':'. /icon_Upload '}); require (['jquery', 'icon _ upload'], function () {Add. bindBlur (); Add. postData () ;}); var Add = {bindBlur: function () {// jquery multilevel verification form var n =$ ('# item_name '); var p = $ ('# price'); var r = $ (' # reserv'); show (velidate ()); // perform a verification first after the page is loaded. // verify and bind the three fields to be verified. Here, you can also write a code // $ ('# item_name ', '# price', $ (' # reserv ')). on ({blur: function () {show (velidate ()}); n. on ({blur: function () {show (velidate ()}); p. on ({blur: function () {show (velidate ()}); r. on ({blur: function () {show (velidate ()}); function velidate () {// obtain the verification result var flag = true; if (n. val () = "") {flag = false;} if (p. val () = "0" | p. val () = "") {flag = false;} if (r. val () = "0" | r. val () = "") {flag = false;} return flag;} function show (flag) {// reflect the verification result to the page if (flag) {$ (". down-complete-btn ").css (" background-color "," # b02125 ");} else {$ (". down-complete-btn ").css (" background-color "," # 8f8f8f ") ;}}, check: function () {var n = $ ('# item_name'); var p = $ ('# price'); var r = $ (' # reserve '); if (n. val () = "") {n. focus (); return false;} if (p. val () = "0" | p. val () = "") {p. focus (); return false;} if (r. val () = "0" | r. val () = "") {r. focus (); return false;} return true;}, postData: function () {$ (". complete-btn "). click (function () {if (Add. check () {$. ajax ({type: 'post', dataType: 'json', data: {id: $ ("# item_id "). val (), name: $ ("# item_name "). val (), summary: $ ("# summary "). text (), price: $ ("# price "). val (), store: $ ("# store "). val (), mobileDetail: $ ("# detail "). val (), photos: $ ("# photos "). val (), brokerage: $ ("# brokerage "). val (), flag: $ ("# flag "). val (),}, cache: false, url: '/main/goods/add', success: function (data) {if (data. code = 1) {alert ("modified successfully");} else {console. log (data) ;}, error: function () {alert ('network exception ');}});}});}};

Let's take a look at the verification code.

<Script type = "text/javascript"> // <! [CDATA [$ (function () {/** the idea is to first add a required tag for each required and implement it using the each () method. * Create an element in the each () method. Then, add the created element to the parent element through the append () method. * This describes the essence of this. Each time this corresponds to the corresponding input element, the corresponding parent element is obtained. * Then add a focus loss event to the input element. Then, verify the user name and email. * Here we use a judgment is (). If it is a user name, it will be processed accordingly. If it is an email, it will be verified accordingly. * In the jQuery framework, you can also insert original javascript code. For example, the authentication username contains this. value, and this. value. length. Determine the content. * Then, the email is verified. It seems that a regular expression is used. * Add a keyup event and a focus event to the input element. The verification is also required during keyup. You can call the blur event. TriggerHandler () trigger is used to trigger the corresponding event. * Perform unified verification when submitting the form at the end * handle the whole and details * // if required, add the Red Star logo. $ ("form: input. required "). each (function () {var $ required = $ ("<strong class = 'high'> * </strong>"); // create an element $ (this ). parent (). append ($ required); // then append it to the document}); // $ ('form: input') after the text box loses focus '). blur (function () {var $ parent = $ (this ). parent (); $ parent. find (". formtips "). remove (); // verify the username if ($ (this ). is ('# username') {if (this. value = "" | this. value. length <6) {Var errorMsg = 'enter at least 6 usernames. '; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span>') ;}// verify the email if ($ (this ). is ('# email') {if (this. value = "" | (this. value! = ""&&! /. + @. + \. [A-zA-Z] {2, 4} $ /. test (this. value) {var errorMsg = 'enter the correct email address. '; $ parent. append ('<span class = "formtips onError">' + errorMsg + '</span>');} else {var okMsg = 'the input is correct. '; $ parent. append ('<span class = "formtips onSuccess">' + okMsg + '</span> ');}}}). keyup (function () {$ (this ). triggerHandler ("blur ");}). focus (function () {$ (this ). triggerHandler ("blur") ;}); // end blur // submit for final verification. $ ('# Send '). click (function () {$ ("form: input. required "). trigger ('blur'); var numError = $ ('form. onerror '). length; if (numError) {return false;} alert ("registration successful, the password has been sent to your mailbox, please check. ") ;}); // reset $ ('# res '). click (function () {$ (". formtips "). remove () ;};}) //]> </script>