自己编写的支持Ajax验证的JS表单验证插件

 创建一个JavaScript表单验证插件,可以说是一个繁琐的过程,涉及到初期设计、开发与测试等等环节。实际上一个优秀的程序员不仅是技术高手,也应该是善假于外物的。本文介绍的这个不错的JavaScript表单验证插件,支持ajax验证,有需要的小伙伴可以参考下

 
 

自己编写了一个表单验证插件,支持ajax验证,使用起来很简单。

每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空;rule表示验证规则,msg表示错误提示信息;to表示要验证的元素的name值,如果元素是单个的,to可以不写。该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息。

验证时机:1、点击提交按钮时显式调用验证方法;2、当元素触发blur时验证。

插件代码:

CSS:

?

1
2
3
4

.failvalid
{
border: solid 2px red !important;
}

JS:

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229

/**
* 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页面:

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152

@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>

效果图:

以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2024-10-31 11:41:28

自己编写的支持Ajax验证的JS表单验证插件的相关文章

自己编写的支持Ajax验证的JS表单验证插件_javascript技巧

    自己编写了一个表单验证插件,支持ajax验证,使用起来很简单.     每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息.     验证时机:1.

JS表单验证的代码(常用)_javascript技巧

注册验证: <script language="JavaScript" src="js/jquery-1.9.1.min.js" type="text/javascript"></script> //验证表单 function vailForm(){ var form = jQuery("#editForm"); if(!vailNickName())return; if(!vailPhone())re

轻松搞定js表单验证_javascript技巧

先看看效果图: html: 引入 <script src="/Scripts/jquery-1.10.2.js"></script> <script src="/Scripts/Validate-1.0.1.js"></script> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head ru

js 表单验证代码

  <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="conten

js表单验证实例讲解_javascript技巧

本文实例为大家分享了js表单验证,供大家参考,具体内容如下 JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证. 被JavaScript 验证的这些典型的表单数据有: 1).用户是否已填写表单中的必填项目? 2).用户输入的邮件地址是否合法? 3).用户是否已输入合法的日期? 4).用户是否在数据域 (numeric field) 中输入了文本?  gspan.html <html> <head> <title>表单验证实例<

验证控件 表单验证-webform的验证控件的无法启动客户端脚本验证?

问题描述 webform的验证控件的无法启动客户端脚本验证? webform的验证控件的EnableClientScript设为true为什么还是无法启动客户端脚本验证?<%@ Page Language=""C#"" AutoEventWireup=""true"" CodeBehind=""Login.aspx.cs"" Inherits=""App003_

Vue.js 表单校验插件_其它

Vuerify 是一个简单轻量的数据校验插件.内置基础的校验规则和错误提示.可自定义规则,规则类型支持正则.函数或者字符串.校验规则可全局注册也可以组件内注册.插件会给 vm 添加 $vuerify 对象,同时 watch 数据并校验合法性,如果有错误会存入 vm.$vuerify.$errors. 安装 npm i vuerify -S 使用 安装插件 import Vue from 'vue' import Vuerify from 'vuerify' Vue.use(Vuerify, /*

快速学习jQuery插件 jquery.validate.js表单验证插件使用方法_jquery

最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

表单验证代码实例:jquery.validate.js表单验证插件

文章简介:很好用的JQuery表单验证插件--jquery.validate.js. jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jquery-1.4.2.min.js和jquery.validate.min.js. 下面演示如何使用jquery.validate.js插件进行表单的验证. 这是HTML表单:<form id="regFro