表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~
因为今天有个朋友问我要一个表单的验证,所以我就稍微整理了一下~ 基本上有了这个表单验证插件,基本上一些常用的验证都可以搞定了~ 如果搞不定,没关系,我们还可以基于Validate来写一个自己的验证插件, 我把它取名为message_zh.js,我们可以在里面扩展自己需要的验证~~
既然Validate是基于jQuery的,那么首先先引入Jquery/Validate~ Jquery/Validate在网上都可以下载~~
其实jQuery跟Validate都不是重点,因为它们就在那里~ 重要的是我们的message_zh.js,, 因为我们这是我们写扩展的地方~ 重要的是我们怎么去调用以及区验证我们所需要验证的表单~~
下面是我用的message_zh.js~~
/*
* author : just
* date : 2016
* description : 验证提示逻辑
*/ /**
* 身份证15位编码规则:dddddd yymmdd xx p
* dddddd:地区码
* yymmdd: 出生年月日
* xx: 顺序类编码,无法确定
* p: 性别,奇数为男,偶数为女
* 身份证18位编码规则:dddddd yyyymmdd xxx y
* dddddd:地区码
* yyyymmdd: 出生年月日
* xxx:顺序类编码,无法确定,奇数为男,偶数为女
* y: 校验码,该位数值可通过前17位计算获得
* 18位号码加权因子为(从右到左) Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2,1 ]
* 验证位 Y = [ 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ]
* 校验位计算公式:Y_P = mod( ∑(Ai×Wi),11 )
* i为身份证号码从右往左数的 2...18 位; Y_P为脚丫校验码所在校验码数组位置
*
*/
(function () {
$.extend($.validator.messages, {
required: "不能为空",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: $.validator.format("请输入长度最多为 {0}的字符"),
minlength: $.validator.format("请输入长度至少为 {0}的字符"),
rangelength: $.validator.format("长度介于 {0} 和 {1}间"),
range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: $.validator.format("最大值不超过 {0}"),
min: $.validator.format("最小值不低于 {0}")
}); // 添加新验证规则(校验本值是否大于指定元素的值)
$.validator.addMethod('gt', function(value, element, params) { if (params === false || value === '') {
return true;
} else {
var $target = $(params);
if ($target.length > 0) {
if ($.isNumeric($target.eq(0).val()) && $.isNumeric(value)) {
return (parseFloat($target.eq(0).val()) < parseFloat(value)) ? true : false;
} else {
return ($target.eq(0).val() < value) ? true : false;
}
}
}
}, '必须大于指定值'); // 添加新验证规则(校验是否是手机号码)
$.validator.addMethod('tel', function(value, element, params) {
if (params === false || value === '') {
return true;
} else {
return (/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/.test(value)) ? true : false;
}
}, '手机号格式不正确'); // 添加新验证规则(校验网址)
$.validator.addMethod('domain', function(value, element, params) {
if (params === false || value === '') {
return true;
} else {
return (/^(((ht|f)tp(s?))\:\/\/)?(www.|[a-zA-Z].)[a-zA-Z0-9\-\.]+\.(com|edu|gov|mil|net|org|biz|info|name|museum|us|ca|uk)(\:[0-9]+)*(\/($|[a-zA-Z0-9\.\,\;\?\'\\\+&%\$#\=~_\-]+))*$/.test(value)) ? true : false;
}
}, '网址格式不正确'); // 添加新验证规则(校验是否是身份证号码)
$.validator.addMethod('idCardValid', function(value, element, params) {
if (params === false || value === '') {
return true;
} else {
var idCard = $.trim(value.replace(/ /g, ""));
if (idCard.length == 15) {
return isValidityBrithBy15IdCard(idCard);
} else if (idCard.length == 18) {
var a_idCard = idCard.split(""); // 得到身份证数组
if (isValidityBrithBy18IdCard(idCard) && isTrueValidateCodeBy18IdCard(a_idCard)) {
return true;
} else {
return false;
}
} else {
return false;
}
}
}, '请输入正确的身份证号码'); // 添加新验证规则(校验是否是邮箱号码)
$.validator.addMethod('mail', function(value, element, params) {
if (params === false || value === '') {
return true;
} else {
return (/^\s*\w+(?:\.{0,1}[\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\.[a-zA-Z]+\s*$/.test(value)) ? true : false;
}
}, '邮箱格式不正确'); // 添加新验证规则(校验是否是邮箱或者手机)
$.validator.addMethod('telEmail', function(value, element, params) {
if (params === false || value === '') {
return true;
} else {
return (/^\s*\w+(?:\.{0,1}[\w-]+)*@[a-zA-Z0-9]+(?:[-.][a-zA-Z0-9]+)*\.[a-zA-Z]+\s*$/.test(value)) || /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/.test(value) ? true : false;
}
}, '格式不正确'); // 添加新验证规则(校验是否是固话或者手机)
$.validator.addMethod('telPhone', function(value, element, params) {
if (params === false || value === '') {
return true;
} else {
return (/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/.test(value)) || /^(([0\+]\d{2,3})?(0\d{2,3}))(\d{7,8})((\d{3,}))?$/.test(value) || /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/.test(value) ? true : false;
}
}, '格式不正确'); $.validator.addMethod('cash', function(value, element, params) {
if (params === false || value === '') {
return true;
} else {
return (/^([1-9]\d{0,15}|0)(\.\d{1,2})?$/.test(value)) ? true : false;
}
}, '金额最多保留两位小数'); // 添加新验证规则(校验是否银行卡帐号)
$.validator.addMethod("luhmCheck", function(value, element) {
var lastNum = value.substr(value.length - 1, 1); // 取出最后一位(与luhm进行比较)
var first15Num = value.substr(0, value.length - 1); // 前15或18位
var newArr = new Array();
for (var i = first15Num.length - 1; i > -1; i--) { // 前15或18位倒序存进数组
newArr.push(first15Num.substr(i, 1));
}
var arrJiShu = new Array(); // 奇数位*2的积 <9
var arrJiShu2 = new Array(); // 奇数位*2的积 >9 var arrOuShu = new Array(); // 偶数位数组
for (var j = 0; j < newArr.length; j++) {
if ((j + 1) % 2 == 1) { // 奇数位
if (parseInt(newArr[j]) * 2 < 9)
arrJiShu.push(parseInt(newArr[j]) * 2);
else
arrJiShu2.push(parseInt(newArr[j]) * 2);
} else
// 偶数位
arrOuShu.push(newArr[j]);
} var jishu_child1 = new Array(); // 奇数位*2 >9 的分割之后的数组个位数
var jishu_child2 = new Array(); // 奇数位*2 >9 的分割之后的数组十位数
for (var h = 0; h < arrJiShu2.length; h++) {
jishu_child1.push(parseInt(arrJiShu2[h]) % 10);
jishu_child2.push(parseInt(arrJiShu2[h]) / 10);
} var sumJiShu = 0; // 奇数位*2 < 9 的数组之和
var sumOuShu = 0; // 偶数位数组之和
var sumJiShuChild1 = 0; // 奇数位*2 >9 的分割之后的数组个位数之和
var sumJiShuChild2 = 0; // 奇数位*2 >9 的分割之后的数组十位数之和
var sumTotal = 0;
for (var m = 0; m < arrJiShu.length; m++) {
sumJiShu = sumJiShu + parseInt(arrJiShu[m]);
} for (var n = 0; n < arrOuShu.length; n++) {
sumOuShu = sumOuShu + parseInt(arrOuShu[n]);
} for (var p = 0; p < jishu_child1.length; p++) {
sumJiShuChild1 = sumJiShuChild1 + parseInt(jishu_child1[p]);
sumJiShuChild2 = sumJiShuChild2 + parseInt(jishu_child2[p]);
}
// 计算总和
sumTotal = parseInt(sumJiShu) + parseInt(sumOuShu) + parseInt(sumJiShuChild1) + parseInt(sumJiShuChild2); // 计算Luhm值
var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10;
var luhm = 10 - k;
return this.optional(element) || (lastNum == luhm);
}, "请输入正确的银行卡帐号"); // 添加新验证规则(校验是否是纯数字)
$.validator.addMethod('notnum', function(value, element, params) {
if (params === false || value === '') {
return true;
} else {
return (/^[0-9]*$/.test(value)) ? false : true;
}
}, "不能输入纯数字"); //重写jquery验证的提示方法
$.validator.setDefaults({ success: $.noop,
onkeyup: false,
ignore: '.ignore', /**
* 不管是否出错都会调用该函数
*/
errorPlacement: function(error, element) {
if (error.is(':empty')) {
// 验证成功
// doing....
var $failInfo = $(element).closest('.hr-field').find('.fail-info');
$failInfo.slideUp(function() {
$(this).remove();
}); } else {
// 验证失败
var $failInfo;
if ($(element).closest(".hr-field").find('.fail-info').length > 0) {
$failInfo = $(element).closest(".hr-field").find('.fail-info');
} else {
$failInfo = $("<div>").addClass("fail-info");
$(element).closest(".hr-field").append($failInfo);
}
$failInfo.text(error[0].innerHTML).slideDown();
}
}
});
})(); function isValidityBrithBy15IdCard(idCard15) {
var year = idCard15.substring(6, 8);
var month = idCard15.substring(8, 10);
var day = idCard15.substring(10, 12);
var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
// 对于老身份证中的你年龄则不需考虑千年虫问题而使用getYear()方法
if (temp_date.getYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() != parseFloat(day)) {
return false;
} else {
return true;
}
}; function isValidityBrithBy18IdCard(idCard18) {
var year = idCard18.substring(6, 10);
var month = idCard18.substring(10, 12);
var day = idCard18.substring(12, 14);
var temp_date = new Date(year, parseFloat(month) - 1, parseFloat(day));
// 这里用getFullYear()获取年份,避免千年虫问题
if (temp_date.getFullYear() != parseFloat(year) || temp_date.getMonth() != parseFloat(month) - 1 || temp_date.getDate() != parseFloat(day)) {
return false;
} else {
return true;
}
}; var Wi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1]; // 加权因子
var ValideCode = [1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2]; // 身份证验证位值.10代表X /**
* 判断身份证号码为18位时最后的验证位是否正确
* @param a_idCard 身份证号码数组
* @return
*/
function isTrueValidateCodeBy18IdCard(a_idCard) {
var sum = 0; // 声明加权求和变量
console.log(a_idCard[17]);
if (a_idCard[17].toLowerCase() == 'x') {
a_idCard[17] = 10; // 将最后位为x的验证码替换为10方便后续操作
}
for (var i = 0; i < 17; i++) {
sum += Wi[i] * a_idCard[i]; // 加权求和
}
var valCodePosition = sum % 11; // 得到验证码所位置
if (a_idCard[17] == ValideCode[valCodePosition]) {
return true;
} else {
return false;
}
}
里面写了很多工作中都用到的一些,比如身份证,银行卡,邮箱+手机~~ 这些都是我工作中常用到的~~ 这个先放这里~ 然后看下我们在html中的验证怎么调用~
我demo中的HTML结构~~~
<form action="" id="form-box">
<div class="input-box">
<label for="name">姓名</label>
<div class="hr-field">
<input type="text" name="name" id="name">
</div>
</div>
<div class="input-box">
<label for="phone">手机</label>
<div class="hr-field">
<input type="text" name="phone" id="phone">
</div>
</div>
<div class="input-box">
<label for="address">地址</label>
<div class="hr-field">
<input type="text" name="address" id="address">
</div>
</div>
</form>
<a href="javascript:;" class="link">提交</a>
demo中的JS调用方法~~
// 验证信息
$('#form-box').validate({
rules:{
name: {
required: true
},
phone: {
required: true,
tel: true
},
address: {
required: true
}
},
messages: {
name: {
required: '请输入名称'
},
phone: {
required: '请输入联系电话'
},
address: {
required: '请输入地址'
}
}
})
$('.link').on('click', function() {
if($('#form-box').valid()) { // 验证通过
console.log('验证通过');
}
})
其实引用时非常的简单的~~ 一个是validate()和valid(),这两个都是validate.js中定义的~ 是验证规则~
验证调用时可以了,但是我们还是需要有中文提示,我把提示稍微修改了下,,首先下面是一段message_zh中的代码
这个就是放在Input标签外面的, 如果我们验证没有通过,就显示Input外的hr-field类(这个类最开始是隐藏的~~),
前端的基本验证基本就是这样子,里面有很多比较细节的地方,只有自己尝试去写了拓展, 尝试去调用验证了就可以清楚其中的实现原理了~~
基于jQuery的Validate表单验证的更多相关文章
-
jQuery:validate表单验证基本使用
jquery.validate是jquery的一个验证框架,可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法! 这里先从介绍简单的使用方法:jquery.validate.js下载地址 1. ...
-
jquery的validate表单验证
html: <form id="reg" action="123.html"> <p class="myerror"> ...
-
ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
-
[转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
-
Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
-
jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
-
【干货】Laravel --Validate (表单验证) 使用实例
前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...
-
jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
-
jQuery Validation Engine 表单验证,自定义规则验证方法
jQuery Validation Engine 表单验证说明文档http://code.ciaoca.com/jquery/validation-engine/ js加到jquery.validat ...
随机推荐
-
简单搭建 nuget 内部服务器
搭建 nuget 内部服务器,最好的方式是使用 ProGet,参考博文<用 ProGet 搭建内部的 NuGet 服务器>,好处非常多,但需要使用 SQL Server 数据库,如果不想使 ...
-
[Linux] 查看jar包内容
jar vtf fileName.jar 用法: jar {ctxui}[vfm0Me] [jar-file] [manifest-file] [entry-point] [-C dir] file ...
-
Node.js入门:Hello World
马上开始我们第一个Node.js应用:“Hello World”.打开你的编辑器,创建一个hello.js文件.编写代码保存该文件,并通过Node.js来执行. 控制台输出 1 console.log ...
-
Web Audio API_基本概念
Audio Context 音频的工作环境.类比做化学实验,Audio Context 就是为我们提供各种仪器和材料的实验室(严格地来说制造这些仪器材料的方法和工具也一并提供了).通常来说做实验一间实 ...
-
湖南附中模拟day1 瞭望塔
/* 这个题要用到树的性质,一般比较难的图论题会往这方面靠拢,这样用很容易出错,应该先写暴力,然后再去一点点想正解 */ //暴力70分 #include<iostream> #inclu ...
-
DevExpress控件使用经验总结
转自:http://www.cnblogs.com/wuhuacong/archive/2011/08/31/2161002.html
-
[LeetCode]题解(python):077-Combinations
题目来源: https://leetcode.com/problems/combinations/ 题意分析: 给定一个n和k,输出1到n的所有k个数的组合.比如n = 4,k=2 [ [2,4], ...
-
android从assets读取文件的方法
因为开发需要,经常要从工程的assets文件夹里面读取文件,现在贴一个方法以作记录: private void getFromAssets(String fileName, ArrayList< ...
-
一个html页面传入参数到另一个html页面用js获取方法
没错使用以下函数就能够完整的获取到路径里的你想要的参数:function getURLParameter(name) { return decodeURIComponent((new RegExp(' ...
-
【druid 】数据库连接池
一.数据库连接池架构 二.数据库连接池的过滤器 spi的思想,加载配置文件的Filter druid.filters.default=com.alibaba.druid.filter.stat.Sta ...