WEB表单数据验证及提交插件

本插件可以方便地验证表单的输入，自由控制表单是否提交等。

【正文】

一   js

1.1       js源码

 

    var layer = window.layer

, device = deviceFn()

 

 

 

, MOD_NAME = 'form', ELEM = '.lf-form'

 

, Form = function () {

    this.config = {

        verify: {

            required: [

              /[\S]+/

              , '必填项不能为空'

            ]

          , phone: [

            /^1\d{10}$/

            , '请输入正确的手机号'

          ]

          , email: [

            /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/

            , '邮箱格式不正确'

          ]

          , url: [

            /(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/

            , '链接格式不正确'

          ]

          , number: [

            /^\d+$/

            , '只能填写数字'

          ]

          , date: [

            /^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/

            , '日期格式不正确'

          ]

          , identity: [

            /(^\d{15}$)|(^\d{17}(x|X|\d)$)/

            , '请输入正确的身份证号  

        //开始校验

        Layeach(verifyElem, function (_, item) {

            var othis = $(this), ver = othis.attr('lf-verify').split('|');

            var tips = '', value = othis.val();

            othis.removeClass(DANGER);

            Layeach(ver, function (_, thisVer) {

                var isFn = typeof verify[thisVer] === 'function';

                if (verify[thisVer] && (isFn ? tips = verify[thisVer](value, item) : !verify[thisVer][0].test(value))) {

                    layer.msg(tips || verify[thisVer][1], {

                        icon: 5

                      , shift: 6

                    });

                    //的独立弹窗提示插件以上

1.2       HTML部分

包含form表单的div加上class：lf-form。以需要验证的项用lf-verify，要使用复数的验证，用|隔开即可。

表单的提交按钮处，若需要额外控制表单是否能提交，可以加上lf-filter，名字自定义，内容2.2会详细描述。还有加上lf-submit。最后要在页面的css部分加上一个样式：.learnfuture_dangerous:focus{border:1px solid #FF5722!important}，用于验证不通过的文本框边框的变色。

 

二   使用方法

2.1       HTML部分

包含form表单的div加上class：lf-form。以需要验证的项用lf-verify，要使用复数的验证，用|隔开即可。

表单的提交按钮处，若需要额外控制表单是否能提交，可以加上lf-filter，名字自定义，内容2.2会详细描述。还有加上lf-submit。最后要在页面的css部分加上一个样式：.learnfuture_dangerous:focus{border:1px solid #FF5722!important}，用于验证不通过的文本框边框的变色。

2.2       Js部分

var form = lfForm();

自定义验证如下

需要在js代码里先验证，可以这样写

提交前的是否提交控制

用这个功能，submit按钮要记得加上 lf-filter=”regist”。

form.on(‘submit(regist)’)里的regist字样是自定义的，与lf-filter属性对应即可。