Jquery validform

 
一、validform是什么？
           validform是一款智能的表单验证js插件，它是基于jQuery库与css,我们只需要把表单对象放入，
            就可以对整个表单数据进行验证，而不需要每次验证都要写个js脚本。
 
        
 
二、validform优点
            1. 自定义你想要的信息提示效果 （弹窗提示 ----  右侧提示）                 
            2. 智能的错误信息提示 
                
           3. 可以指定需要验证的和不需要验证的区域
                    例如
                            ignore
                                    绑定了ignore="ignore"的表单元素，在有输入时， 会验证所填数据是否符合datatype所指定数据类型，
                                    没有填写内容时则会忽略对它的验证；
           4. 基于form对象操作 
        5.validform与js脚本的区别
                                validform是对js进行了封装
                       js脚本验证字符串类型：6到18位字符串 ：   /^[\u4E00-\u9FA5\w\.\s]{6,18}$/ 
                                                还要if进行判断，使用起来非常麻烦
                       而validform 直接在需要验证的input框中使用 datatype="s6-18"
 
 
 
 
<!--引入css  -->
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/validform/css/style.css" type="text/css" media="all" />
<!-- 引入jquery -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery/jquery-1.7.js"></script>
<!--引入validform  -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/validform/validform-js/Validform_v5.3.2(1)/Validform_v5.3.2_ncr_min.js"></script>
 
 
　　//初始化：
                       
    $(function(){
　　　　 var demo=$(".demoform").Validform({
        });
    })

 

 
三、使用步骤
            1、引入css,js
            2、定义载体
            3、初始化                
                 
    
datatype
           
  传入自定义datatype类型，可以是正则，也可以是函数

            *：检测是否有输入，可以输入任何字符，不留空即可通过验证；
            *6-16：检测是否为6到16位任意字符；
            n：数字类型；
            n6-16：6到16位数字；
            s：字符串类型；
            s6-18：6到18位字符串；
            p：验证是否为邮政编码；
            m：手机号码格式；
            e：email格式；
            url：验证字符串是否为网址。
            中文需要自己定义
            <input datatype="n2-6">
 
 
datatype函数（初始化参数）
          
           
 如果数据类型与底层封装的数据类型相同 那么我们自定义的优先级大于底层封装
            datatype:{
                       "m":/^[1][1,3,5,8,4]\d{9}$/,    
                        "china2-6":/^[\u4e00-\u9fa5]{2,6}$/,    
              }

 
nullmsg （null提示）
            当表单元素值为空时的提示信息，不绑定，默认提示"请填入信息！"。
            如：nullmsg="请填写用户名！"
            <input datatype="n2-6" nullmsg="请填写密码">
 
errormsg（错误提示）
            输入内容不能通过验证时的提示信息，默认提示"请输入正确信息！"。
            如：errormsg="用户名必须是2到4位中文字符！"
             <input datatype="n2-6" errormsg="请填写2-6位数字密码">

 
 

recheck（二次验证，保证输入的一致性）

        常用于：确认密码
               recheck就是用来指定需要比较的另外一个表单元素。
             
 如：密码文本中name="pw" 那么我们确认密码文本中绑定上 recheck="密码文本中name的值"                
                密码<input datatype="n2-6" name="pw" errormsg="请输入2-6位数字" nullmsg="请填写密码">
                确认密码<input datatype="n2-6" recheck="pw" errormsg="俩次密码不一致" nullmsg="请填写密码1">
               
 
tiptype（初始化参数）
                可以为1、2 、3、4和 自定义函数。1 表示弹出提示框，是默认值（
使用1和3就够了
）
                1=> 自定义弹出框提示；
（常用）

                2=> 侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；
                                    （该元素的父节点的下一个节点中显示）没什么卵用
                3=> 侧边提示(会在当前元素的siblings（相邻）对象中查找显示提示信息的对象，表单以ajax提交时会弹出自定义提示框显示表单提交状态)；
                                   （该元素的相邻元素）（常用）
                4=> 侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象，表单以ajax提交时不显示表单的提交状态)；
                                   （该元素的父节点的下一个节点中显示）
