ic form指令 - Julienedies/brick GitHub Wiki

使用

<section ic-ctrl="loginCtrl">

            <form action="#" method="post" target="_top" class="hc form" ic-form="login">

                <div class="inline hl">
                    <div ic-form-field-container="id" class="mt-15">
                        <input type="text"
                               name="id"
                               class="input-text-md"
                               placeholder="用户名/手机号码/电子邮箱"
                               ic-form-field="id"
                               ic-field-rule="id||phone||email"
                               ic-field-err-tip="请输入有效的用户名/手机号码/电子邮箱."
                                />

                        <p class="tip" ic-role-field-err-tip="id">用户名长度大于5</p>
                    </div>

                    <div class="mt-15">
                        <input type="password"
                               name="password"
                               class="input-text-md"
                               placeholder="密码"
                               ic-form-field="password"
                               ic-field-rule="password"
                               ic-field-err-tip="请输入正确的密码，密码长度大于5"
                               role="">

                        <p class="tip" ic-form-field-err-tip="password">密码长度大于5</p>
                    </div>

                    <div class="mt-15">
                        <input type="text"
                               class="input-text-md"
                               placeholder="请输入5位数字"
                               ic-form-field="code"
                               ic-field-rule="code"
                               ic-field-err-tip="占位符显示的是错误的，请输入6位数字."
                                />

                        <p class="tip" ic-form-field-err-tip="code">请在占位符显示的数字基础上加1.</p>
                    </div>

                    <div class="mt-15">
                        <input type="text"
                               class="input-text-md"
                               placeholder="请输入js"
                               ic-form-field="f"
                               ic-field-rule="f"
                               ic-field-err-tip="请输入js."
                                />
                    </div>

                    <div class="mt-10">
                        <label><input type="checkbox"
                                      name="remember"
                                      value="1"
                                      onclick="this.value=this.checked?1:0;"
                                      ic-form-field="remember"
                                      checked> 记住我</label>
                    </div>

                    <div class="mt-10">
                        <button type="button"
                                class="btn btn-1-1 btn-md-1-1"
                                ic-form-submit="login"
                                ic-submit-action="http://www.baidu.com"
                                ic-submit-method="get"
                                ic-submit-before="before"
                                ic-submit-on-done="done"
                                ic-submit-on-fail="failed"
                                ic-submit-on-always="always">点击测试提交
                        </button>
                    </div>

                </div>
            </form>

        </section>

查看example

相关选项

ic-form @定义了一个dom元素为表单widget容器。

相关dom元素选项

  • ic-form-field @定义了该dom元素为一个表单字段。

  • ic-field-rule @定义了表单字段的验证规则。可选的值有预设的关键字，正则，函数调用,并且可以使用||和&&语法。

  • ic-field-err-tip @定义了表单字段验证失败提示文字

  • ic-form-field-container @可选，定义了一个表单字段容器，子表单字段验证失败的情况下，会添加一个error类。

  • ic-form-field-err-tip @可选，定义了该dom元素为错误提示容器。当验证失败的时候，会显示表单字段验证失败提示文字。

  • ic-field-placeholder @。

  • ic-form-submit @定义了该dom元素为表单提交按钮。

  • ic-submit-action @定义了表单提交按钮的动作。可以是服务url地址，例如ic-submit-action="/user/login"或者是一个回调函数，例如ic-submit-action="login()"

  • ic-submit-method @定义了ajax表单提交的类型，如’post，get，put，delete..';默认为post。可以通过brick.set方法定义全局默认提交类型。

  • ic-submit-data-type @定义了ajax接受的响应数据类型。默认为JSON，可以通过brick.set方法修改默认值。

  • ic-submit-before @定义了ajax提交前的回调函数。所有表单字段封装成的对象会做为参数传入。该函数返回false，会中止ajax提交。可选。

  • ic-submit-on-done @定义了ajax提交成功回调函数。

  • ic-submit-on-fail @定义了ajax提交失败回调函数。

  • ic-submit-on-always @定义了ajax提交完成后的回调函数，无论ajax成功或失败。

  • ic-role-loading @可选，定义了该dom元素为loading提示,ajax请求时会显示。

js接口

有[ic-form-submit]属性的元素会有一个icVerify方法，用于表单字段校验。 校验通过返回1，失败返回0；

var isOk = $('[ic-form-submit=login]').icVerify();

//自定义验证规则
brick.set('ic-form.rule',{
           code:/\d{6}/,
           f: function(input){
               if(!input) return '表单字段f不能为空。';
               if(input === 'js') return true;
               return '提示：必须输入js';
           }
    });

//通过覆盖以下两个jQuery扩展实现自定义loading显示
$.fn.icSetLoading = function(){
    //实现代码
}
$.fn.icClearLoading = function(){
    //实现代码
}

事件

//表单验证失败会在ic-form元素上面触发ic-form.error事件，验证失败的ic-form-field元素会触发ic-form-field.error事件，验证通过会触发ic-form-field.ok事件，可以自定义事件处理函数

$('[ic-form=login]').on('ic-form.error', function(e, msg){
    console.info(this, e, msg);
});

$('[ic-form-field=password]').on('ic-form-field.error', function(e, msg){
    console.info(this, e, msg);
});

样式

有ic-form-field-err-tip属性的dom元素会在相关的表单字段验证失败后添加error类。

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️