通用jquery页面验证
页面通过给input 标签设置样式或者属性，即可实现所有页面的验证，customValidate方法并支持自己补充验证!
验证包括：必输项，只能输入数字， 输入数字并设定小数最大位数，下拉框必选，复选框必选，电话格式，手机格式，电话或手机，邮箱格式，邮编格式等验证！
页面的html 代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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="css/validate.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.centertable
{
border: 1px solid #D0D0D0;
border-collapse: collapse;
font-size: 14px;
width: 100%;
table-layout: word-wrap:break-word;
word-break: break-all;
} .centertable th
{
border-collapse: collapse; /*border:solid 1px #0058a3;*/
border: solid 1px #D0D0D0;
text-align:right;
height:30px;
font-weight:normal;
} .centertable td
{
border-collapse: collapse; /*border:solid 1px #0058a3;*/
border: solid 1px #D0D0D0;
text-align:left;
width:70%;
height:30px;
}
</style> <script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/Validate.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div style="width:700px; margin:0 auto;">
<!-- 只能输入数字和小数点-->
<div style="text-align:center;">常用的js验证总结</div>
<table cellpadding="0" cellspacing="0" class="centertable">
<tr>
<th>
<!-- 只能输入数字-->
只能输入数字:</th>
<td>
<asp:TextBox ID="txtCount" runat="server" onkeyup="this.value=this.value.replace(/\D/g,'')"
onblur="this.value=this.value.replace(/\D/g,'')" CssClass="mustInput" ToolTip="产品名称"></asp:TextBox>
</td>
</tr>
<tr>
<th>
输入数字并指定小数点最大位数:</th>
<td>
<asp:TextBox ID="txtNumberAndPoint" runat="server" onkeyup="checkNumberPointByUp(this,2);" onblur="checkNumberPointByBlur(this,2);" CssClass="mustInput" ToolTip="价格"></asp:TextBox>
</td>
</tr> <tr>
<th>
公司类型:</th>
<td>
<asp:DropDownList ID="drpCompany" runat="server" CssClass="mustDrp" ToolTip="公司类型">
<asp:ListItem Value="-1">请选择</asp:ListItem>
<asp:ListItem Value="0">国企</asp:ListItem>
<asp:ListItem Value="1">事业单位</asp:ListItem>
</asp:DropDownList>
</td>
</tr> <tr>
<th>
公司产品:</th>
<td>
<asp:CheckBoxList ID="chkProducts" runat="server" CssClass="mustChk" ToolTip="公司产品"
RepeatDirection="Horizontal" RepeatLayout="Flow">
<asp:ListItem>电脑</asp:ListItem>
<asp:ListItem>手机</asp:ListItem>
<asp:ListItem>Pad</asp:ListItem>
<asp:ListItem>手表</asp:ListItem>
</asp:CheckBoxList>
</td>
</tr> <tr>
<th>
公司:</th>
<td>
<asp:TextBox ID="txtNumberAndPoint0" runat="server" onkeyup="checkNumberPointByUp(this,2);"
onblur="checkNumberPointByBlur(this,2);" CssClass="choose" ToolTip="价格"></asp:TextBox>
</td>
</tr> <tr>
<th>
电话:</th>
<td>
<asp:TextBox ID="txtPhone" runat="server" validateType="phone"></asp:TextBox>
</td>
</tr> <tr>
<th>
手机:</th>
<td>
<asp:TextBox ID="txtMobile" runat="server" validateType="mobile"></asp:TextBox>
</td>
</tr> <tr>
<th>
电话/手机:</th>
<td>
<asp:TextBox ID="TextBox1" runat="server" validateType="phoneormobile"></asp:TextBox>
</td>
</tr> <tr>
<th>
邮箱:</th>
<td>
<asp:TextBox ID="txtEmail" runat="server" validateType="email"></asp:TextBox>
</td>
</tr> <tr>
<th>
邮编:</th>
<td>
<asp:TextBox ID="txtZipCode" runat="server" MaxLength="6" validateType="zipcode"></asp:TextBox>
</td>
</tr> <tr>
<td colspan="2" style="text-align:center">
<asp:Button ID="Button1" runat="server" Text="验证" CssClass="submitInput" ValidateIsEnough="false"/>
</td>
</tr>
</table>
<br />
</div>
</form>
</body>
</html>
css 样式:
.submitInput
{
width:80px;
} .mustInput
{
width:200px;
background-color:#FFFFE6;
} .mustDrp
{
width:205px;
background-color:#FFFFE6;
} .mustChk input
{
background-color:#FFFFE6;
} .choose
{
width:200px;
background: url(../images/icon1.gif) no-repeat scroll right center #FFFFFF;
border: 1px solid #999999;
height: 20px;
cursor:pointer;
}
通用的js验证代码:
/*
网页上文本框输入的验证
版权所有者:陈家涛
*/
$(document).ready(function() {
$(".submitInput").bind("click", function() {
var flag = true;
var ValidateIsEnough = true;
if (null != $(this).attr("ValidateIsEnough") && $(this).attr("ValidateIsEnough") == "false") {
ValidateIsEnough = false;
} /*验证所有文本框 */
$("input[type=text]").each(function() {
if ($(this).hasClass("mustInput") && $.trim($(this).val()) == "") {
/*所有非空验证 */
alert($(this).attr("title") + "不能为空!");
flag = false;
return false;
} if (null != $(this).attr("validateType") && $(this).val() != "") {
/*是否有类型验证 */
if (!validateType($(this))) {
flag = false;
return false;
}
}
}); /*验证所有下拉框框 */
if (flag) {
$("select").each(function() {
if (null == $(this).val() || $(this).val() == "-1") {
alert("请选择" + $(this).attr("title") + "!");
flag = false;
return false;
}
});
} /*验证所有复选框 */
if (flag) {
var chkFlag = true;
$(".mustChk").each(function() {
if ($(this).children(0).attr("checked")) {
chkFlag = false;
return false;
}
if (chkFlag) {
alert("请选择" + $(this).attr("title"));
flag = false;
return false;
}
});
} ValidateIsEnough = customValidate();
if (flag && ValidateIsEnough) {
return true;
}
else {
return false;
}
});
}); function validateType(obj) {
var flag = false;
var type = $(obj).attr("validateType");
var str = $.trim($(obj).val());
switch (type) {
case "phone":
if (!IsPhone(str)) {
alert("电话格式不正确!");
return false;
}
break;
case "email":
if (!IsEmail(str)) {
alert("Email格式不正确!");
return false;
}
break;
case "mobile":
if (!IsMobile(str)) {
alert("手机格式不正确!");
return false;
}
break;
case "zipcode":
if (!IsPhone(str)) {
alert("邮编格式不正确!");
return false;
}
case "phoneormobile":
if (!IsPhone(str) && (!IsMobile(str))) {
alert("电话格式不正确!");
return false;
}
break;
default:
break;
}
return true;
} //是否是邮箱
function IsEmail(str) {
if (str.length != 0) {
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if (reg.test(str)) {
return true;
}
}
return false;
} //是否是邮编
function IsZIP(str) {
if (str.length != 0) {
reg = /^\d{6}$/;
if (reg.test(str)) {
return true;
}
}
return false;
} //是否是中文
function IsChinese(str) {
if (str.length != 0) {
reg = /^[\u0391-\uFFE5]+$/;
if (reg.test(str)) {
return true;
}
}
return false;
} //是否是手机
function IsMobile(str) {
if (str.length != 0) {
reg = /^1[3-8][0-9]{9}$/;
if (reg.test(str)) {
return true;
}
}
return false;
} //是否是电话
function IsPhone(str) {
if (str.length != 0) {
reg = /^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/;
if (reg.test(str)) {
return true;
}
}
return false;
} ///自定义验证
function customValidate() {
return true;
} /*
验证只能输入数字，并可指定小数点的最大位数
*/
function checkNumberPointByUp(obj, size) {
var result = $.trim(obj.value);
if ("" != result) {
var last = result.substring(result.length - 1);
if (result == last) {
//代表只有1位不可以是0或者是小数点
if (last == ".") {
result = "";
}
else {
if (!(/\d/i.test(result))) {
result = "";
}
}
}
else {
var flag = true;
if (size > 0) {
//有小数点位数控制
var index = result.indexOf('.');
if (index > 0) {
//代表有小数点
var behindPoint = result.substring(index + 1);
if (behindPoint.length > size) {
result = result.substring(0, result.length - 1);
flag = false;
}
}
}
if (flag) {
//需要取验证
var reg = /^[0-9.]$/;
var r = last.match(reg);
if (r == null)
result = result.substring(0, result.length - 1);
} if (result.length == 2) {
if (result.substring(0, 1) == "0" && result.substring(1, 2) != ".") {
//首位是0第二位不是小数点需要清空
result = "";
}
}
}
}
obj.value = result;
} function checkNumberPointByBlur(obj, size) {
var result = $.trim(obj.value);
var flag = true;
if (result.indexOf('.') > -1) {
//代表有小数点
if (size > 0) {
//代表有小数位数限制
if (result.substring(result.indexOf('.') + 1).length > size) {
flag = false;
result = "";
}
}
} if (flag) {
for (var i = 0; i < result.length; i++) {
if (result.substr(0,1)!= ".") {
if (!(/\d/i.test(result.substr(0, 1)))) {
result = "";
break;
}
}
}
}
obj.value = result;
}
通用jquery页面验证的更多相关文章
- 弹出框页面中使用jquery.validate验证控件
弹出框页面中使用jquery.validate验证控件有几个问题需要解决: 1,弹出框的提交事件完成后如何关闭弹出框页面? 2,提交不成功如何返回当前页? 3,如果知道验证事件成功? 之前笔者都是JS ...
- ASP.NET MVC的客户端验证：jQuery的验证
之前我们一直讨论的Model验证仅限于服务端验证,即在Web服务器根据相应的规则对请求数据实施验证.如果我们能够在客户端(浏览器)对用户输入的数据先进行验证,这样会减少针对服务器请求的频率,从而缓解W ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- ASP.NET MVC验证 - jQuery异步验证
本文主要体验通过jQuery异步验证. 在很多的教材和案例中,MVC验证都是通过提交表单进行的.通过提交表单,可以很容易获得验证出错信息.因为,无论是客户端验证还是服务端验证,总能找到与Model属性 ...
- 使用Uploadify 时，同时使用了jQuery.Validition 验证控件时，在IE11上出现JS缺少对象错误。
场景: 使用jQuery.1.8.2 使用 Uploadify 3.2上传控件 使用jQuery.Validition 1.9 验证 使用IE 11 时,当鼠标点击上传按钮时,会出现JS 缺少对象错误 ...
- 【转】jQuery Validate验证框架详解
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...
- jQuery Validate验证框架详解(jquery.validate.min.js)
原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...
- 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
- 简单的jQuery前端验证码校验
简单的jQuery前端验证码校验2 html; <!DOCTYPE html> <html lang="zh-cn"> <head> <m ...
随机推荐
- Sphinx初探之安装
在Centos or redhat 安装Sphinx .首先安装依赖包 $ yum install postgresql-libs unixODBC .安装软件 $ rpm -Uhv sphinx-- ...
- oracle海量数据中提升创建索引的速度
基本信息情况: 数据库版本:Oracle Database 11g Enterprise Edition Release 11.2.0.1.0 - 64bit Production 操作系统版本:Ce ...
- [译]NeHe教程 - 添加颜色
原文: Adding Colour 上一节我讲解了如何在屏幕显示三角形和四边形.本节会讲解如何上色.单色(Flat)顾名思义就是只能涂一种实心的颜色.平滑颜色(Smooth)可以在各个顶点混合三种颜色 ...
- Hadoop自带Sort例子分析
/** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agree ...
- openWRT自学计划安排
目标:充分理解openwrt的框架构成,能够在openwrt框架下实现:开发新程序,修改现有程序,修改内核,修改boot.为此,制定如下计划: 一.如何在openwrt上做开发 1.编译出一个BRCM ...
- linux centos apache开启gzip的方法
开启gzip压缩的方法很简单,连接服务器并打开配置文件“httpd.conf”,找到下面这两句,去掉前面的“#” 代码如下 1 LoadModule deflate_module modules/m ...
- 在mac上独立安装PHP环境
1.http://dditblog.com/blog_418.html 2.http://www.jianshu.com/p/0456dd3cc78b
- C语言基础知识【存储类】
C 存储类1.存储类定义 C 程序中变量/函数的范围(可见性)和生命周期.这些说明符放置在它们所修饰的类型之前autoregisterstaticextern2.auto 只能用在函数内,即 auto ...
- JSP具体篇——application
application对象 application对象用于保存全部应用程序中的共同拥有数据.它在server启动时自己主动创建.在server停止时自己主动销毁. 当application对象没有被销 ...
- Asp.Net MVC3中如何进行单元测试？
下面我们就以一个示例演示一下如何进行单元测试? public Model.UserInfo UpdateEntity(Model.UserInfo entity) { db.UserInfo.Atta ...