自己编写了一个表单验证插件，支持ajax验证，使用起来很简单。
    每个需要验证的表单元素下面有一个span标签，这个标签的class有一个valid表示需要验证，如果有nullable则表示可为空；rule表示验证规则，msg表示错误提示信息；to表示要验证的元素的name值，如果元素是单个的，to可以不写。该插件会遍历每个有valid的span标签，找出它前面需要验证的元素，根据rule验证，如果验证不通过，则显示边框为红色，鼠标放在元素上时显示错误信息。
    验证时机：1、点击提交按钮时显式调用验证方法；2、当元素触发blur时验证。
插件代码：
css：
.failvalid{ border: solid 2px red !important;}
js：
/*** suxiang* 2014年12月22日* 验证插件*/simpovalidate = { //验证规则 rules: { int: /^[1-9]\d*$/, number: /^[+-]?\d*\.?\d+$/ }, //初始化 init: function () { $(.valid).each(function () { //遍历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); }); } } }); }, //验证全部，验证成功返回true valid: function () { simpovalidate.ajaxcheckresult = true; var bl = true; $(.valid).each(function () { //遍历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 { target = validspan.prev(); } if (target) { if (!simpovalidate.validone(target, validspan)) { bl = false; } } } }); return bl && simpovalidate.ajaxcheckresult; }, //单个验证，验证成功返回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); var ajaxaction = validspan.attr(ajaxaction); 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; } } 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); } } }); }, //获取验证规则 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; 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 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();});
如何使用：
edit页面：
@using model.suya;@{ viewbag.title = add; layout = ~/views/shared/_layout.cshtml;}@{ list postlist = (list)viewdata[postlist]; sys_post post = (sys_post)viewdata[post];}
基础信息
*岗位名称： *岗位编号：
* 所属部门： *汇报对象： ==请选择== @foreach (sys_post item in postlist) { if (item.postcode == post.reportpostcode) { @item.postname } else { @item.postname } }
*岗位级别： ==请选择== 1 2 3 4 5 6
*备注： @post.remarks

效果图：
以上所述就是本文的全部内容了，希望大家能够喜欢。