文档章节

jquery-validation 使用

 布衣老僧
发布于 2015/10/28 14:57
字数 1255
阅读 22
收藏 0
<script src="${ctx}/static/lib/jquery/jquery.min.js" type="text/javascript"></script>
<script src="${ctx}/static/lib/jquery-validation/1.11.1/jquery.validate.min.js" type="text/javascript"></script>
<script src="${ctx}/static/lib/jquery-validation/1.11.1/messages_bs_zh.js" type="text/javascript"></script>
//validate 选项***********************************************************
$("form").validate({

debug:true  //进行调试模式(表单不提交)
rules:{
    name:"required", //自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象
     email:{
     //内置验证方式
        required:true, //必填项
        required:"#aa:checked"表达式的值为真,则必填项
required:function(){}返回为真,则必填项
        email:true,   //验证电子邮箱格式
        minlength:5,  //设置最小长度
        maxlength:10, //设置最大长度
        rangelength:[5,10],//设置一个长度范围[min,max]
        min:2,        //设置最小值
        max:8,       //设置最大值
        range:[2,8]      //设置值的范围
        url:true,         //验证URL格式
        date:true,    //验证日期格式(类似30/30/2008的格式,不验证日期准确性只验证格式)
        dateISO:true, //验证ISO类型的日期格式 例如:2009-06-23
        dateDE:true,  //验证德式的日期格式(29.04.1994 or 1.1.2006)
        number:true,  //验证十进制数字(包括小数的)
        digits:true,  //验证整数
        creditcard:true, //验证信用卡号
        accept:""     //请输入拥有合法后缀名的字符串(上传文件的后缀)
        equalTo:"id名" //验证两个输入框的内容是否相同
        phoneUS:true   //验证美式的电话号码
        regex:/正则表达式/     //上面addMethod扩展的验证规则
    }
}

messages:{
    name:"Name不能为空",  //自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数
    email:{
       required:"E-mail不能为空",
       email:"E-mail地址不正确"  //validate 内置验证有默认的英语提示 此处为重新自定义
    }
    }

    errorPlacement: function(error,element) {
                element.parents('.form-group').children(".help-block").html(error); //错误显示的位置 element验证的元素error错误提示
            }

            submitHandler:function(form) {//通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交
$(form).ajaxSubmit();  
//form.submit();
}

success:"类名"   //要验证的元素通过验证后的动作,跟一个字符串,会给输出错误的元素追加一个css类
ignore:".ignore" //对某些元素不进行验证
    onsubmit:false   //是否提交时验证 默认:true
    onfocusout:false //是否在获取焦点时验证 默认:true 
    onkeyup:false    //是否在敲击键盘时验证 默认:true
            onclick:false    //是否在鼠标点击时验证(一般验证checkbox,radiobox) 默认:true
            focusInvalid:false //提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点 默认:true
            focusCleanup:true  //当未通过验证的元素获得焦点时,并移除错误提示(避免和 focusInvalid.一起使用)默认:false
            errorClass:"类名"  //指定错误提示的css类名,可以自定义错误提示的样式 默认:"error"
            errorElement:"标签" //使用什么标签标记错误 默认:"label"
            wrapper:"标签"      //使用什么标签再把上边的errorELement包起来
            errorLabelContainer:"容器id"  //把错误信息统一放在一个容器里面
            showErrors:function(errorMap,errorList) { //跟一个函数,可以显示总共有多少个未通过验证的元素
        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
        this.defaultShowErrors();
}
})


//validate方法 返回一个Validator对象,它有很多方法, 让你能使用引发校验程序或者改变form的内容**************

$.validator.setDefaults({//设置validator默认
    debug:true,  //把调试模式设置为默认 如果一个页面中有多个表单一般用这种方式
    errorClass: "txt-impt", //设置默认错误提示的css类名
     errorElement: "div"     //设置默认错误提示的标签
})

//addMethod(name,method,message)方法:name(自定义rules的key) method(自定义验证方法) message(报错输出的提示)
jQuery.validator.addMethod("regex",function(value, element, params){  //扩展方法示例:           
var exp = new RegExp(params); //params rules的value传入的正则表达式
return exp.test(value);       //value  被验证的input传入的值
},"输入格式有误");

//扩展rules规则
jQuery.validator.addClassRules("name", {
required: true,
minlength: 2
});
jQuery.validator.addClassRules({
name: {
required: true,
minlength: 2
},
zip: {
required: true,
digits: true,
}
});
$("#myinput").rules("add", {  
required: true,  
minlength: 2,  
messages: {  
required: "Required input",  
minlength: jQuery.format("Please, at least {0} characters are necessary")  
}  
}); 
$("#myinput").rules("remove"); //全部移除验证规则
$("#myinput").rules("remove", "min max") //移除 min max

