Has its own javascript Form Verification plug-in, javascript form

Has its own javascript Form Verification plug-in, javascript form

I have compiled a Form Verification plug-in, which is easy to use. More functions can be expanded in the future, such as ajax verification.

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:

/*** Verification plug-in */SimpoValidate = {// verification rule rules: {int:/^ [1-9] \ d * $/, number: /^ [+-]? \ D *\.? \ D + $/}, // initialize init: function () {$ ("span [class * = 'valid']"). each (function () {// traverse 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 () {var bl = true; $ ("span [class * = 'valid']") is returned. each (function () {// traverse span var validSpan =$ (this); var to = validSpan. attr ("to"); var target; if (to) {target = $ ("input [name = '" + to + "'], select [name = '"+ to +"'], textarea [name = '"+ to +"'] ");} else {target = validSpan. prev ();} if (target) {if (! SimpoValidate. validOne (target, validSpan) {bl = false ;}}); return bl ;}, // true validOne: function (target, validSpan) is returned if a single verification is successful) {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"); 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 ;}} 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 ;}}} return true ;}, // 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 divtipsstyle = "position: absolute; left: 0; top: 0; background-color: # dceaf2; padding: 3px; border: solid 1px #6dbde4; visibility: hidden; line-height: 20px; "; $ (" body "). append ("<div class = 'div-tids' style = '" + divtipsstyle + "'>" + text + "</div> "); var divtips = $ (". div-tips "); divtips.css (" visibility "," visible "); var top = e. clientY + $ (window ). scrollTop ()-divtips. height ()-18; var left = e. clientX; divtips.css ("top", top); divtips.css ("left", left); $ (target ). mousemove (function (e) {var top = e. clientY + $ (window ). scrollTop ()-divtips. height ()-18; var left = e. clientX; divtips.css ("top", top); divtips.css ("left", left) ;}}, // The removal prompt removetips: function () {$ (". div-tips "). remove () ;};$ (function () {SimpoValidate. init ();});

How to use:

1. Reference CSS and JS (jQuery must be referenced ):

<link type="text/css" href="~/Scripts/SimpoValidate.css" rel="stylesheet" /><script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script><script type="text/javascript" src="~/Scripts/ValidateUtil.js"></script>

2. Form HTML code (partial code ):

<Table class = "table-test" cellpadding = "0" cellspacing = "0" style = "border-collapse: collapse; width: 100%; "> <tr> <td> <input name =" c "value =" "type =" text "/> <span class =" valid nullable "rule =" int "msg = "can be empty, enter a positive integer "> </span> </td> </tr> <td> <input name =" d "value =" "type =" text "/> <span class = "valid" rule = "number" msg = "required, enter the number "> </span> </td> </tr> <td> <select> <option value ="-1 ">== select = = </o Ption> <option value = "1"> Yes </option> <option value = "2"> NO </option> </select> <span class = "valid" rule = "^ (?! -1 $ ). + $ "msg =" required "> </span> </td> </tr> <td> <input name =" a "value =" 1 "type = "checkbox"/> <span> more </span> <input name = "a" value = "2" type = "checkbox"/> <span> less </span> <span class = "valid" rule = "" msg = "required" to = "a"> </span> </td> </tr> <td> <input name = "B" value = "1" type = "radio"/> <span> dog </span> <input name = "B" value = "2" type = "radio"/> <span> CAT </span> <span class = "valid" rule = "" msg = "required" to = "B"> </span> </td> </tr> <td> <textarea cols = "20" rows = "5" style = "height: 50px; width: 300px; "> </textarea> <span class =" valid nullable "rule =" ^ (. | \ n) {5,100} $ "msg =" can be empty, length must be greater than or equal to 5 and less than or equal to 100 "> </span> </td> </tr> </table>

3. Execute the verification JS Code:

// Save data function save () {if (SimpoValidate. valid () {// perform verification $ ("# frm"). submit (); // submit a form }}

:

The above is the javascript Form Verification plug-in prepared by the author, hoping to help you.

Articles you may be interested in:

• Regular Expressions for JavaScript form verification [recommended]
• Javascript Regular Expression Form Verification Code
• Getting started with jquery validate. js Form Verification
• Teach you how to write a js form verification framework by yourself
• Simple js form verification functions
• Javascript Form Verification example (javascript verification email)
• AngularJS implements Form Verification
• Jquery Form Verification plug-in (jquery. validate. js)
• Form Verification of simple registration module made by javascript
• Complete example of General Form Verification plug-in implemented by JS