简单的表单验证插件（Jquery写的）
2012-05-08 10:10
225 查看
在做web开发的时候经常遇到表单验证问题，表单验证一般有客户端验证和服务器端验证，这个验证插件仅仅能满足我的项目中的基本需求的。
Validate_Tools.js
对于对象type为text ，textarea，password的input标签可以用的验证类型ValidateType为：Int，Float，Email；
如果需要自定义错误提示信息：可以给标签添加ErrorMsg属性
表单验证要求验证属于该表单的HTML标签，给属于同一个表单的标签添加ValidateGroup属性，submit按钮也需要添加ValidateGroup，要求同一表单中的input标签和submit 按钮的ValidateGroup属性值相同
用法如下面的代码：
由于jquery1.4.4可以取得select标签的type属性为“select-one”，
但是jquery1.7.1版本获取不到select标签的type属性，所以可以给select添加type="select-one" 。
本文出自 “Zero's Blog” 博客，请务必保留此出处http://zerosoft.blog.51cto.com/679447/856748
Validate_Tools.js
function Validate_Text(obj) {
return $.trim(obj.value) != "";
}
function Validate_Select(obj) {
return $.trim(obj.value) != "";
}
function Validate_List(obj){
var flag = false;
$(obj).find("input").each(function(){
if(this.checked){
flag = true;
return false;
}
});
return flag;
}
function Validate_Expression(objValue, reg){
return $.trim(objValue) == "" ? false : new RegExp(reg).test(objValue);
}
function Validate_Obj(obj) {
var flag = false;
var errorMsg = "";
var objType = $(obj).attr("type");
var objTitle = $(obj).parent(0).prev().text().replace("：", "").replace(":", "");
try{
if(objType == "text" || objType == "textarea" || objType == "password"){
var validateType = $(obj).attr("ValidateType");
switch (validateType){
case "Int":
flag = Validate_Expression(obj.value, "^[0-9]*$");
if (!flag) {
if ($.trim(obj.value) == "") {
errorMsg = objTitle + "不能为空！";
}
else {
errorMsg = objTitle + "格式有误，请填写正确的格式！";
}
}
break;
case "Float":
flag = Validate_Expression(obj.value, "^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$");
if (!flag) {
if ($.trim(obj.value) == "") {
errorMsg = objTitle + "不能为空！";
}
else {
errorMsg = objTitle + "格式有误，请填写正确的格式！";
}
}
break;
case "Email":
flag = Validate_Expression(obj.value, "^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$");
if (!flag) {
if ($.trim(obj.value) == "") {
errorMsg = objTitle + "不能为空！";
}
else {
errorMsg = objTitle + "格式有误，请填写正确的邮件格式！";
}
}
break;
default:
var regularExpression = $(obj).attr("ValidateExpression");
if (regularExpression != undefined && regularExpression != "") {
flag = Validate_Expression(obj.value, regularExpression);
if (!flag) {
if ($.trim(obj.value) == "") {
errorMsg = objTitle + "不能为空！";
}
else {
errorMsg = objTitle + "格式有误！";
}
}
}
else {
flag = Validate_Text(obj);
if (!flag) {
errorMsg = objTitle + "不能为空！";
}
}
break;
}
}
else if(objType == "select-one"){
flag = Validate_Select(obj);
if (!flag) {
errorMsg = "请选择" + objTitle + "！";
}
}
else if(objType == "file"){
flag = Validate_Text(obj);
if (!flag) {
errorMsg = "请选择上传文件" + objTitle + "！";
}
}
else{
flag = Validate_List(obj);
if (!flag) {
errorMsg = "请选择" + objTitle + "！";
}
}
if(!flag){
if($(obj).attr("ErrorMsg") != undefined && $(obj).attr("ErrorMsg") != ""){
errorMsg = $(obj).attr("ErrorMsg");
}
alert(errorMsg);
try{
obj.focus();
}
catch(e){
}
return flag;
}
}
catch(e){
alert(e.description);
flag = false;
return flag;
}
return flag;
}
function Validate_Form(){
var flag = true;
try {
$("*[ValidateType]").each(function () {
flag = Validate_Obj(this);
if (!flag) {
return flag;
}
});
}
catch (e) {
alert(e.description);
flag = false;
}
return flag;
}
function Validate_Group(group) {
var flag = true;
try {
$("*[ValidateGroup]").each(function () {
if ($(this).attr("type") != "submit") {
if ($(this).attr("ValidateGroup") == group) {
flag = Validate_Obj(this);
if (!flag) {
return flag;
}
}
}
});
}
catch (e) {
alert(e.description);
flag = false;
}
return flag;
}
$(function () {
$("input[type='submit']").each(function () {
if ($(this).attr("ValidateGroup") != undefined && $(this).attr("ValidateGroup") != "") {
$(this).click(function () {
return Validate_Group($(this).attr("ValidateGroup"));
});
}
});
//添加必填提示
// $("*[ValidateType]").each(function () {
// if ($(this).attr("type") != "submit") {
// $(this).parent(0).append("<span style='color:red'>*</span>");
// }
// });
});对于对象type为text ，textarea，password的input标签可以用的验证类型ValidateType为：Int，Float，Email；
如果需要自定义错误提示信息：可以给标签添加ErrorMsg属性
表单验证要求验证属于该表单的HTML标签，给属于同一个表单的标签添加ValidateGroup属性，submit按钮也需要添加ValidateGroup，要求同一表单中的input标签和submit 按钮的ValidateGroup属性值相同
用法如下面的代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductQuotationEdit.aspx.cs" Inherits="Trade.Web.Product.ProductQuotationEdit" %>
<!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 runat="server">
<title>供应商报价</title>
<link href="../Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../Styles/AutoComplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="../Scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../Scripts/Validate/Validate_Tools.js"></script>
<script src="../Scripts/AutoComplete/jquery.autocomplete.min.js" type="text/javascript"></script>
<script type="text/javascript">
function returnValue() {
try {
parent.closeDiv();
}
catch (e) {
alert(e.message);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table class="table_edit">
<tr>
<th>
供应商:
</th>
<td>
<asp:TextBox ID="ID" runat="server" Visible="false"></asp:TextBox>
<asp:TextBox ID="ProductID" runat="server" Visible="false"></asp:TextBox>
</td>
<th>
报价日期:
</th>
<td>
<asp:TextBox ID="QuotationDate" runat="server" ValidateGroup="Supplier" ValidateType="Text"></asp:TextBox>
</td>
</tr>
<tr>
<th>
供应商货号:
</th>
<td>
<asp:TextBox ID="SupplierItemNo" runat="server" ValidateGroup="Supplier" ValidateType="Text"></asp:TextBox>
</td>
<th>
币种:
</th>
<td>
<asp:DropDownList ID="Currency" runat="server" ValidateGroup="Supplier" ValidateType="Text"></asp:DropDownList>
</td>
</tr>
<tr>
<th>
单价:
</th>
<td>
<asp:TextBox ID="Price" runat="server" ValidateGroup="Supplier" ValidateType="Float"></asp:TextBox>
</td>
<th>
起订量:
</th>
<td>
<asp:TextBox ID="MiniOrderQty" runat="server" ValidateGroup="Supplier" ValidateType="Int"></asp:TextBox>
</td>
</tr>
<tr>
<th>
是否开票:
</th>
<td>
<asp:DropDownList ID="IsBilling" runat="server" ValidateGroup="Supplier" ValidateType="Text">
<asp:ListItem Text="是" Value="1"></asp:ListItem>
<asp:ListItem Text="否" Value="0"></asp:ListItem>
</asp:DropDownList>
</td>
<th>
是否含税:
</th>
<td>
<asp:DropDownList ID="IsTax" runat="server" ValidateGroup="Supplier" ValidateType="Text">
<asp:ListItem Text="是" Value="1"></asp:ListItem>
<asp:ListItem Text="否" Value="0"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<th>
备注:
</th>
<td colspan="3">
<asp:TextBox ID="Remark" runat="server" TextMode="MultiLine"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSave" runat="server" Text="保 存" ValidateGroup="Supplier" OnClick="btnSave_Click" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>由于jquery1.4.4可以取得select标签的type属性为“select-one”，
但是jquery1.7.1版本获取不到select标签的type属性，所以可以给select添加type="select-one" 。
本文出自 “Zero's Blog” 博客，请务必保留此出处http://zerosoft.blog.51cto.com/679447/856748
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery表单验证插件EasyValidator简单易用!
- jquery 最简单易用的表单验证插件
- jquery表单验证插件——使用方式非常简单，明了
- JQuery表单验证插件EasyValidator,超级简单易用!
- jquery表单验证插件——使用方式非常简单，明了
- 简单的表单验证插件（Jquery）
- JQuery插件第十四个:简单验证表单
- jQuery表单验证插件 - 使用方式非常简单，明了
- jQuery form插件的使用--用 formData 参数校验表单，验证后提交（简单验证）.
- jquery 最简单易用的表单验证插件
- jquery validate强大的jquery表单验证插件
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
- jQuery表单验证插件jQueryValidationEngine使用
- jQuery表单验证插件——Validation
- jquery强大的表单验证插件
- 12、jQuery插件之Validform表单验证插件
- [乐意黎转载]从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
- jquery表单验证使用插件formValidator