【积累】validate验证框架的使用

validate验证框架的使用:用验证框架可以很方便的验证前端页面输入的内容可以自定义验证方法

内容:0:环境搭建 1:基础用法 2:自定义用法



0:基本环境的搭建

  0.1:下载js文件

  0.2:引入js文件

  0.3:使用(废话)

1:基础用法

利用自带验证验证输入内容

jsp页面:

<form action="/activeAccount" id="registerform"method="post">

    <div>
        <label>用户账号 :</label>
        <input type="text" placeholder="输入账号" name="account" id="r_account"/>
    </div>
    <div class="inputwrapper clefix">
        <label>登录密码 :</label>
        <input type="password" placeholder="输入密码" name="password" id="r_password"/>
    </div>
    <div class="inputwrapper">
        <label>重复密码 :</label>
        <input type="password" placeholder="再次输入密码" name="passwords" id="r_passwords"/>
    </div>
    <div class="agreewrapper">
        <input type="checkbox" id="readit" name="readit"/> 我已阅读并同意 <a href="#">《网站服务协议》</a>
    </div>

    <!-- 这里用的是submit 如果用button就无法运行了-->
    <input type="submit" class="registerBtn commonBtn" value="立即注册"/>

</form>

 js页面:

//这里的registerform是form的id,不能用点击的那个按钮的id
$(‘#registerform‘).validate({

    //这里配置的是错误信息输出的位置,可以根据需要来写
    //我这里用的是layer,可以换成其他的
    errorPlacement: function(error, element) {
        layer.tips(error.text(), element, {
            tips: [2,seajs.data.vars.tipcolor],
            tipsMore: true
        });
    } , 

    //验证规则
    rules: {
        //这是需要验证的内容的name 一定要是name
        account: {
            //这里是验证的规则 以key,value的形式写的
            //required 验证的是非空
            required: true,
        },
        password: {
            required: true,
            //rangelength 验证的是输入的内容的长度
            rangelength:[6,16],
        },
        passwords: {
            required: true,
            //equalTo 与...相等 后面的值是...的id值
            equalTo: "#r_password",
        },
        verify: {
            required: true,
        },
        readit: {
            required: true,
        },

    },
    //提示信息
    messages: {
        //这里同验证规则,也是name
        account:{
            //这里是提示的信息,一样以key,value的形式写的
            required:‘请输入帐号‘,
        },
        password: {
            required: "请输入密码",
            rangelength:‘密码长度在6-16之间‘,
        },
        passwords: {
            required: "请再次输入密码",
            equalTo: "两次密码输入的不一致",
        },
        verify: {
            required: "请输入验证码",
        },
        readit: {
            required: "请勾选用户协议",
        },
    },
    //当表单验证成功并提交时执行
    submitHandler:function(form){
        //里面写要执行的函数,比如保存数据之类的
    }

});

常用的自带验证规则:
  required:true          必输字段
  remote:”check.php”      使用ajax方法调用check.php验证输入值
  email:true            必须输入正确格式的电子邮件
  url:true             必须输入正确格式的网址
  date:true            必须输入正确格式的日期
  dateISO:true           必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
  number:true          必须输入合法的数字(负数,小数)
  digits:true            必须输入整数
  creditcard:           必须输入合法的信用卡号
  equalTo:”#id”             输入值必须和#id相同
  accept:             输入拥有合法后缀名的字符串(上传文件的后缀)
  maxlength:5            输入长度最多是5的字符串(汉字算一个字符)
  minlength:10           输入长度最小是10的字符串(汉字算一个字符)
  rangelength:[5,10]       输入长度必须介于 5 和 10 之间的字符串”)(汉字算一个字符)
  range:[5,10]           输入值必须介于 5 和 10 之间
  max:5             输入值不能大于5
  min:10             输入值不能小于10

2:自定义用法

  自带的定义规则无法满足验证需求的时候,可以利用jQuery.validator.addMethod()方法

js页面: 

