Self-compiled javascript form verification plug-in supporting Ajax verification _ javascript skills

Creating a JavaScript form verification plug-in is a tedious process involving initial design, development, and testing. In fact, a good programmer should not only be a technical expert, but also be good at external things. This article introduces a good JavaScript form verification plug-in that supports ajax verification. if you need it, you can refer to the following code to compile a form verification plug-in that supports ajax verification. it is easy to use.

Each form element to be verified has a span tag. the class of this tag has a valid to be verified. if nullable exists, it can be empty. rule indicates the validation rule, msg indicates the error message. to indicates the name value of the element to be verified. if the element is single, to can be left empty. The plug-in traverses every span tag with a valid to identify the elements to be verified before it. it is verified according to the rule. if the verification fails, the border is red, the error message is displayed when you move the cursor over the element.

Verification Time: 1. explicitly call the verification method when you click the submit button; 2. verify when the element triggers blur.

Plug-in code:

CSS:

.failvalid{ border: solid 2px red !important;}

JS:

/*** Suxiang * December 22, 2014 * verification plug-in */SimpoValidate = {// verification rule rules: {int:/^ [1-9] \ d * $/, number: /^ [+-]? \ D *\.? \ D + $/}, // initialize init: function () {$ (". valid "). each (function () {// traverse span if ($ (this) [0]. tagName. toLowerCase () = "span") {var validSpan = $ (this); var to = validSpan. attr ("to"); var target; if (to) {target = $ ("input [name = '" + to + "'], select [name = '"+ to +"'], textarea [name = '"+ to +"'] ");} else {var target = validSpan. prev ();} if (target) {target. blur (function () {SimpoValidate. validOne (Target, validSpan) ;}}}) ;}, // verify all. if the verification succeeds, true valid: function () {SimpoValidate is returned. ajaxCheckResult = true; var bl = true; $ (". valid "). each (function () {// traverse span if ($ (this) [0]. tagName. toLowerCase () = "span") {var validSpan = $ (this); var to = validSpan. attr ("to"); var target; if (to) {target = $ ("input [name = '" + to + "'], select [name = '"+ to +"'], textarea [name = '"+ to +"'] ");} else {t Arget = validSpan. prev ();} if (target) {if (! SimpoValidate. validOne (target, validSpan) {bl = false ;}}}); return bl & SimpoValidate. ajaxCheckResult;}, // returns true validOne: function (target, validSpan) {SimpoValidate. removehilight (target, msg); var rule = SimpoValidate. getRule (validSpan); var msg = validSpan. attr ("msg"); var nullable = validSpan. attr ("class "). indexOf ("nullable") =-1? False: true; // whether it can be empty var to = validSpan. attr ("to"); var ajaxAction = validSpan. attr ("ajaxAction"); if (target) {// checkbox or radio if (target [0]. tagName. toLowerCase () = "input" & target. attr ("type") & (target. attr ("type "). toLowerCase () = "checkbox" | target. attr ("type "). toLowerCase () = "radio") {var checkedInput = $ ("input [name = '" + to + "']: checked"); if (! Nullable) {if (checkedInput. length = 0) {SimpoValidate. hilight (target, msg); return false ;}}// input or select if (target [0]. tagName. toLowerCase () = "input" | target [0]. tagName. toLowerCase () = "select") {var val = target. val (); if (! Nullable) {if ($. trim (val) = "") {SimpoValidate. hilight (target, msg); return false ;}} else {if ($. trim (val) = "") {SimpoValidate. removehilight (target, msg); return true ;}} if (rule) {var reg = new RegExp (rule); if (! Reg. test (val) {SimpoValidate. hilight (target, msg); return false ;}} if (ajaxAction) {SimpoValidate. ajaxCheck (target, val, ajaxAction) ;}} else if (target [0]. tagName. toLowerCase () = "textarea") {var val = target. text (); if (! Nullable) {if ($. trim (val) = "") {SimpoValidate. hilight (target, msg); return false ;}} else {if ($. trim (val) = "") {SimpoValidate. removehilight (target, msg); return true ;}} if (rule) {var reg = new RegExp (rule); if (! Reg. test (val) {SimpoValidate. hilight (target, msg); return false ;}} if (ajaxAction) {SimpoValidate. ajaxCheck (target, val, ajaxAction) ;}} return true ;}, ajaxCheckResult: true, ajaxCheck: function (target, value, ajaxAction) {var targetName = target. attr ("name"); var data = new Object (); data [targetName] = value; $. ajax ({url: ajaxAction, type: "POST", data: data, async: false, success: function (data) {if (data. data = true) {SimpoValidate. removehilight (target);} else {SimpoValidate. ajaxCheckResult = false; SimpoValidate. hilight (target, data. data) ;}}) ;}, // Obtain the verification rule getRule: function (validSpan) {var rule = validSpan. attr ("rule"); switch ($. trim (rule) {case "int": return this.rules.int; case "number": return this. rules. number; default: return rule; break; }}, // red border and error message hilight: function (target, msg) {target. addClass ("failvalid"); target. bind ("mouseover", function (e) {SimpoValidate. tips (target, msg, e) ;}); target. bind ("mouseout", function () {SimpoValidate. removetips () ;}) ;}, // deselect the red border and the error message removehilight: function (target) {target. unbind ("mouseover"); target. unbind ("mouseout"); target. removeClass ("failvalid"); SimpoValidate. removetips () ;}, // The prompt tips: function (target, text, e) {var ptipsstyle = "position: absolute; z-index: 99999; left: 0; top: 0; background-color: # dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height: 20px; font-size: 12px ;"; $ ("body "). append ("
"+ Text +"
"); Var ptips = $ (". p-tips "); ptips.css (" visibility "," visible "); var top = e. clientY + $ (window ). scrollTop ()-ptips. height ()-18; var left = e. clientX; ptips.css ("top", top); ptips.css ("left", left); $ (target ). mousemove (function (e) {var top = e. clientY + $ (window ). scrollTop ()-ptips. height ()-18; var left = e. clientX; ptips.css ("top", top); ptips.css ("left", left) ;}, // The removetips prompt is removed: function () {$ (". p-tips "). remove () ;};$ (function () {SimpoValidate. init ();});

How to use:

Edit page:

@ Using Model. Suya; @ {ViewBag. Title = "Add"; Layout = "~ /Views/Shared/_ Layout. cshtml ";}@{ List
 
  
PostList = (List
  
   
) ViewData ["postList"]; sys_post post = (sys_post) ViewData ["post"];}