自己编写的支持Ajax验证的JS表单验证插件
自己编写了一个表单验证插件，支持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(\"<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();
});
如何使用：
Edit页面：
@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 () {
//部门树
$(\'#dept\').combotree({
url: \'GetDeptTree\',
required: false,
checkbox: true,
onLoadSuccess: function () {
$(\'#dept\').combotree(\'setValue\', \"@(post.depCode)\");
}
});
//操作结果
$(\"#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\");
});
//保存
function save() {
if (valid()) {
$(\"#frm\").submit();
}
}
//验证
function valid() {
var dept = $(\"input[name=\'dept\']\");
if (!dept.val()) {
SimpoValidate.hilight(dept.parent(), \"请选择所属部门\");
} else {
SimpoValidate.removehilight(dept.parent());
}
return SimpoValidate.valid();
}
//返回
function back() {
parent.$(\'#ttTab\').tabs(\'select\', \"岗位管理\");
var tab = parent.$(\'#ttTab\').tabs(\'getSelected\');
tab.find(\"iframe\").contents().find(\"#btnSearch\").click();
parent.$(\"#ttTab\").tabs(\'close\', \'修改岗位信息\');
}
</script>
<div class=\"tiao\">
<input type=\"button\" class=\"submit_btn\" value=\"保存\" onclick=\"save()\" />
<input type=\"button\" class=\"submit_btn\" value=\"返回\" 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\">
基础信息
</div>
<div class=\"box-content\">
<table cellpadding=\"0\" cellspacing=\"0\" class=\"detail\" width=\"100%\">
<tr>
<td class=\"title\">
<span class=\"mst\">*</span>岗位名称：
</td>
<td style=\"width: 35%;\">
<input type=\"text\" class=\"xinxi_txt\" name=\"postName\" value=\"@post.postName\" />
<span class=\"valid\" msg=\"必填，且长度不能超过50\" rule=\"^(.|\\n){0,50}$\"></span>
</td>
<td class=\"title\">
<span class=\"mst\">*</span>岗位编号：
</td>
<td style=\"width: 35%;\">
<input type=\"text\" class=\"xinxi_txt\" name=\"postCode\" value=\"@post.postCode\" />
<span class=\"valid\" msg=\"必填，且长度不能超过20\" rule=\"^(.|\\n){0,20}$\" ajaxaction=\"/HR/PostManage/AjaxCheckPostCode?id=@post.id\">
</span>
</td>
</tr>
<tr>
<td class=\"title\">
<span class=\"mst\">*</span> 所属部门：
</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>汇报对象：
</td>
<td style=\"width: 35%;\">
<select class=\"xueli\" name=\"reportPostCode\" id=\"agreementType\">
<option value=\"\" selected=\"selected\">==请选择==</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=\"请选择合同分类\">
</td>
</tr>
<tr>
<td class=\"title\">
<span class=\"mst\">*</span>岗位级别：
</td>
<td style=\"width: 35%;\">
<select class=\"xueli\" name=\"postLevel\">
<option value=\"\" selected=\"selected\">==请选择==</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=\"请选择岗位级别\">
</td>
<td class=\"title\">
</td>
<td style=\"width: 35%;\">
</td>
</tr>
<tr>
<td class=\"title\">
<span class=\"mst\">*</span>备注：
</td>
<td colspan=\"3\" style=\"width: 35%;\">
<textarea name=\"remarks\" style=\"width: 500px;\">@post.remarks</textarea>
<span class=\"valid\" msg=\"长度不得超过500\" rule=\"^(.|\\n){0,500}$\"></span>
</td>
</tr>
</table>
</div>
</div>
</div>
</form>
效果图：
以上所述就是本文的全部内容了，希望大家能够喜欢。
本文地址：https://www.stayed.cn/item/25002
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)