自己編寫了一個表單驗證插件，使用起來很簡單，以后還可以擴展更多的功能，比如ajax驗證。
每個需要驗證的表單元素下面有一個span標簽，這個標簽的class有一個valid表示需要驗證，如果有nullable則表示可為空；rule表示驗證規則，msg表示錯誤提示信息；to表示要驗證的元素的name值，如果元素是單個的，to可以不寫。該插件會遍歷每個有valid的span標簽，找出它前面需要驗證的元素，根據rule驗證，如果驗證不通過，則顯示邊框為紅色，鼠標放在元素上時顯示錯誤信息。
驗證時機：1、點擊提交按鈕時顯式調用驗證方法；2、當元素觸發blur時驗證。
插件代碼：
CSS：
.failvalid{ border: solid 2px red !important;}JS：
/*** 驗證插件*/SimpoValidate = { //驗證規則 rules: { int: /^[1-9]/d*$/, number: /^[+-]?/d*/.?/d+$/ }, //初始化 init: function () { $("span[class*='valid']").each(function () { //遍歷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); }); } }); }, //驗證全部，驗證成功返回true valid: function () { var bl = true; $("span[class*='valid']").each(function () { //遍歷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) { SimpoValidate.removehilight(target, msg); var rule = SimpoValidate.getRule(validSpan); var msg = validSpan.attr("msg"); var nullable = validSpan.attr("class").indexOf("nullable") == -1 ? false : true; //是否可為空 var to = validSpan.attr("to"); if (target) { //checkbox或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或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; }, //獲取驗證規則 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; } }, //紅邊框及錯誤提示 hilight: function (target, msg) { target.addClass("failvalid"); target.bind("mouseover", function (e) { SimpoValidate.tips(target, msg, e); }); target.bind("mouseout", function () { SimpoValidate.removetips(); }); }, //取消紅邊框及錯誤提示 removehilight: function (target) { target.unbind("mouseover"); target.unbind("mouseout"); target.removeClass("failvalid"); SimpoValidate.removetips(); }, //顯示提示 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-tips' 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); }); }, //移除提示 removetips: function () { $(".div-tips").remove(); }};$(function () { SimpoValidate.init();});如何使用：
1、引用CSS和JS(必須引用jQuery)：
<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、表單HTML代碼(部分代碼)：
<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="可為空，請填寫正整數"></span> </td> </tr> <tr> <td> <input name="d" value="" type="text" /> <span class="valid" rule="number" msg="必填，請填寫數字"></span> </td> </tr> <tr> <td> <select> <option value="-1">==請選擇==</option> <option value="1">是</option> <option value="2">否</option> </select> <span class="valid" rule="^(?!-1$).+$" msg="必選"></span> </td> </tr> <tr> <td> <input name="a" value="1" type="checkbox" /> <span>多</span> <input name="a" value="2" type="checkbox" /> <span>少</span> <span class="valid" rule="" msg="必選" to="a"></span> </td> </tr> <tr> <td> <input name="b" value="1" type="radio" /> <span>狗</span> <input name="b" value="2" type="radio" /> <span>貓</span> <span class="valid" rule="" msg="必選" to="b"></span> </td> </tr> <tr> <td> <textarea cols="20" rows="5" style="height: 50px; width: 300px;"></textarea> <span class="valid nullable" rule="^(.|/n){5,100}$" msg="可為空，長度必須大于等于5小于等于100"></span> </td> </tr></table>3、執行驗證JS代碼：
//保存數據function save() { if (SimpoValidate.valid()) { //執行驗證 $("#frm").submit(); //提交表單 }}效果圖：
以上就是作者自己動手編寫的javascript表單驗證插件，希望能夠幫助到大家。
新聞熱點
疑難解答