var form=$('form');
$(".formBtn").click(function(){ //按钮type非submit or submit按钮不在form内
console.log("Valid: " + form.valid()) //form.valid() 验证成功返回true
var validator = $("form").validate(setValidate);
var formState=validator.form();      //判断验证状态 返回Boolean
//validator.element("id名") 验证某个元素 返回Boolean
//validator.resetForm()  把前面验证的FORM恢复到验证前原来的状态
/*validator.showErrors({
"firstname": "I know that your firstname is Pete, Pete!"
}); 显示自定义的错误信息 */

if(formState==false){
return;
}else{
//do someing...
}
})

//使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项 后台只允许返回false和true
   remote: "check-email.php"  
    remote: {  
        url: "check-email.php",     //后台处理程序  
        type: "post",               //数据发送方式  
        dataType: "json",           //接受数据格式     
        data: {                     //要传递的数据  
            username: function() {  
                return $("#username").val();  
            }  
        }  
    }  


//meta String方式***************************************************************

//引入js
//dom上验证规则写法//设置为meta String验证方式
$("#myform").validate({
   meta:"validate",
   submitHandler:function() { alert("Submitted!") }
})


© 著作权归作者所有

粉丝 0
博文 5
码字总数 1710
作品 0
东城
私信 提问
12 个 jQuery 的表单验证教程和插件

jQuery Form Validation 使用jQuery进行快速简单的表单验证教程 Advanced jQuery form validation jQuery plugin: Validation A jQuery inline form validation Adding Form Validation to ......

红薯
2011/11/21
4K
3
8 个高可用的 jQuery 表单验证插件

1) A Jquery Inline Form Validation 2) Jquery Contact Form validation 3) Form Validation Using Jquery 4) Using Jquery and Ajax to validate Form 5) How to Validate Forms in both s......

红薯
2011/12/19
3.1K
8
自定义jQuery插件Step by Step

自定义jQuery插件Step by Step 1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是R...

wolf_su
2013/07/04
241
0
10 款高质量的 jQuery 表单验证插件

本文整理了几款高质量的jQuery表单验证插件,可以节约web开发者的时间。希望对你有帮助! 列表如下: 1) A Jquery Inline Form Validation 2) Form Validation Using Jquery 3) Using Jquery...

小卒过河
2011/06/28
110.4K
18
表单验证:nice Validator 与 jQuery Validation 对比

提要 最近,有人提到jQuery Validation Plugin,甚至有人怀疑 nice Validator 和 这个插件系同一个作者。我好想说,你太有想象力了-。-!jQuery Validation全程的鹰文,nice Validator 全程的...

JonyZhang
2013/08/02
4.2K
7

没有更多内容

加载失败,请刷新页面

加载更多

【运维】记一次上线前的紧急定位与修复-献上九条小经验

1 简介 本文介绍了作者所在团队在某次上线前测试发现问题、定位问题并修复上线的过程,最后给出几点经验总结,希望对大家有用。 2 过程 (1)今天需要上线,但昨晚才合并了所有分支,时间很紧...

南瓜慢说
36分钟前
4
0
Elasticsearch系列---初识Elasticsearch

Elasticsearch是什么? Elasticsearch简称ES,是一个基于Lucene构建的开源、分布式、Restful接口的全文搜索引擎,还是一个分布式文档数据库。天生就是分布式、高可用、可扩展的,可以在很短的...

清茶豆奶
48分钟前
3
0
服务安全之:JWT

JWT是JSON Web Tokens的缩写。既然叫JSON Web Tokens,所以JWT Tokens中真正包含的是多个JSON对象。为什么是多个JSON对象呢?因为SWT Token实际上是由三部分组成,其中有两部分是JSON格式。这...

popgis
今天
4
0
C++ Primer 笔记整理(一)基本语法介绍

C++被称为“完美的程序设计语言”,在chromium内核中应用非常广泛,之前没有系统学习过C++相关的知识,通过看书来学习相关的知识,现在将《C++ Primer》基本知识提取出来,供大家学习。 1.输...

天王盖地虎626
今天
2
0
你知道多少this,new,bind,call,apply?那我告诉你

那么什么是this,new,bind,call,apply呢?这些你都用过吗?掌握这些内容都是基础中的基础了。如果你不了解,那还不赶快去复习复习,上网查阅资料啥的! 通过call,apply,bind可以改变thi...

达达前端小酒馆
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部