jquery.validate.min.js 用法方法示例
页面html 代码
<!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>jquery.validate.min.js 用法方法示例</title>
<script type="text/javascript" src="/js1/jquery-1.4a2.min.js"></script>
<script src="../js1/base.js" type="text/javascript"></script>
<script src="../js1/validate/jquery.validate.min.js" type="text/javascript"></script>
<script src="../js1/validate/validatecode.js" type="text/javascript"></script>
<style type="text/css"> .span9{ width:245px; padding-right:10px; font-size:14px; color:#;line-height:33px; height:33px; display:inline-block; text-align:right;}
.span9 b{ font-weight:normal; font-size:12px; position:relative; top:3px; color:#f00; right:5px;}
.input1{ height:31px; width:230px; border:1px solid #DBDBDB; padding:;}
.input2{ width:340px;}
.span10{line-height:33px; height:33px; color:#A7A7A7; padding-left:10px;}
.div10 textarea{ padding:5px; width:330px; height:80px; resize:none;}
label.error
{
display: inline-block;
margin-left: 5px;
padding: 5px 5px 20px;
color: #F00;
font-size: 12px;
line-height: 12px;
background: url(../images1/validate_bg.gif) 3px no-repeat;
vertical-align: middle;
color: Red;
margin-top: 7px;
}
label.success
{
background: url(../images1/validate_bg.gif) -22px no-repeat;
vertical-align: middle;
margin-top: 7px;
}
.ipt_txt
{
width: 150px;
border: 1px solid #B1C3D9;
background-color: #FBFBFB;
}
input.error
{
background-color: #FBE2E2;
} </style>
</head>
<body>
<form id="cerform" runat="server">
<div>
<span class="span9"><b>*</b>用户真实姓名</span><input id="txtUserName" runat="server" class="input1 ipt_txt"
type="text" />
<span class="span10">请输入您的真实姓名</span></div>
<div class="clear height20">
</div>
<div>
<span class="span9"><b>*</b>身份证号码</span><input id="txtUserCardID" runat="server"
class="input1 input2 ipt_txt" type="text" /><span class="span10">请输入您的身份证号码</span></div>
<div class="clear height20">
</div>
<div>
<span class="span9"><b>*</b>认证说明</span><textarea id="txtAreaContent" runat="server"></textarea><span class="span10">请完善认证说明，成功认证后，将出现在您的认证说明介绍中</span></div>
<div class="clear height20">
</div>
<div>
<span class="span9"><b>*</b>联系邮箱</span><input id="txtEmail" class="input1 ipt_txt" type="text" runat="server"/><span
class="span10">请输入您的电子邮箱</span></div>
<div class="clear height20">
</div>
<div>
<span class="span9"><b>*</b>手机号码</span><input id="txtPhone" class="input1 ipt_txt" type="text" runat="server"/><span
class="span10">请输入能联系上您的手机号码</span></div>
<div class="clear height20">
</div>
<div>
<span class="span9"></span>
<input type="submit" class="button_a" value="提交认证" /></div>
</form>
</body>
</html>
下面 是核心js代码
//以下为自定义方法，validate方法中没有的 //判断两个值是否相等
jQuery.validator.addMethod("notEqualTo", function (value, element, param) {
return value != $(param).val();
}, $.validator.format("两次输入不能相同!")); //只能输入数字
jQuery.validator.addMethod("isNum", function (value, element) {
var RegExp = /^\d+$/;
return RegExp.test(value);
}, $.validator.format("只能为数字!")); //规则名：buga,value检测对像的值
$.validator.addMethod("buga", function (value) {
return value == "buga";
}, 'Please enter "buga"!'); //规则名：chinese，value检测对像的值，element检测的对像
$.validator.addMethod("chinese", function (value, element) {
var chinese = /^[\u4e00-\u9fa5]+$/;
return (chinese.test(value)) || this.optional(element);
}, "只能输入中文"); //规则名：byteRangeLength，value检测对像的值，element检测的对像,param参数
jQuery.validator.addMethod("byteRangeLength", function (value, element, param) {
var length = value.length;
for (var i = ; i < value.length; i++) {
if (value.charCodeAt(i) > ) {
length++;
}
}
return this.optional(element) || (length >= param[] && length <= param[]);
}, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)")); // 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone", function (value, element) {
var length = value.length;
var mobile = /^((([-]{})|([-]{}))+\d{})$/;
var tel = /^\d{,}-?\d{,}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value)); }, "请正确填写您的联系电话"); // 邮政编码验证
jQuery.validator.addMethod("isZipCode", function (value, element) {
var tel = /^[-]{}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码"); // 字符验证
jQuery.validator.addMethod("string", function (value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "不允许包含特殊符号!"); // 必须以特定字符串开头验证
jQuery.validator.addMethod("begin", function (value, element, param) {
var begin = new RegExp("^" + param);
return this.optional(element) || (begin.test(value));
}, $.validator.format("必须以 {0} 开头!")); // 验证两次输入值是否不相同
jQuery.validator.addMethod("notEqualTo", function (value, element, param) {
return value != $(param).val();
}, $.validator.format("两次输入不能相同!")); // 验证值不允许与特定值等于
jQuery.validator.addMethod("notEqual", function (value, element, param) {
return value != param;
}, $.validator.format("输入值不允许为{0}!")); // 验证值必须大于特定值(不能等于)
jQuery.validator.addMethod("gt", function (value, element, param) {
return value > param;
}, $.validator.format("输入值必须大于{0}!")); // 验证值小数位数不能超过两位
jQuery.validator.addMethod("decimal", function (value, element) {
var decimal = /^-?\d+(\.\d{,})?$/;
return this.optional(element) || (decimal.test(value));
}, $.validator.format("小数位数不能超过两位!")); //字母数字
jQuery.validator.addMethod("alnum", function (value, element) {
return this.optional(element) || /^[a-zA-Z0-]+$/.test(value);
}, "只能包括英文字母和数字"); // 汉字
jQuery.validator.addMethod("chcharacter", function (value, element) {
var tel = /^[\u4e00-\u9fa5]+$/;
return this.optional(element) || (tel.test(value));
}, "请输入汉字"); // 身份证号码验证（加强验证）
jQuery.validator.addMethod("isIdCardNo", function (value, element) {
return this.optional(element) || /^[-]\d{}((\d)|([-]))(([||]\d)|[-])\d{}$/.test(value) || /^[-]\d{}[-]\d{}((\d)|([-]))(([||]\d)|[-])((\d{})|\d{}[A-Z])$/.test(value);
}, "请正确输入您的身份证号码"); // 手机号码验证
jQuery.validator.addMethod("isMobile", function (value, element) {
var length = value.length;
var mobile = /^((([-]{})|([-]{}))+\d{})$/;
return this.optional(element) || (length == && mobile.test(value));
}, "请正确填写您的手机号码"); // 电话号码验证
jQuery.validator.addMethod("isTel", function (value, element) {
var tel = /^\d{,}-?\d{,}$/; //电话号码格式010-12345678
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码"); //页面加载时调用
$(function () {
$('#cerform').validate({
rules: {
txtUserName: {
required: true,
maxlength: ,
minlength:
},
txtUserCardID: {
required: true,
maxlength: ,
minlength: ,
isIdCardNo: "#txtUserCardID"
},
txtUserPwd: {
required: true,
maxlength: ,
minlength: ,
notEqualTo: "#txtUserPwd"
},
txtRUserPwd: {
required: true,
equalTo: "#txtUserPwd"
},
txtAddress: {
required: true,
maxlength:
},
txtAreaContent: {
required: true,
maxlength:
},
txtUrl: {
required: true,
url: true
},
txtPhone: {
required: true,
minlength: ,
maxlength: ,
isTell: true,
isMobile: "#txtPhone"
},
txtZipCode: {
required: true,
minlength: ,
maxlength: ,
isNum: true
},
txtEmail: {
required: true,
email: true,
maxlength:
}
},
messages: {
txtUserName: {
required: "用户名不能为空！",
maxlength: "最长为18个字符！",
minlength: "最短为4个字符！",
remote: "该用户名已被占用！"
},
txtUserCardID: {
required: "身份证不能为空！",
maxlength: "身份证为18个字符！",
minlength: "身份证为18个字符！"
},
txtUserPwd: {
required: "密码不能为空！",
maxlength: "最长为18个字符！",
minlength: "最短为6个字符！",
notEqualTo: "用户名和密码不能相同！"
},
txtRUserPwd: {
required: "密码不能为空！",
equalTo: "两次输入密码不相同！"
},
txtAddress: {
required: "地址不能为空！",
maxlength: "最长50个字符！"
},
txtAreaContent: {
required: "不能为空！",
maxlength: "最长300个字符！"
},
txtUrl: {
required: "网址不能为空！",
url: "请填写正确的网址！"
},
txtPhone: {
required: "电话不能为空！",
minlength: "最少7个数字！",
maxlength: "最长13个数字！",
isTell: "电话格式不正确！"
},
txtZipCode: {
required: "邮编不能为空！",
minlength: "邮编为6个数字！",
maxlength: "邮编为6个数字！",
isNum: "请输入数字！"
},
txtEmail: {
required: "邮箱不能为空！",
email: "邮箱格式不正确！",
maxlength: "最长40个字符！"
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent());
},
submitHandler: function (form) {
form.submit();
},
errorClass: "error",
focusCleanup: true, //被验证的元素获得焦点时移除错误信息
success: function (label) {
label.html("<span style=\"color:green\">填写正确！</span>").addClass("success");
}
}); //所有使用“.ipt_txt”样式的文本框加上效果，获得焦点文本框变成淡黄色
$(".ipt_txt").focus(function () {
$(this).css("background-color", "#FFFFCC").blur(function () {
$(this).css("background-color", "#FBFBFB");
});
});
});
以上是jquery.validate.min.js 所有方法示例
jquery.validate.min.js 用法方法示例的更多相关文章
- jQuery Validate验证框架详解(jquery.validate.min.js)
原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...
- Uncaught TypeError: Cannot read property 'call' of undefined jquery.validate.min.js:28
最近在做表单验证时,,自己写的addMethod 方法总是不起作用.折腾了将近一天. 报告的错误,如下面的 Uncaught TypeError: Cannot read property 'call ...
- jquery.validate.unobtrusive.js插件作用
在 ASP.NET MVC 中启用 Unobtrusive JavaScript 功能,可以在运行时由服务器端根据Model中设置的验证规则,自动生成客户端验证js代码(结合jquery.valida ...
- jQuery Validate自定义各种验证方法（转）
一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...
- MVC4 AspNet MVC下的Ajax / 使用微软提供的Ajax请求脚本 [jquery.unobtrusive-ajax.min.js]
源码参考:链接:http://pan.baidu.com/s/1pKhHHMj 密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...
- jquery.nicescroll.min.js滚动条使用方法
jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件.支持div,iframe,html等使用,兼容IE7-8,safari,firefo ...
- jquery.nicescroll.min.js滚动条插件的用法
1.jquery.nicescroll.min.js源码 /* jquery.nicescroll 3.6.8 InuYaksa*2015 MIT http://nicescroll.areaaper ...
- jquery.autocomplete.js用法及示例，小白进
8 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 ...
- jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式（jquery.validate.unobtrusive.js）
最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...
随机推荐
- iOS自定义字体
1.下载字体库,如:DINCond-Bold.otf 2.双击,在mac上安装 3.把下载的字体库拖入工程中: 4.配置info.plist文件 5.xib方式设置自定义字体:Font选Custom, ...
- ReactiveCocoa基础知识内容2
引用网络上一些实例的代码,针对ReactiveCocoa的运用可以更加有帮助: 1:跟AF结合时的写法,返回RACSignal - (RACSignal *)fetchQuestionWithTag: ...
- 【代码笔记】iOS-判断字符串是否为空
一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...
- 【原】ios打包ipa的四种实用方法(.app转.ipa)
总结一下,目前.app包转为.ipa包的方法有以下几种: 1.Apple推荐的方式,即实用xcode的archive功能 Xcode菜单栏->Product->Archive->三选 ...
- 【Windows 10 IoT - 1】Window 10系统安装（树莓派 Pi2）
一.硬件准备 (1).树莓派Pi2 (2).8G 10速Micro SD卡 (3).LCD显示器(如果是VGA接口,需要加一个HDMI转VGA模块) (4).鼠标 (5).安装Windows 10的P ...
- Java Security：公钥私钥、数字签名、消息摘要是什么
1. 鲍勃有两把钥匙,一把是公钥,另一把是私钥. 2. 鲍勃把公钥送给他的朋友们----帕蒂.道格.苏珊----每人一把. 3. 苏珊要给鲍勃写一封保密的信.她写完后用鲍勃的公钥加密,就可以达到保密的 ...
- Mysql查询阻塞初探
第一次值班,报警打电话给我说,数据库复制延时一个多小时,那个时候是半夜啊,但我还是很清醒的起来,开机.vpn.登录.show processlist,结果发现情况是这样的: 红线框表示的是当前每个线程 ...
- Sql Server之旅——第六站 使用winHex利器加深理解数据页
这篇我来介绍一个winhex利器,这个工具网上有介绍,用途大着呢,可以用来玩数据修复,恢复删除文件等等....它能够将一个file解析成 hex形式,这样你就可以对hex进行修改,然后你就可以看到修复 ...
- FTP定时批量下载文件（SHELL脚本及使用方法 ）
1. 脚本实例 将以下脚本保存为 getftp.sh #!/bin/bash datesign=`date -d -95day +%Y%m%d` ftp -nv 12.2.2.28 << ...
- ELF Format 笔记（五）—— 特殊 Section
ilocker:关注 Android 安全(新入行,0基础) QQ: 2597294287 链接器把一些独立的 object files 和库文件链接起来,形成可执行文件.在这个过程中,链接器需要解决 ...