前端 Validform.js属性,用法及Ajax提交简介

下载与引用Validform.js及其css

链接:https://pan.baidu.com/s/1GFg79JuIDoSdeoO8HjKFhA
提取码:bxtc

将下载的文件夹中的三个静态文件(如图)放入你自己指定目录下。

由于Validfrom基于jQuery,所以需要先引入jQuery。

<script type="text/javascript" src="/validform_v5.3.2/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/validform_v5.3.2/js/Validform_v5.3.2_min.js" ></script>

还要引用Validform自带的css

<link rel="stylesheet" href="/validform_v5.3.2/css/style.css" />

请查看下载文件中的style.css,把里面Validform必须部分除外的全部注释掉(文件里这个注释 "/*==========以下部分是Validform必须的===========*/" 之后的部分是必须的)。之前发现有部分网友把整个style.css都引用在了页面里,然后发现样式冲突了。

属性绑定

红框中是用于Validform验证的HTML元素属性。

启动验证

直接调用Validform()方法。

$('#userLogin').Validform({tiptype: 3})   // #userLogin是form表单id

ajax提交实例

$('#userLogin').Validform({
    tiptype: 3,
    
    beforeSubmit: function (form) {
        let postData = $('#userLogin').serializeArray();
        let loginUrl = $('#userLogin').attr('action');
        let indexUrl = SCOPE.indexUrl;
        
        $.ajax({
            url: '/public/bssystem/Login/login',    //url直接写明确,也可以是框架解析的url
            data: postData,
            type: 'post',
            timeout: 1000,
            cache: false,
            success: function (result) {
                // console.log(result);
                if(result.code===1){
                    layer.alert('登录成功,正在进入...', {title: '提示', time: 2000, btn: '', end: function () {
                       location.assign('/public/bssystem/Index/index');   //url直接写明确,也可以是框架解析的url
                    }});
                }else {
                    if (result.code === -10) {
                        layer.alert(result.msg, {title: '警告'});
                    } else if (result.code === -20) {
                        layer.alert(result.msg, {title: '警告'});
                    } else if (result.code === -30) {
                       layer.alert(result.msg, {title: '警告'});
                    } else if (result.code === -40) {
                        layer.alert(result.msg, {title: '警告'});
                    }
                    else {
                        layer.alert('未知错误', {title: '错误'});
                    }

                }
            },
            beforeSend: function (xhr) {
                $('#loginBtn').html('&nbsp;正&nbsp;&nbsp;在&nbsp;&nbsp;登&nbsp;&nbsp;录&nbsp;.&nbsp;.&nbsp;.');

            },
            complete: function (xhr) {
                $('#loginBtn').html('&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;');

            },
            error: function (xhr) {
                // console.log(xhr);
                if(xhr.status==0){
                    layer.alert('系统繁忙,稍后再试~~');
                    return;
                }
                layer.alert(xhr.status+': '+xhr.statusText);

            }

        });

        return false;    //返回false则不自动提交表单

    }

});

常用HTML属性

以下是用于Validform验证的常用属性,绑定在需要验证的HTML属性上。

1.datatype: 数据类型
    *:检测是否有输入,可以输入任何字符,不留空即可通过验证;
    *6-16:检测是否为6到16位任意字符;
    n:数字类型;
    n6-16:6到16位数字;
    s:字符串类型,字母、数字、下划线;
    s6-18:6到18位字符串;
    p:验证是否为邮政编码;
    m:手机号码格式;
    e:email格式;
    url:验证字符串是否为网址;
  自定义: datatype支持直接js正则表达式,如datatype="/\w{6,}/i"表示至少6位字符且忽略大小写。
2.nullmsg: 当表单元素值为空时的提示信息,不绑定,默认提示"请填入信息!" 3.sucmsg: 成功提示,若要不提示内容请赋值' '空格 4.errormsg: 错误信息 5.ignore: 没有输入内容不验证 7.recheck="password1",检查当前元素的值跟是否跟该表单下name为"password1"的元素值相同 8.ajaxurl: 指定ajax实时验证的后台文件的地址

常用方法属性

以下是用于Validform({ })方法里的常用属性与方法,以对象的形式传入。

1).btnSubmit
 指定当前表单下的哪一个按钮触发表单提交事件,如果表单下有submit按钮时可以省略该参数。

2).btnReset
 绑定点击重置表单事件的按钮;

3).tiptype
 可用的值有:1、2、3、4和function函数,默认为1。 3、4是5.2.1版本新增
 1=> 自定义弹出框提示;
 2=> 侧边提示(会在当前元素的父级的next对象的子级查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);
 3=> 侧边提示(会在当前元素的siblings对象中查找显示提示信息的对象,表单以ajax提交时会弹出自定义提示框显示表单提交状态);
 4=> 侧边提示(会在当前元素的父级的next对象下查找显示提示信息的对象,表单以ajax提交时不显示表单的提交状态);

5).beforeCheck function(curform){}
 在表单提交执行验证之前执行的函数,curform参数获取到的是当前表单对象。
 函数return false的话将不会继续执行验证操作;

6).beforeSubmit function(curform){}
 在表单验证通过,提交表单数据之前执行的函数,data参数是当前表单对象。
 函数return false的话表单将不会提交;

7).callback function(data){}
 在使用ajax提交表单数据时,数据提交后的回调函数。返回数据data是Json对象:
 函数return false的话表单将不会提交;

效果截图

 

  至此。转载请注明出处,记得扫码打赏支持哦,谢谢! 

 

posted @ 2021-03-06 15:31  失恋的蔷薇  阅读(499)  评论(0编辑  收藏  举报