通用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 ...
随机推荐
- iOS tableView高度缓存
tableView计算完高度后,把高度缓存起来,避免下次重复计算,以减少不必要的消耗 // declare cellHeightsDictionary NSMutableDictionary *cel ...
- HDFS源码分析之FSImage文件内容（一）总体格式
FSImage文件是HDFS中名字节点NameNode上文件/目录元数据在特定某一时刻的持久化存储文件.它的作用不言而喻,在HA出现之前,NameNode因为各种原因宕机后,若要恢复或在其他机器上重启 ...
- k8s集群容器监控
硬件环境: 两台虚拟机, 10.10.20.203 部署docker.etcd.flannel.kube-apiserver.kube-controller-manager.kube-schedule ...
- 【转】利用Python中的mock库对Python代码进行模拟测试
出处 https://www.toptal.com/python/an-introduction-to-mocking-in-python http://www.oschina.net/transla ...
- 一篇很不错的关于WPF DataGrid的文章，包含validation
https://www.codeproject.com/Articles/30905/WPF-DataGrid-Practical-Examples
- IP地址、子网掩码、网关的关系
网络管理中的IP地址.子网掩码和网关是每个网管必须要掌握的基础知识,只有掌握它,才能够真正理解TCP/IP协议的设置.以下我们就来深入浅出地讲解什么是子网掩码. IP地址的结构 要想理解什么是子网掩码 ...
- Laravel开发：Laravel框架门面Facade源码分析
前言 这篇文章我们开始讲 laravel 框架中的门面 Facade,什么是门面呢?官方文档: Facades(读音:/fəˈsäd/ )为应用程序的服务容器中可用的类提供了一个「静态」接口.Lara ...
- bzoj1185【HNOI2007】最小矩形覆盖
1185: [HNOI2007]最小矩形覆盖 Time Limit: 10 Sec Memory Limit: 162 MBSec Special Judge Submit: 1114 Solv ...
- Django模板系统(非常详细)（后台数据如何展示在前台）
前面的章节我们看到如何在视图中返回HTML,但是HTML是硬编码在Python代码中的这会导致几个问题:1,显然,任何页面的改动会牵扯到Python代码的改动网站的设计改动会比Python代码改动更频 ...
- SQLServer2008 统计表占用空间
1.查看一张表占用的空间大小 EXEC sp_spaceused '表' 1.查看一个数据库中所有表占用空间大小 EXEC sp_MSforeachtable 'sp_spaceused " ...