页面通过给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;
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;
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="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
{
80px;
}
.mustInput
{
200px;
background-color:#FFFFE6;
}
.mustDrp
{
205px;
background-color:#FFFFE6;
}
.mustChk input
{
background-color:#FFFFE6;
}
.choose
{
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}-))?((0d{2,3})|0d{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;
}