通用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 ...
随机推荐
- Android studio 百度地图开发（3）地图导航
Android studio 百度地图开发(3)地图导航 email:chentravelling@163.com 开发环境:win7 64位,Android Studio,请注意是Android S ...
- Weka学习之认识weka（一）
Weka 简介 WEKA作为一个公开的数据挖掘工作平台,集合了大量能承担数据挖掘任务的机器学习算法,包括对数据进行预处理,分类,回归.聚类.关联规则以及在新的交互式界面上的可视化. Weka是基 ...
- 在eclipse创建和myeclipse一样结构的web项目
之前一直使用myeclipse,现在换成eclipse,但是创建的新项目让我很不习惯,下面这个方法可以解决. 创建好的项目结构如下图所示,不过看着还是很别扭,我们window→show view→ot ...
- SQL-SQL基础
SQL(Structured Query Language)是通用的数据库查询语言,各个数据库厂商均对SQL-92标准做了支持,同一时候各家又再次基础上做了相应扩展,比如oracle的PL/SLQ. ...
- 程序猿学英语—In August the English learning summary
时间真快,总结的7月份英语学习总结刚刚结束,转眼间又该对8月份的英语学习进行小节了. 进入8月初.下发了一个文档,用一个星期的时间学音标.纠音. 在王美的带领下我组也发起了纠音运动. 刚开 始纠音的时 ...
- - WebStorm 转载【干货技术贴】之-mac下如何安装WebStorm + 破解
写在前面 之前公司不忙的时候,用闲暇功夫想学习React-Native 苦于找不到一款好的代码编辑器,在广泛搜索以后,发现最适合的就是网页代码编辑器WebStrom,所以就尝试安装和破解,下面我将自己 ...
- 模型层TP框架数据库的操作
在shop入口的文件下的HOME文件夹中使用模型层 第一步修改配置模块把数据库的各种链接做好,打开HOME中的conf文件夹中的config.php,找到Thinkphp文件加下的conf文件打开co ...
- 使用PLSQL客户端导入导出数据库
本文主要介绍如何使用SQL Developer工具来实现备份数据库.数据导出等操作,然后实现Oracle对象导入数据等操作 1 导出数据库对象 在PL/SQL Developer的菜单Tools=&g ...
- 九度OJ 1002：Grading
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:18410 解决:4753 题目描述: Grading hundreds of thousands of Graduate Entrance ...
- vue项目目录
项目目录说明 . |-- config // 项目开发环境配置 | |-- index.js // 项目 ...