validate 表单验证
转自博客园:http://www.cnblogs.com/easyinsc/archive/2009/02/27/1407826.html
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期 日期校验ie6出错,慎用
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
1/**//**
* @author ming
*/ 4$(document).ready(function(){ 6/**//* 设置默认属性 */ 7$.validator.setDefaults({
submitHandler: function(form) {
form.submit();
} 11}); 13// 字符验证 14jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value); 16}, "只能包括中文字、英文字母、数字和下划线"); 18// 中文字两个字节 19jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for(var i = 0; i < value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] ); 27}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)"); 29// 身份证号码验证 30jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || isIdCardNo(value); 32}, "请正确输入您的身份证号码"); 34// 手机号码验证 35jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
return this.optional(element) || (length == 11 && mobile.test(value)); 39}, "请正确填写您的手机号码"); 41// 电话号码验证 42jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678
return this.optional(element) || (tel.test(value)); 45}, "请正确填写您的电话号码"); 47// 联系电话(手机/电话皆可)验证 48jQuery.validator.addMethod("isPhone", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value)); 54}, "请正确填写您的联系电话"); 56// 邮政编码验证 57jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value)); 60}, "请正确填写您的邮政编码"); 62//开始验证 63$('#submitForm').validate({
/**//* 设置验证规则 */
rules: {
username: {
required:true,
stringCheck:true,
byteRangeLength:[3,15]
},
email:{
required:true,
email:true
},
phone:{
required:true,
isPhone:true
},
address:{
required:true,
stringCheck:true,
byteRangeLength:[3,100]
}
}, /**//* 设置错误信息 */
messages: {
username: {
required: "请填写用户名",
stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
},
email:{
required: "请输入一个Email地址",
email: "请输入一个有效的Email地址"
},
phone:{
required: "请输入您的联系电话",
isPhone: "请输入一个有效的联系电话"
},
address:{
required: "请输入您的联系地址",
stringCheck: "请正确输入您的联系地址",
byteRangeLength: "请详实您的联系地址以便于我们联系您"
}
}, /**//* 设置验证触发事件 */
focusInvalid: false,
onkeyup: false, /**//* 设置错误信息提示DOM */
errorPlacement: function(error, element) {
error.appendTo( element.parent());
}, 117}); 119});
测试页面
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2"http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>jQuery验证</title>
<script src="lib/jquery/jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></script>
<script type="text/javascript" src="lib/jquery/messages_cn.js"></script>
<script type="text/javascript" src="lib/jquery/formValidatorClass.js"></script>
<style type="text/css"> * {}{
font-family: Verdana;
font-size: 96%;
}
label {}{
width: 10em;
float: left;
}
label.error {}{
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
p {}{
clear: both;
}
.submit {}{
margin-left: 12em;
}
em {}{
font-weight: bold;
padding-right: 1em;
vertical-align: top;
} 39</style>
</head>
<body>
<form class="submitForm" id="submitForm" method="get" action="">
<fieldset>
<legend>表单验证</legend>
<p>
<label for="username">用户名</label>
<em>*</em><input id="userName" name="username" size="25" />
</p>
<p>
<label for="email">E-Mail</label>
<em>*</em><input id="email" name="email" size="25" />
</p>
<p>
<label for="phone">联系电话</label>
<em>*</em><input id="phone" name="phone" size="25" value="" />
</p>
<p>
<label for="address">地址</label>
<em>*</em><input id="address" name="address" size="22">
</p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body></html>
validate 表单验证的更多相关文章
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- 【干货】Laravel --Validate (表单验证) 使用实例
前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
- summernote富文本编辑器配合validate表单验证无法进行表单提交的问题
1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...
- thinkphp图片上传+validate表单验证+图片木马检测+缩略图生成
目录 1.案例 1.1图片上传 1.2进行图片木马检测 1.3缩略图生成 1.4控制器中调用缩略图生成方法 1.案例 前言:在thinkphp框架的Thinkphp/Library/Thin ...
- validate表单验证-单独验证
今天编写一个表单验证程序,我来说一下今天遇到的坑:程序不是通过submit按钮提交验证的,是在自己写的一个方法中提交的,出现了表单无法验证的情况.然后我就了解了一下jquery validate的验证 ...
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
随机推荐
- mysql允许远程IP访问
默认情况下Linux内的mysql数据库mysql,user表内的用户权限只是对localhost即本机才能登陆.需要更改权限: mysql> Grant all privileges on * ...
- iOS中UITextView键盘回收
iOS开发中,发现UITextView没有像UITextField中textFieldShouldReturn:这样的方法,那么要实现UITextView关闭键盘,就必须使用其他的方法,下面是可以使用 ...
- How to set custom JsonSerializerSettings for Json.NET in MVC 4 Web API?
ou can customize the JsonSerializerSettings by using theFormatters.JsonFormatter.SerializerSettings ...
- Swift 设置navigation左右两侧按钮
我们以设置右侧按钮为例,左侧方法类似 方法一,直接自定义文字 let item=UIBarButtonItem(title: "分享", style: UIBarButtonIte ...
- poj 1064 Cable master ,二分 精度!!!
给出n根绳子,求把它们分割成K条等长的绳子的最大长度是多少? 二分 用 for(int i=0; i<100; ++i) 取代 while(r-l>eps) 循环100次精度能达到1e ...
- Mvc里删除Cooki
/// <summary> /// 删除Cookie /// </summary> /// <param name="skuID">从购物车选择 ...
- w3school教程整理
原文链接:http://www.flygon.net/w3school 原文链接:https://github.com/wizardforcel/w3school w3school教程整理 离线版大部 ...
- sql server存储过程分页
Create PROCEDURE [dbo].[Table_GetList] ) = '', -- 查询条件(注意: 不要加 WHERE) ) = '', -- 设置排序 , -- 页尺寸 , -- ...
- org.springframework.transaction.CannotCreateTransactionException: Could not open Hibernate Session
出错原因很简单:数据库服务没开,自然就打不开Session了.
- php汉字截取
/** * 截取HTML,并自动补全闭合 * @param $html * @param $length * @param $end */ function subHtml($html,$length ...