表单验证神器-validate

最近做表单校验提交的功能特别多，之前都是自己写js,再点击提交的时候，满足验证必填，格式，报错以后的提示，跳转到报错处等等需求，最近同事给推荐了一个插件 用来验证表单，十分好用，在以上功能满足的前提下，还可以对表单进行触发校验，失去焦点校验，也可以自动跳转错误等。

插件名:jquery.validate.js

是一个基于jquery的表单验证工具

官网地址：http://jqueryvalidation.org/     一定要参照官网地址 看，很多东西 其他平台都没有讲清楚，使用的时候绕了很大的弯子

引入相应资源以后

 基础使用： （基础使用可以参考菜鸟教程）

 

var ruleObjNew= $("#form").validate(ruleObj)

ruleObj是一个包含验证规则，忽略验证的内容，报错形式，报错内容，提交方法等等定义的一个对象 
ruleObjNew 是validate生成的实例，也可以说是 唯一标识，需要通过这个 对校验规则进行销毁

ruleObj

   var ruleObj={
            //忽略某些元素不验证  忽略类名no-require的不验证
            ignore:".no-require",
            //验证规则
            rules: {
               /* input textarea radio checbox等name名：{
                                        该表单元素验证规则
                                        required：true,自带规则 参照官网 或者 菜鸟教程
                                        email:true,
                                        english:true 自写规则名
                                }
                */
                mailbox:{
                    required:true,
                    email: true
                },
                //只有一个规则的写法
                birth: "required",
                firstPinYin: {required:false,english:true},
                lastPinYin:  {required:false,english:true},
                contentsContent:  {required:false},
                firstname: {
                    required:true,
                    noNum:true
                },
                middleName: {
                    required:true,
                    noNum:true
                },
                lastName: {
                    required:true,
                    noNum:true
                },
                fullName:{
                    required:true,
                    noNum:true
                },
                nationality: "required",
                phone: "required",
                passportNumber: "required",
                InterestIndustry:'required',
                typeOfID: "required",
                titleen: "required",
                endActivity: "required",
                newKinetic: "required",
                otherIndustry:{
                    required:false
                },
                //单选复选框 一定要写上name或者 在元素上加required属性 二选一 表示必填 ，必填的radio checbox的messages需要在messages单独写一次
                investmentInSd:{
                    required:false
                },
            },
            messages: {
                //radio checbox的messages需要单独写
                gender:{
                    required: "该项为必填项"
                },
                newKinetic: {
                    required: "该项为必填项"
                },
                isInvestmentInSd: {
                    required: "该项为必填项"
                },
                InterestDates: {
                    required: "该项为必填项"
                },
                InterestIndustry: {
                    required: "该项为必填项"
                },
                interestCity: {
                    required: "该项为必填项"
                },
            },
            //验证不通过表现形式
            errorPlacement: function(error, element) {
                //默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面。
                element.parents('.form-item').addClass('on')
                error.appendTo(element.parents('.item'));
            },
            submitHandler: function (form) {
                //这里是 改写了  $("#form").submit() 表单的submit方法 ，表单submit的时候 是 执行submit(form)这个函数
                submit(form);
            }
        }

View Code