没什么卵用
                                                
 
 
 
label（html中的<label>）
                意思就是聚焦 将label中所有的内容聚焦在一起作为一个整体
 
 
tip   
            表单里经常有些文本框需要默认就显示一个灰色的提示文字，当获得焦点时提示文字消失，失去焦点时提示文字显示。
            tip属性就是用来实现这个效果。它和altercss搭配使用。
             如<input type="text" value="默认提示文字" tip="默认提示文字" altercss="任意写" />
                    value与tip的值必须是相同的
 
altercss   

           它需要和tip属性配合使用，altercss指定的样式名，会在文本框获得焦点时被删除，没有输入内容而失去焦点时重新加上。



btnSubmit（提交）（初始化参数）
                指定当前表单下的哪一个按钮触发表单提交事件，如果表单下有submit按钮时可以省略该参数。
                如：
btnSubmit:"#sub"
  
是该表单下要绑定点击提交表单事件的按钮；

btnReset（重置）（初始化参数）
                 如：btnReset:"#res"是该表单下要绑定点击重置表单事件的按钮;
 
 

ajaxurl：（进行实时验证）

        使用 ajaxurl 时首先会对我们定义的datatype进行验证，只有验证通过后才会请求方法数据。

           前台到后台：

                        前台：

                                在需验证的文本中绑定 ajaxurl 属性 后跟上路径，当我们失去光标时会直接请求我们定义的方法

                        后台：

                          

 

    ajaxurl指定的方法可以接收到Post方式传过来的两个值，后台接收分别是param和name（后台定义的属性驱动），param是该元素的值.

 

                               name是该元素的name属性值。（可忽略）

                   后台往前台：

                            后台：

                                    使用ajaxurl后台往前台传值须是含有status（状态） info（提示信息）值的json数据！

   

                                     status的值 成功为小写字母 "y" 失败为小写字母 "n" （不然样式会出错）

                            前台会自动识别

                
 <input type="text" ajaxurl="validformAction!toValidform.action" name="valid.ename" datatype="china">

                

beforeSubmit()（初始化参数）
          函数内可以调用js 进行判断等等
                在表单验证通过，提交表单数据之前执行的函数
                函数return false的话表单将不会提交;
                    如：
                                beforeSubmit:function(){
                                insertEmpInfo();//调用增加方法（ajax）
                                //return false;
                         }, 
 
完整demo:
$(function () {

    $("#formID").Validform({ //验证
        btnSubmit: "#submitBtn",
        tiptype: 2,
        tipSweep: true,
        beforeSubmit: function () {
            saveData();
            return false;
        }
    });


    layui.use('upload', function () {
        var $ = layui.jquery
        , upload = layui.upload;

        upload.render({
            elem: '#test1'
              , url: '/WebAccount/UploadAnKangMa/'
              , multiple: true
              , accept: 'file' //普通文件
              , exts: 'jpg|jpeg|gif|png|bmp'
              , size: 1024 * 1
              , before: function (obj) {
                  //预读本地文件示例，不支持ie8
                  obj.preview(function (index, file, result) {
                      $('#demo1').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
                  });
              }
              , done: function (res) {
                  if (res.code != 200) {
                      layer.alert(res.msg)
                      return false;
                  }
                  $('#hidPic').val(res.fileName);
                  var demoText = $('#demoText1');
                  demoText.html('<span style="color: #FF5722; margin-left:10px;">上传成功</span>');

              }
        });
    });


});

function saveData() {
    var index = layer.load(0);
    $.ajax({
        type: "Post",
        url: "/WebAccount/Participants/",
        data: $('#formID').serialize(),
        dataType: "json",
        success: function (data) {
            layer.close(index);
            if (data.Ret == 0) {
                layer.alert(data.Msg, {
                    title: false,
                    shift: 4
                });
            }
            else {
                layer.alert(data.Msg, {
                    title: false,
                    shift: 4
                }, function () {
                    parent.location.reload();                    
                });
            }
        }
    });
}
 
posted @ 2017-05-22 23:34  查克拉的觉醒  阅读(1361)  评论(0)  编辑  收藏  举报