客户端验证的极品--jQuery.validator
2019独角兽企业重金招聘Python工程师标准>>>
最近在做一个用户注册登录的页面,资料查寻过程中发现了一个非常不错的客户端验证的极品-jQuery.validate。
它是著名的JavaScript包jQuery的一个插件,其实它还有其它的一些插件应该都爽,有待慢慢来学习
官方地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/
jQuery用户手册:http://jquery.org.cn/visual/cn/index.xml
开发使用起来非常简单明了,
我的代码:
- $(document).ready(function(){
- /* 设置默认属性 */
- $.validator.setDefaults({
- submitHandler: function(form) { form.submit(); }
- });
- // 中文字两个字节
- jQuery.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] );
- }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
- /* 追加自定义验证方法 */
- // 身份证号码验证
- jQuery.validator.addMethod("isIdCardNo", function(value, element) {
- return this.optional(element) || isIdCardNo(value);
- }, "请正确输入您的身份证号码");
- // 字符验证
- jQuery.validator.addMethod("userName", function(value, element) {
- return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.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}))+\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("isZipCode", function(value, element) {
- var tel = /^[0-9]{6}$/;
- return this.optional(element) || (tel.test(value));
- }, "请正确填写您的邮政编码");
- $(regFrom).validate({
- /* 设置验证规则 */
- rules: {
- userName: {
- required: true,
- userName: true,
- byteRangeLength: [3,15]
- },
- password: {
- required: true,
- minLength: 5
- },
- repassword: {
- required: true,
- minLength: 5,
- equalTo: "#password"
- },
- question: {
- required: true
- },
- answer: {
- required: true
- },
- realName: {
- required: true
- },
- cardNumber: {
- isIdCardNo: true
- },
- mobilePhone: {
- isMobile: true
- },
- phone: {
- isPhone: true
- },
- email: {
- required: true,
- email: true
- },
- zipCode: {
- isZipCode:true
- }
- },
- /* 设置错误信息 */
- messages: {
- userName: {
- required: "请填写用户名",
- byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
- },
- password: {
- required: "请填写密码",
- minlength: jQuery.format("输入{0}.")
- },
- repassword: {
- required: "请填写确认密码",
- equalTo: "两次密码输入不相同"
- },
- question: {
- required: "请填写您的密码提示问题"
- },
- answer: {
- required: "请填写您的密码提示答案"
- },
- realName: {
- required: "请填写您的真实姓名"
- },
- email: {
- required: "请输入一个Email地址",
- email: "请输入一个有效的Email地址"
- }
- },
- /* 错误信息的显示位置 */
- errorPlacement: function(error, element) {
- error.appendTo( element.parent() );
- },
- /* 验证通过时的处理 */
- success: function(label) {
- // set as text for IE
- label.html(" ").addClass("checked");
- },
- /* 获得焦点时不验证 */
- focusInvalid: false,
- onkeyup: false
- });
- // 输入框获得焦点时,样式设置
- $('input').focus(function(){
- if($(this).is(":text") || $(this).is(":password"))
- $(this).addClass('focus');
- if ($(this).hasClass('have_tooltip')) {
- $(this).parent().parent().removeClass('field_normal').addClass('field_focus');
- }
- });
- // 输入框失去焦点时,样式设置
- $('input').blur(function() {
- $(this).removeClass('focus');
- if ($(this).hasClass('have_tooltip')) {
- $(this).parent().parent().removeClass('field_focus').addClass('field_normal');
- }
- });
- });
网上的资料有人说,它跟prototype包会有冲突,我还没有同时使用过,这点不是很清楚,但我是发现一个问题:
对于最小/大长度的验证方法,作者可能考虑到大家的命名习惯不同,同时做了minLength和minlength(maxLength和maxlength)方法,应该哪一个都是可以的,但对于用户Message来说,只能够定义针对minlength(maxlength),才能调用用户自定义的Message,
否则只是调用包的默认Message,但具体原因还没有查清楚。同时,这个插件提供了本地化的消息,但对于我这里初学者来说,怎么使用它还有待摸索!
转载于:https://my.oschina.net/wangyongqing/blog/59797
客户端验证的极品--jQuery.validator相关推荐
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-下)——不使用微软验证控件的理由...
2019独角兽企业重金招聘Python工程师标准>>> 引用源:http://www.cnblogs.com/kyo-yo/archive/2010/07/06/Use-jQuery ...
- [jQuery]使用jQuery.Validate进行客户端验证(高级篇-上)——不使用微软验证控件的理由...
在上一篇使用jQuery.Validate进行客户端验证(中级篇-下)中我介绍了jQuery.Validate在日常使用的过程中会遇到哪些问题及解决办法,今天的高级篇则主要是对jQuery.Valid ...
- 客户端验证:JQuery Validation Plugin
jQuery Validate验证框架详解 jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导 ...
- jQuery.validator.addClassRules()添加指定class的表单验证规则
因为jQuery.validator 默认的是根据表单的name属性做验证,找了很久中文文档里没有提到制定class添加验证贵则的方式,官方文档终于找到了. 链接https://jqueryvalid ...
- jquery.validator验证后ajax提交出现错误解决
今天使用jquery.validator验证后作ajax提交,总是不能成功:之后发现原来是页面中有报错没有解决.当把页面中的报错解决掉时,可以ajax提交了 <!DOCTYPE html> ...
- jquery. Validator验证框架ajax返回json数据
今天在使用jquery. Validator验证框架的过程中遇到了一个这个的问题: 我需要动态的去验证注册邮箱是否已经存在了,所以需要用到ajax请求来解决该问题.但在使用该验证框架的ajax异步请求 ...
- 利用jQuery.validator来做表单验证,不要太轻松(全攻略)
1.介绍 jQuery.validator是给我们用来做表单验证提交时的一个插件,你可以直接去官网下载,也可以通过菜鸟教程学习和下载该插件 菜鸟教程(jQuery.validator) 2.使用 2. ...
- ASP.NET MVC如何实现自定义验证(服务端验证+客户端验证)
ASP.NET MVC通过Model验证帮助我们很容易的实现对数据的验证,在默认的情况下,基于ValidationAttribute的声明是验证被使用,我们只需要将相应的ValidationAttri ...
- jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- html5 如何实现客户端验证上传文件的大小
在HTML 5中,现在可以在客户端进行文件上传时的校验了,比如用户选择文件后,可以 马上校验文件的大小和属性等.本文章向码农介绍html5 如何实现客户端验证上传文件的大小,感兴趣的码农可以参考一下. ...
最新文章
- 什么是自组织特征映射网络?
- http://wenku.baidu.com/view/26afdb8371fe910ef12df8ccRevit采用DWG和FBX两种格式导入3D max方法的总结...
- ubuntu apt 相关命令
- php获取pid,在Shell脚本中获取指定进程的PID
- 怎么设置计算机管理员权限,Windows7管理员权限怎么设置?
- elk 安装与所遇问题
- mysql resultset null_com.mysql.jdbc.driver中resultset报NullException
- kali linux2019镜像下载,Kali 2019下载_KaLi Linux镜像文件iso下载 2019.1a x86/x64_当载软件站...
- thinkpadx1mdt 网络启动_二二、MDT 2013 Update 1批量部署-硬件驱动使用、驱动库建立及自动识别...
- excel 第12讲:vlookup函数和 macth与index函数
- html桂花酿网页,桂花酒的做法
- Sandy的卡片[SDOI2008]
- java文字水印换行_Java实现图片水印文字换行、平铺、旋转效果-Go语言中文社区...
- python单位转换编程_如何使用python编程将一组DNA序列转换为蛋白...
- QT Q_DISABLE_COPY 宏的用处
- eos安装区块链开发环境
- 项目文件夹下的obj文件夹
- 侯捷C++系统工程师
- 一步一步在平衡车上实现卡尔曼滤波
- dell r730服务器系统安装后,无法进入系统