扩展jquery.validate自定义验证，自定义提示，本地化
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Css/css.css" rel="stylesheet" />
<script src="~/Js/jquery.min.js"></script>
<script src="~/Js/jquery.validate.min.js"></script>
<script src="~/Js/jquery.validate.extend.js"></script>
<script>
$(document).ready(function () {
$("#myform").validate({
rules: {
username: { required: true, minlength: 2 },
password: { required: true, minlength: 6, maxlength: 16 },
repassword: { required: true, equalTo: "#password" },
amt: { required: true, isAmount: true },
idcard: { required: true, isIdCardNo: true }
},
messages: {
username: {
required: "用户名不能为空",
minlength: "用户名的最小长度为2"
},
password: {
required: "密码不能为空",
minlength: "密码长度不能少于6个字符",
maxlength: "密码长度不能超过16个字符"
},
repassword: {
required: "确认密码不能为空",
equalTo: "确认密码和密码不一致"
},
amt: {
required: "金额不能为空",
isAmount: "交易金额必须大于0，且最多有两位小数"
},
idcard: {
required: "身份证不能为空",
isIdCardNo: "身份证号码错误"
}
}
});
});
</script>
</head>
<body>
<div>
<form id="myform" method="post" action="">
<fieldset>
<legend>jquery-validate表单校验验证</legend>
<div class="item">
<label for="username" class="item-label">用户名:</label>
<input type="text" id="username" name="username" class="item-text" placeholder="设置用户名">
</div>
<div class="item">
<label for="password" class="item-label">密码:</label>
<input type="password" id="password" name="password" class="item-text" placeholder="设置密码">
</div>
<div class="item">
<label for="password" class="item-label">确认密码:</label>
<input type="password" name="repassword" class="item-text" placeholder="设置确认密码">
</div>
<div class="item">
<label for="amt" class="item-label">金额:</label>
<input type="text" id="amt" name="amt" class="item-text" placeholder="交易金额">
</div>
<div class="item">
<label for="idcard" class="item-label">身份证号码:</label>
<input type="text" id="idcard" name="idcard" class="item-text" placeholder="身份证号码">
</div>
<div class="item">
<input type="submit" value="提交" class="item-submit">
</div>
</fieldset>
</form>
</div>
</body>
</html>
/// <reference path="jquery.js" />
// jquery.validate.extend.js
$.validator.setDefaults({
onkeyup: null,
success: function (label) {
label.text('').addClass('valid');
},
onfocusin: function (element) {
this.lastActive = element;
$(element).addClass('highlight');
if (this.settings.focusCleanup) {
if (this.settings.unhighlight) {
this.settings.unhighlight.call(this, element, this.settings.errorClass, this.settings.validClass);
}
this.hideThese(this.errorsFor(element));
}
},
onfocusout: function (element) {
$(element).parent().children(".tip").remove();
$(element).removeClass('highlight');
this.element(element);
}
}); /*****************************************************************
jQuery Validate扩展验证方法
*****************************************************************/
// 判断整数value是否等于0
jQuery.validator.addMethod("isIntEqZero", function (value, element) {
value = parseInt(value);
return this.optional(element) || value == 0;
}, "整数必须为0"); // 判断整数value是否大于0
jQuery.validator.addMethod("isIntGtZero", function (value, element) {
value = parseInt(value);
return this.optional(element) || value > 0;
}, "整数必须大于0"); // 判断整数value是否大于或等于0
jQuery.validator.addMethod("isIntGteZero", function (value, element) {
value = parseInt(value);
return this.optional(element) || value >= 0;
}, "整数必须大于或等于0"); // 判断整数value是否不等于0
jQuery.validator.addMethod("isIntNEqZero", function (value, element) {
value = parseInt(value);
return this.optional(element) || value != 0;
}, "整数必须不等于0"); // 判断整数value是否小于0
jQuery.validator.addMethod("isIntLtZero", function (value, element) {
value = parseInt(value);
return this.optional(element) || value < 0;
}, "整数必须小于0"); // 判断整数value是否小于或等于0
jQuery.validator.addMethod("isIntLteZero", function (value, element) {
value = parseInt(value);
return this.optional(element) || value <= 0;
}, "整数必须小于或等于0"); // 判断浮点数value是否等于0
jQuery.validator.addMethod("isFloatEqZero", function (value, element) {
value = parseFloat(value);
return this.optional(element) || value == 0;
}, "浮点数必须为0"); // 判断浮点数value是否大于0
jQuery.validator.addMethod("isFloatGtZero", function (value, element) {
value = parseFloat(value);
return this.optional(element) || value > 0;
}, "浮点数必须大于0"); // 判断浮点数value是否大于或等于0
jQuery.validator.addMethod("isFloatGteZero", function (value, element) {
value = parseFloat(value);
return this.optional(element) || value >= 0;
}, "浮点数必须大于或等于0"); // 判断浮点数value是否不等于0
jQuery.validator.addMethod("isFloatNEqZero", function (value, element) {
value = parseFloat(value);
return this.optional(element) || value != 0;
}, "浮点数必须不等于0"); // 判断浮点数value是否小于0
jQuery.validator.addMethod("isFloatLtZero", function (value, element) {
value = parseFloat(value);
return this.optional(element) || value < 0;
}, "浮点数必须小于0"); // 判断浮点数value是否小于或等于0
jQuery.validator.addMethod("isFloatLteZero", function (value, element) {
value = parseFloat(value);
return this.optional(element) || value <= 0;
}, "浮点数必须小于或等于0"); // 判断浮点型
jQuery.validator.addMethod("isFloat", function (value, element) {
return this.optional(element) || /^[-\+]?\d+(\.\d+)?$/.test(value);
}, "只能包含数字、小数点等字符"); // 匹配integer
jQuery.validator.addMethod("isInteger", function (value, element) {
return this.optional(element) || (/^[-\+]?\d+$/.test(value) && parseInt(value) >= 0);
}, "匹配integer"); // 判断数值类型，包括整数和浮点数
jQuery.validator.addMethod("isNumber", function (value, element) {
return this.optional(element) || /^[-\+]?\d+$/.test(value) || /^[-\+]?\d+(\.\d+)?$/.test(value);
}, "匹配数值类型，包括整数和浮点数"); // 只能输入[0-9]数字
jQuery.validator.addMethod("isDigits", function (value, element) {
return this.optional(element) || /^\d+$/.test(value);
}, "只能输入0-9数字"); // 判断中文字符
jQuery.validator.addMethod("isChinese", function (value, element) {
return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value);
}, "只能包含中文字符。"); // 判断英文字符
jQuery.validator.addMethod("isEnglish", function (value, element) {
return this.optional(element) || /^[A-Za-z]+$/.test(value);
}, "只能包含英文字符。"); // 手机号码验证
jQuery.validator.addMethod("isMobile", function (value, element) {
var length = value.length;
return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/.test(value));
}, "请正确填写您的手机号码。"); // 电话号码验证
jQuery.validator.addMethod("isPhone", function (value, element) {
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码。"); // 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isTel", function (value, element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
return this.optional(element) || tel.test(value) || (length == 11 && mobile.test(value));
}, "请正确填写您的联系方式"); // 匹配qq
jQuery.validator.addMethod("isQq", function (value, element) {
return this.optional(element) || /^[1-9]\d{4,12}$/;
}, "匹配QQ"); // 邮政编码验证
jQuery.validator.addMethod("isZipCode", function (value, element) {
var zip = /^[0-9]{6}$/;
return this.optional(element) || (zip.test(value));
}, "请正确填写您的邮政编码。"); // 匹配密码，以字母开头，长度在6-12之间，只能包含字符、数字和下划线。
jQuery.validator.addMethod("isPwd", function (value, element) {
return this.optional(element) || /^[a-zA-Z]\\w{6,12}$/.test(value);
}, "以字母开头，长度在6-12之间，只能包含字符、数字和下划线。"); // 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function (value, element) {
//var idCard = /^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/;
return this.optional(element) || isIdCardNo(value);
}, "请输入正确的身份证号码。"); // IP地址验证
jQuery.validator.addMethod("ip", function (value, element) {
return this.optional(element) || /^(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.)(([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))\.){2}([1-9]|([1-9]\d)|(1\d\d)|(2([0-4]\d|5[0-5])))$/.test(value);
}, "请填写正确的IP地址。"); // 字符验证，只能包含中文、英文、数字、下划线等字符。
jQuery.validator.addMethod("stringCheck", function (value, element) {
return this.optional(element) || /^[a-zA-Z0-9\u4e00-\u9fa5-_]+$/.test(value);
}, "只能包含中文、英文、数字、下划线等字符"); // 匹配english
jQuery.validator.addMethod("isEnglish", function (value, element) {
return this.optional(element) || /^[A-Za-z]+$/.test(value);
}, "匹配english"); // 匹配汉字
jQuery.validator.addMethod("isChinese", function (value, element) {
return this.optional(element) || /^[\u4e00-\u9fa5]+$/.test(value);
}, "匹配汉字"); // 匹配中文(包括汉字和字符)
jQuery.validator.addMethod("isChineseChar", function (value, element) {
return this.optional(element) || /^[\u0391-\uFFE5]+$/.test(value);
}, "匹配中文(包括汉字和字符) "); // 判断是否为合法字符(a-zA-Z0-9-_)
jQuery.validator.addMethod("isRightfulString", function (value, element) {
return this.optional(element) || /^[A-Za-z0-9_-]+$/.test(value);
}, "判断是否为合法字符(a-zA-Z0-9-_)"); // 判断是否包含中英文特殊字符，除英文"-_"字符外
jQuery.validator.addMethod("isContainsSpecialChar", function (value, element) {
var reg = RegExp(/[(\ )(\`)(\~)(\!)(\@)(\#)(\$)(\%)(\^)(\&)(\*)(\()(\))(\+)(\=)(\|)(\{)(\})(\')(\:)(\;)(\')(',)(\[)(\])(\.)(\<)(\>)(\/)(\?)(\~)(\！)(\@)(\#)(\￥)(\%)(\…)(\&)(\*)(\（)(\）)(\—)(\+)(\|)(\{)(\})(\【)(\】)(\‘)(\；)(\：)(\”)(\“)(\’)(\。)(\，)(\、)(\？)]+/);
return this.optional(element) || !reg.test(value);
}, "含有中英文特殊字符"); // 判断是否金额 小数点后两位
jQuery.validator.addMethod(
"isAmount",
function (value, element) {
return value && /^\d*\.?\d{0,2}$/.test(value);
},
"金额必须大于0且小数位数不超过2位"
); //身份证号码的验证规则
function isIdCardNo(num) {
//if (isNaN(num)) {alert("输入的不是数字！"); return false;}
var len = num.length, re;
if (len == 15)
re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{2})(\w)$/);
else if (len == 18)
re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\w)$/);
else {
//alert("输入的数字位数不对。");
return false;
}
var a = num.match(re);
if (a != null) {
if (len == 15) {
var D = new Date("19" + a[3] + "/" + a[4] + "/" + a[5]);
var B = D.getYear() == a[3] && (D.getMonth() + 1) == a[4] && D.getDate() == a[5];
}
else {
var D = new Date(a[3] + "/" + a[4] + "/" + a[5]);
var B = D.getFullYear() == a[3] && (D.getMonth() + 1) == a[4] && D.getDate() == a[5];
}
if (!B) {
//alert("输入的身份证号 "+ a[0] +" 里出生日期不对。");
return false;
}
}
if (!re.test(num)) {
//alert("身份证最后一位只能是数字和字母。");
return false;
}
return true;
}
body {
font-family: Microsoft Yahei;
font-size: 15px;
}
fieldset {
width: 680px;
}
legend {
margin-left: 8px;
}
.item {
height: 56px;
line-height: 36px;
margin: 10px;
}
label {
float: left;
}
.item .item-label {
float: left;
width: 80px;
text-align: right;
}
.item-text {
float: left;
width: 244px;
height: 16px;
padding: 9px 25px 9px 5px;
margin-left: 10px;
border: 1px solid #ccc;
overflow: hidden;
}
.item-submit {
margin-left: 88px;
}
input.error {
border: 1px solid #E6594E;
}
input.highlight {
border: 1px solid #7abd54;
}
label.error, label.tip {
float: left;
font-size: 14px;
text-align: left;
margin-left: 5px;
padding-left: 20px;
color: red;
background: url('/images/error.png') no-repeat left center;
}
label.valid {
background: url('/images/right.png') no-repeat left center;
}
扩展jquery.validate自定义验证，自定义提示，本地化的更多相关文章
- jquery.validate自定义验证--成功提示与择要提示
1. 自定义验证--成功提示 1) 添加选项 errorClass: "unchecked", validClass: "checked", errorElem ...
- 1)jquery validate 远程验证remote,自定义验证 , 手机号验证 2)bootstrap validate 远程remote验证的方法.
1)jquery validate 远程验证remote,自定义验证 1-1: js <script src="YYFramework/Public/js/jquery-3.1.1. ...
- jquery.validate remote 和 自定义验证方法
jquery.validate remote 和 自定义验证方法 $(function(){ var validator = $("#enterRegForm").validate ...
- jquery validate remote验证唯一性
jquery.validate.js 的 remote 后台验证 之前已经有一篇关于jquery.validate.js验证的文章,还不太理解的可以先看看:jQuery Validate 表单验证(这 ...
- jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
- 使用tooltip显示jquery.validate.unobtrusive验证信息
通过重写CSS实现使用tooltip显示jquery.validate.unobtrusive验证信息,效果如图: 1. 在ViewModel中定义验证规则 [Display(Name = " ...
- jQuery Validate Ajax 验证
jQuery Validate Ajax 验证 <script type="text/javascript"> $(function() { $('#formCityL ...
- jQuery Validate 插件验证,,返回不同信息(json remote)自定义
问题 申请账号需要确认该账号是存在 jquery.validate.js中的remote Jquery Ajax获取后台返回的Json数据后,添加自定义校验 解题思路:输入的登陆信息远程验证是否该账号 ...
- jquery.validate.js之自定义表单验证规则
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- vue-cli中父子组件间的变量传递
vue-cli中父子组件间的变量传递 在vue中每一个组件的作用域都是独立的,如果我们想实现父子组件间变量的传递就要另寻他法,而不能直接调用其中的变量. 父级组件向子级组件传递变量 要实现这种效果我们 ...
- C# 反向生成工具（DAL BLL Modle）
VS2015 ADO.NET无果后果断~! 动软生成:http://pan.baidu.com/s/1gfIf0ZL
- Color.js增强你对颜色的控制
往逝之因 不要低头,皇冠会掉... 可你又没有皇冠 Color.js 增强你对颜色的控制 阅读目录 轻松管理颜色--color.js库 使用color.js Accessor Methods 你该知 ...
- Java 循环和函数（方法）
1 for循环嵌套 简而言之,就是一个for循环语句里面,还有一个for循环语句. 外层循环,每循环一次,内层循环,循环一周. 示例 package java003; /** * 2017/9/1. ...
- 团队作业8----第二次项目冲刺（beta阶段）5.23
Day5-05.23 1.每日会议 会议内容: 1.组长林乔桦对昨日的工作进行了总结并且安排今日的任务. 2.潘益靖副组长说明昨日任务的完成情况. 3.组员对昨天的各项工作进行了汇报以及对今天的工作进 ...
- 团队作业八——第二次团队冲刺（Beta版本）第3天
一.每个人的工作 (1) 昨天已完成的工作 对界面进行完善,并增加简单界面(包含简单界面内含的界面),简单模式与复杂模式的选择界面. (2) 今天计划完成的工作 做一下用户注册的功能和登录功能. (3 ...
- 201521123079《java程序设计》第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 public boo ...
- Java 第六周总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 让SAE下的wordpress支持文件上传
非PHP程序员照着源码打的小布丁… SAE是不允许本地磁盘读写的,所以使用wordpress撰写文章的时候, 上传控件默认是用不了的,幸好SAE提供了storage服务来存储文件,那就可以修改word ...
- TCP/IP协议：OSI七层模型、TCP/IP四层模型的对比
1. OSI七层和TCP/IP四层的关系 1.1 OSI引入了服务.接口.协议.分层的概念,TCP/IP借鉴了OSI的这些概念建立TCP/IP模型. 1.2 OSI先有模型,后有协议,先有标准,后进行 ...