//自定义验证方法  "isexist"是这个方法的名字
    jQuery.validator.addMethod("isexist", function(value,element) {

        //这里写验证方法
        //最后返回一个boolean类型的值
        //如果是true就是验证通过,如果是false就是验证未通过
        return true;

    }, "这里写默认提示");

 一个写好的验证是否已经注册过的例子:

  这里面用了layer弹窗,不过不要在意那些细节...只是一个例子...

            //验证方法 验证帐号是否已经被注册
            jQuery.validator.addMethod("isexist", function(value,element) {
                var type = $("#type").val();
                $.ajax({
                    type : "post",
                    url : "/checkAccountIsExist",
                    data : {account:value,type:type},
                    dataType : "json",
                    success : function(data){
                        if(data == 0) {
                            return true;
                        } else {
                            layer.confirm(‘该帐号已经被注册,现在去登录?‘, {
                                  btn: [‘前去登录‘,‘留在这里‘]
                            }, function(){
                                window.location.href="/userlogin";
                            }, function(){
                                layer.closeAll();
                                return false;
                            });
                        }
                    }
                });
            }, "该帐号已经被注册");

 定义完成后就可以在验证规则中直接使用该方法了。

 大致结果:

时间: 2024-09-30 14:57:03

【积累】validate验证框架的使用的相关文章

jQuery Validate验证框架详解

jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src

【转】jQuery Validate验证框架详解

jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src

jQuery Validate验证框架详解(转)

jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type="text/javascript" src="<%=path %>/validate/jquery-1.6.2.min.js"></script> <script type="text/javascript" src

jQuery Validate验证框架使用

jQuery Validate使用前的准备,需要下载相应js包括:1.jquery.validate.min.js.2.additional-methods.min.js. 当然必不可少的js jQuery文件. 引入上面的js后开始使用,jv(jquery validate以下叫jv)有两种用法,先看第一种: 第一种就是直接在控件上用class的方式直接用,如:class="email",这种方法如果想验证长度,好像不起效果,也可能是没研究出来. jv的提示语默认是英文的,我们可以用

struts2(三)---struts2中的服务端数据验证框架validate

struts2为我们提供了一个很好的数据验证框架–validate,该框架可以很方便的实现服务端的数据验证. ActionSupport类提供了一个validate()方法,当我们需要在某一个action中进行数据验证时,可以重写这个方法.数据验证往往是在客户端向服务端提交表单信息时进行的,比如execute方法负责处理表单信息并返回相应的结果,在此之前,validate会先对提交的表单信息进行验证: ->验证通过:会执行execute的相应操作. ->验证失败: –>定义了失败后的re

【狂人小白】轻量级验证框架 Validation.FO 的入门与使用

Validation.FO 使用指南 框架说明 这是一个验证框架,并且是一个 独立的验证框架 ,不依赖与其他已有的框架: 可以自由的嵌入到其他框架,比如Spring.Struts等流行框架,但实质来说他是独立的,所以无所谓嵌入到哪里,如果需要在GUI桌面应用中,也是完美的: 配置简单,可自由扩展验证器,实际只要实现IValidator接口,以及在rules.fo.xml中添加相关的配置即可: 支持Spring接口 使用过程中,你会感觉好像只用了 IValidateService.validate

前台验证框架jQuery-Validation-Engine

github地址:https://github.com/posabsolute/jQuery-Validation-Engine 一个中文文档地址:http://code.ciaoca.com/jquery/validation_engine/ 普通的验证就不在说了,参考文档以及很明了了. 这里写一个field的ajax验证吧. demo 实现功能是一个简单的唯一性的验证,通过jQuery-Validation-Engine的Ajax提交后台进行验证后返回信息. 首先,给input class

数据验证框架 Apache BVal 简介

Apache BVal (源码)是实体数据验证 Java Bean Validation 的参考实现.Apache BVal 提供了 JSR 303 规范中所有内置 constraint 的实现,用于对 Bean 中的字段的值进行约束定义.描述和验证.若说 JSR 规范大渣可能还不清楚,但做过 POJO 的 Hibernate Validator 注解的朋友就知道是啥,--那为什么不使用主流的 Hibernate Validator 呢?因为单纯一个压缩包都已经 13mb 了(尽管可以有文档.源

struts之验证框架

对于格式的验证,我们可以自己写js来验证,当然struts已经封装了验证框架,下面说下我的学习哦. 验证框架分为了服务器端的验证和前台的xml配置验证(这里相当于js),下面先说下服务器端的验证. 1:由于action类继承了ActionSupport这个类,其中这个类又实现了Validateable, ValidationAware接口, 所以我们可以直接的重写validate()这个方法. 下面是代码: public void validate(){ if(userName.length()