[原创]jQuery Validation范例
上班无事，学习jQuery Validation，于是手写一公共范例，并收藏以便后用
验证操作类formValidatorClass.js
1/**//**
2 * @author ming
3 */
4$(document).ready(function(){
5
6/**//* 设置默认属性 */
7$.validator.setDefaults({
8 submitHandler: function(form) {
9 form.submit();
10 }
11});
12
13// 字符验证
14jQuery.validator.addMethod("stringCheck", function(value, element) {
15 return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
16}, "只能包括中文字、英文字母、数字和下划线");
17
18// 中文字两个字节
19jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
20 var length = value.length;
21 for(var i = ; i < value.length; i++){
22 if(value.charCodeAt(i) > ){
23 length++;
24 }
25 }
26 return this.optional(element) || ( length >= param[] && length <= param[] );
27}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
28
29// 身份证号码验证
30jQuery.validator.addMethod("isIdCardNo", function(value, element) {
31 return this.optional(element) || isIdCardNo(value);
32}, "请正确输入您的身份证号码");
33
34// 手机号码验证
35jQuery.validator.addMethod("isMobile", function(value, element) {
36 var length = value.length;
37 var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
38 return this.optional(element) || (length == && mobile.test(value));
39}, "请正确填写您的手机号码");
40
41// 电话号码验证
42jQuery.validator.addMethod("isTel", function(value, element) {
43 var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678
44 return this.optional(element) || (tel.test(value));
45}, "请正确填写您的电话号码");
46
47// 联系电话(手机/电话皆可)验证
48jQuery.validator.addMethod("isPhone", function(value,element) {
49 var length = value.length;
50 var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
51 var tel = /^\d{3,4}-?\d{7,9}$/;
52 return this.optional(element) || (tel.test(value) || mobile.test(value));
53
54}, "请正确填写您的联系电话");
55
56// 邮政编码验证
57jQuery.validator.addMethod("isZipCode", function(value, element) {
58 var tel = /^[0-9]{6}$/;
59 return this.optional(element) || (tel.test(value));
60}, "请正确填写您的邮政编码");
61
62//开始验证
63$('#submitForm').validate({
64 /**//* 设置验证规则 */
65 rules: {
66 username: {
67 required:true,
68 stringCheck:true,
69 byteRangeLength:[,]
70 },
71 email:{
72 required:true,
73 email:true
74 },
75 phone:{
76 required:true,
77 isPhone:true
78 },
79 address:{
80 required:true,
81 stringCheck:true,
82 byteRangeLength:[,]
83 }
84 },
85
86 /**//* 设置错误信息 */
87 messages: {
88 username: {
89 required: "请填写用户名",
90 stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
91 byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
92 },
93 email:{
94 required: "请输入一个Email地址",
95 email: "请输入一个有效的Email地址"
96 },
97 phone:{
98 required: "请输入您的联系电话",
99 isPhone: "请输入一个有效的联系电话"
},
address:{
required: "请输入您的联系地址",
stringCheck: "请正确输入您的联系地址",
byteRangeLength: "请详实您的联系地址以便于我们联系您"
}
},
/**//* 设置验证触发事件 */
focusInvalid: false,
onkeyup: false,
/**//* 设置错误信息提示DOM */
errorPlacement: function(error, element) {
error.appendTo( element.parent());
},
});
});
测试页index.html
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2"http://www.w3.org/TR/html4/loose.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
6 <title>jQuery验证</title>
7 <script src="lib/jquery/jquery-1.3.2.min.js" ></script>
8 <script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></script>
9 <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;
}
</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>
[原创]jQuery Validation范例的更多相关文章
- [转发]jQuery Validation范例
验证操作类formValidatorClass.js参照文件有: http://www.cnblogs.com/easyinsc/archive/2009/02/27/1407826.html htt ...
- jQuery Validation Engine 表单验证
功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则. 兼容 IE 6+, Chrome, ...
- 原创jquery插件treeTable（转）
由于工作需要,要直观的看到某个业务是由那些子业务引起的异常,所以我需要用树表的方式来展现各个层次的数据. 需求: 1.数据层次分明: 2.数据读取慢.需要动态加载孩子节点: 3.支持默认展开多少层. ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
- 表单验证插件----jquery validation
1.下载地址:http://jqueryvalidation.org/ 2.使用方法: <script type="text/javascript" src="ht ...
- 网友微笑分享原创Jquery实现瀑布流特效
首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...
- jquery and jquery validation 常见问题解决
Cannot read property 'settings' of undefined jquery validation 这个问题常常发生在动态添加rule的时候. 解决方法 // 在timeou ...
- 如何解决jQuery Validation针对动态添加的表单无法工作的问题？
为了充分利用ASP.NET MVC在服务端呈现HTML的能力,在<利用动态注入HTML的方式来设计复杂页面>一文中介绍了,通过Ajax调用获取HTML来呈现复杂页面中某一部分界面的解决方案 ...
- jQuery Validation remote的缓存请求
不知大家有没有遇到,用jQuery Validation(本文讨论的版本为jQuery Validation Plugin 1.11.1)用remote方式做校验时,如果验证元素的值保持一致,进行多次 ...
随机推荐
- svn 创建主干 分支版本
转载 https://www.cnblogs.com/dongzhiquan/p/5222018.html SVN分支与合并 一. 分支与合并的概念 二. SVN分支的意义 三. 如何创建分支与合并 ...
- PAT 1017 A除以B
https://pintia.cn/problem-sets/994805260223102976/problems/994805305181847552 本题要求计算A/B,其中A是不超过1000位 ...
- Linux vi中查找字符内容的方法
使用vi编辑器编辑长文件时,常常是头昏眼花,也找不到需要更改的内容. 这时,使用查找功能尤为重要. 方法如下: 1.命令模式下输入“/字符串”,例如“/Section 3”. 2.如果查找下一个, ...
- Mybatis.xml文件中大于小于等于
第一种写法: 原符号 < <= > >= & ' "替换符号 < <= > >= & ' "例如: ...
- BZOJ 4361 isn | DP 树状数组
链接 BZOJ 4361 题面 给出一个长度为n的序列A(A1,A2...AN).如果序列A不是非降的,你必须从中删去一个数, 这一操作,直到A非降为止.求有多少种不同的操作方案,答案模10^9+7. ...
- HGOI20181029模拟题解
HGOI20181029模拟题解 /* sxn让我一定要谴责一下出题人和他的数据! */ problem: 给出十进制数a,b,然后令(R)10=(a)10*(b)10,给出c表示一个k进制数(1&l ...
- debian9使用systemd部署etcd集群
在centos上,是可以直接使用yum安装etcd的: # yum list | grep etcd etcd.x86_64 3.2.9-3.el7 @extras 但是,在debian上却没有安装包 ...
- WEB入门之十二 jquery简介
学习内容 jQuery简介 搭建jQuery开发环境 jQuery基本选择器 能力目标 熟悉jQuery开发环境 能编写简单的jQuery代码 本章简介 在前面两章,我们学习了JavaScript面向 ...
- 解题：SDOI 2011 消耗战
题面 本身求答案是简单的树上DP,只需要求出根到每个点路径上的最小值,然后考虑割连父亲的边还是割所有儿子即可,但是每次都这样做一次显然不能通过,考虑优化 用虚树来优化:虚树是针对树上一些点建出来的一棵 ...
- sqlite3数据库的简要应用
Sqlite3数据库升级方案的变化. 1, 若是讲要升级的数据库版本更高,则从低版本数据库中拷贝与新数据库相同字段的内容,其他字段按照默认值创建.A->B->C这样逐个版本升级,每个版本 ...