Javascript implements form extensions that support Ajax verification, and jsajax verifies the form.

Javascript implements form extensions that support Ajax verification, and jsajax verifies the form.

This article shares a Form Verification plug-in that supports ajax verification and 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. Click the submit button to explicitly call the verification method; 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 () {$ (". 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 divtipsstyle = "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 ("<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:
Edit page:

@ Using Model. Suya; @ {ViewBag. Title = "Add"; Layout = "~ /Views/Shared/_ Layout. cshtml ";}{ List <sys_post> postList = (List <sys_post>) ViewData [" postList "]; sys_post post = (sys_post) ViewData [" post "];} <script type = "text/javascript"> $ (function () {// Department tree $ ('# dept '). combotree ({url: 'getpttree', required: false, checkbox: true, onLoadSuccess: function () {$ ('# dept '). combotree ('setvalue', "@ (post. depCode) ") ;}}); // operation result $ (" # ifrm "). load (function (data ){ Var data = eval ("(" + $ ("# ifrm "). contents (). find ("body" ).html () + ")"); alert (data. msg); if (data. OK) back () ;}); $ ("select [name = 'postlevel']"). find ("option [value = '@ (post. postLevel) '] "). attr ("selected", "selected") ;}); // save function save () {if (valid () {$ ("# frm "). submit () ;}// Verify function valid () {var dept =$ ("input [name = 'dept']"); if (! Dept. val () {SimpoValidate. hilight (dept. parent (), "select the Department");} else {SimpoValidate. removehilight (dept. parent ();} return SimpoValidate. valid () ;}// return function back () {parent. $ ('# ttTab '). tabs ('select', "Job Management"); var tab = parent. $ ('# ttTab '). tabs ('getselected'); tab. find ("iframe "). contents (). find ("# btnSearch "). click (); parent. $ ("# ttTab "). tabs ('close', 'modify position information') ;}</script> <div class = "tiao"> <Indium Ut type = "button" class = "submit_btn" value = "save" onclick = "save () "/> <input type =" button "class =" submit_btn "value =" return "onclick =" back () "/> </div> <iframe id =" ifrm "name =" ifrm "style =" display: none; "> </iframe> <form id =" frm "method =" post "enctype =" multipart/form-data "action ="/HR/PostManage/SaveEdit? Id = @ (post. id) "target =" ifrm "> <div class =" adminMainContent "> <div class =" box "> <div class =" box-title "> Basic Information </div> <div class = "box-content"> <table cellpadding = "0" cellspacing = "0" class = "detail" width = "100%"> <tr> <td class =" title "> <span class =" mst "> * </span> job title: </td> <td style = "width: 35%;"> <input type = "text" class = "xinxi_txt" name = "postName" value = "@ post. postName "/> <span class =" valid "msg =" required, And the length cannot exceed 50 "rule =" ^ (. | \ n) {0, 50 }$ "> </span> </td> <td class =" title "> <span class =" mst "> * </span> job ID: </td> <td style = "width: 35%;"> <input type = "text" class = "xinxi_txt" name = "postCode" value = "@ post. postCode "/> <span class =" valid "msg =" required, and cannot exceed 20 "rule =" ^ (. | \ n) {0, 20} $ "ajaxaction ="/HR/PostManage/AjaxCheckPostCode? Id = @ post. id "> </span> </td> </tr> <td class =" title "> <span class =" mst "> * </span> department: </td> <td style = "width: 35%; "> <input type =" text "name =" depCode "id =" dept "class =" easyui-combotree "style =" height: 30px; "/> </td> <td class =" title "> <span class =" mst "> * </span> report objects: </td> <td style = "width: 35%; "> <select class =" xueli "name =" reportPostCode "id =" agreementType "> <option value =" "selected =" selected ">=select = </ option> @ foreach (sys_post item in postList) {if (item. postCode = post. reportPostCode) {<option value = "@ item. postCode "selected =" selected "> @ item. postName </option>} else {<option value = "@ item. postCode "> @ item. postName </option >}</select> <span class = "valid" msg = "select contract type"> </td> </tr> <td class = "title"> <span class = "mst"> * </span> job level: </td> <td style = "width: 35%; "> <select class =" xueli "name =" postLevel "> <option value =" "selected =" selected ">== select ==</option> <option value = "1"> 1 </option> <option value = "2"> 2 </option> <option value = "3"> 3 </option> <option value = "4"> 4 </option> <option value = "5"> 5 </option> <option value = "6"> 6 </option> </select> <span class = "valid" msg = "select a position level"> </td> <td class = "title"> </td> <td style = "width: 35%; "> </td> </tr> <td class =" title "> <span class =" mst "> * </span> remarks: </td> <td colspan = "3" style = "width: 35%;"> <textarea name = "remarks" style = "width: 500px;"> @ post. remarks </textarea> <span class = "valid" msg = "length cannot exceed 500" rule = "^ (. | \ n) {0,500 }$ "> </span> </td> </tr> </table> </div> </form>

:

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• Javascript Regular Expression Form Verification Code
• Getting started with jquery validate. js Form Verification
• Regular Expression Form Verification Code commonly used in JavaScript
• Javascript Form Verification
• Javascript form verification-use and configuration of Parsley. js
• The php user registration page uses js for form verification of specific instances
• Simple js form verification functions
• Javascript Form Verification example (javascript verification email)
• AngularJS implements Form Verification
• Jquery Form Verification plug-in (jquery. validate. js)