表单 - AuxUI - 模块化前端UI框架

需要加载form模块，可通过下列方式加载

//加载模块
auxui(['form'], function (){

    //加载后执行一些动作和事件处理
    
});

水平排列单选框和多选框

<div class="bs-block">
    <input type="radio" value="1" name="radio" title="单选框" checked="">
    <input type="radio" value="2" name="radio" title="单选框">
    <input type="radio" value="5" name="radio" title="被禁用单选框" disabled="">
    <input type="checkbox" value="1" name="checkbox" title="多选框">
    <input type="checkbox" value="1" name="checkbox" title="多选框">
    <input type="checkbox" value="2" name="checkbox" title="被禁用多选框" disabled="">
</div>
<script type="text/javascript">
auxui(['form'], function (example){
    $('.bs-inline input').icheck();
}); 
</script>

内联单选框和多选框

通过添加data-display="inline"属性，转换成内联单选框和多选框

<div class="bs-inline">
    <input type="radio" value="1" name="radio1" data-display="inline" title="单选框" checked="">
    <input type="radio" value="2" name="radio1" data-display="inline" title="单选框">
    <input type="radio" value="5" name="radio1" data-display="inline" title="被禁用单选框" disabled="">
    <input type="checkbox" value="1" name="checkbox1" data-display="inline" title="多选框">
    <input type="checkbox" value="1" name="checkbox1" data-display="inline" title="多选框">
    <input type="checkbox" value="2" name="checkbox1" data-display="inline" title="被禁用多选框" disabled="">
</div>
<script type="text/javascript">
auxui(['form'], function (){
    $('.bs-inline input').icheck();
}); 
</script>

监听单选框和多选框事件

<div class="bs-inline">
    <input type="radio" value="1" name="radio1" data-display="inline" title="单选框" checked="">
    <input type="radio" value="2" name="radio1" data-display="inline" title="单选框">
    <input type="radio" value="5" name="radio1" data-display="inline" title="被禁用单选框" disabled="">
    <input type="checkbox" value="1" name="checkbox1" data-display="inline" title="多选框">
    <input type="checkbox" value="1" name="checkbox1" data-display="inline" title="多选框">
    <input type="checkbox" value="2" name="checkbox1" data-display="inline" title="被禁用多选框" disabled="">
</div>
<script type="text/javascript">
auxui(['form'], function (){
    $('.bs-inline input').icheck();
    //监听事件
    $(document).on('icheck', function (e,data) {
        console.log(data);
        console.log(data.elem);//得到radio/checkbox原始DOM对象
        console.log(data.othis);//得到美化后的DOM对象
        console.log(data.checked);//当前项是否被选中
        console.log(data.value);//得到被选中的值
        console.log(data.text);//得到被选中的文本
    });
}); 
</script>

选择框

<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">单行选择框</label>
        <div class="col-sm-10">
            <select name="select1" class="select1" data-toggle="single">
                <option value="">请选择</option>
                <option value="1" disabled="">写作</option>
                <option value="2" selected>阅读</option>
                <option value="3">游戏</option>
                <option value="4" disabled>旅游</option>
                <option value="5">歌舞</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">分组选择框</label>
        <div class="col-sm-10">
            <select name="select2" class="select1" data-toggle="grouping">
                <option>请选择问题</option>
                <optgroup label="我的学历是">
                    <option value="高中">高中</option>
                    <option value="中专" disabled>中专</option>
                    <option value="大学" >大学</option>
                </optgroup>
                <optgroup label="我的爱好">
                    <option value="旅游">旅游</option>
                    <option value="游泳" selected>游泳</option>
                    <option value="泡网" disabled>泡网</option>
                </optgroup>
                <optgroup label="你是怎么找到我的">
                    <option value="来自百度" disabled>来自百度</option>
                    <option value="QQ好友">QQ好友</option>
                    <option value="微信推荐">微信推荐</option>
                </optgroup>
            </select>
        </div> 
    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">搜索选择框</label>
        <div class="col-sm-10">
            <select name="select1" class="select1" data-toggle="search">
                <option value="">直接选择或搜索选择</option>
                <option value="1">form</option>
                <option value="2">alert</option>
                <option value="3">element</option>
                <option value="4">tpl</option>
                <option value="5">upload</option>
                <option value="6">date</option>
                <option value="7">page</option>
                <option value="8">flow</option>
                <option value="9">util</option>
                <option value="10">code</option>
                <option value="11">tree</option>
                <option value="12">edit</option>
                <option value="13">nav</option>
                <option value="14">tab</option>
                <option value="15">table</option>
                <option value="16">select</option>
                <option value="17">checkbox</option>
                <option value="18">switch</option>
                <option value="19">radio</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">联动选择框</label>
        <div class="col-sm-10">
            <select name="select1" class="select1" data-style="inline">
                <option value="">请选择省</option>
                <option value="1">江苏</option>
                <option value="2">浙江</option>
            </select>
            <select name="select1" class="select1" data-style="inline">
                <option value="">请选择市</option>
                <option value="1">苏州</option>
                <option value="2">南京</option>
                <option value="4">无锡</option>
            </select>
            <select name="select1" class="select1" data-style="inline">
                <option value="">请选择县</option>
                <option value="1">太平镇</option>
                <option value="2">平江</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">单项选择框</label>
        <div class="col-sm-10">
            <select name="select1" class="select1" data-toggle="singlelist">
                <option value="江苏">江苏</option>
                <option value="浙江" selected="">浙江</option>
                <option value="湖南" disabled>湖南</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">多项选择框</label>
        <div class="col-sm-10">
            <select name="select1" multiple class="select1" data-toggle="multlist">
                <option value="modal">modal</option>
                <option value="dropdown">dropdown</option>
                <option value="tab">tab</option>
                <option value="element" selected>element</option>
                <option value="form" disabled>form</option>
                <option value="form">alert</option>
                <option value="form" selected>popover</option>
                <option value="form">collapse</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">多项选择框</label>
        <div class="col-sm-10">
          <select name="select1" multiple class="select" data-search="true" data-toggle="multlist_search">
              <option value="modal">modal</option>
              <option value="dropdown">dropdown</option>
              <option value="tab">tab</option>
              <option value="element" selected>element</option>
              <option value="form" disabled>form</option>
              <option value="form">alert</option>
              <option value="form" selected>popover</option>
              <option value="form">collapse</option>
          </select>
        </div>
    </div>
    
</form>
<script type="text/javascript">
auxui(['form'], function (){
    $('.select1').iselect();
    $(document).on('select_change', function (e,data) {
        console.log(data);
    });
}); 
</script>

单行选择框

分组选择框

搜索选择框

联动选择框

单项选择框

多项选择框

尺寸大小

通过添加属性data-size可改变控件大小，可选：xs(最小)，sm(一般),lg(最大)，注意：单选列表和多选列表不被支持。

<form class="form-horizontal">
    <div class="form-group">
        <label for="inputEmail3" class="col-sm-2 control-label">单行选择框</label>
        <div class="col-sm-10">
            <select name="select1" class="select1" data-size="xs" data-toggle="single">
                <option value="">请选择</option>
                <option value="1" disabled="">写作</option>
                <option value="2">歌舞</option>
            </select>
            <select name="select1" class="select1" data-size="sm" data-toggle="single">
                <option value="">请选择</option>
                <option value="1" disabled="">写作</option>
                <option value="2">歌舞</option>
            </select>
            <select name="select1" class="select1" data-toggle="single">
                <option value="">请选择</option>
                <option value="1" disabled="">写作</option>
                <option value="2">歌舞</option>
            </select>
            <select name="select1" class="select1" data-size="lg" data-toggle="single">
                <option value="">请选择</option>
                <option value="1" disabled="">写作</option>
                <option value="2">歌舞</option>
            </select>
        </div>
    </div>
</form>

监听选择框事件

    $(document).on('select_change', function (e,data) {
        console.log(data);
        console.log(data.elem);//得到select原始DOM对象
        console.log(data.othis);//得到美化后的DOM对象
        console.log(data.selected);//当前项是否被选中
        console.log(data.value);//得到被选中的值
        console.log(data.text);//得到被选中的文本
    });

表单验证

我们对表单的验证进行了非常巧妙的支持，大多数时候你只需要在表单元素上加上 data-verify="" 属性值即可。如：

<input type="text" data-verify="email"> 
 
<!-- 还同时支持多条规则的验证，如下： -->
<input type="text" data-verify="required|phone|number">

上述中required|phone|number为我们提供的内置校验规则，内置校验规则分别如下：

名称	描述
required	必填项
mobile	手机号
number	数字
identity	身份证
integer	整数
letter	字母
numberLetter	数字+字母
email	电子邮件
qq	QQ号码
url	超级链接
phone	电话号码
postalCode	邮政编码
alphaDash	字母+数字+下划线+破折号
chs	汉字
chsAlphaNum	汉字+字母+数字
chsDash	汉字、字母、数字和下划线及破折号
ip	IP
date	日期格式[YYYY-MM-DD]
dateTime	日期时间格式[YYYY-MM-DD HH:MM:SS]
time	时间格式[HH:MM:SS]

实例

如果验证失败，自动阻止默认行为，使表单无法进行提交

<!-- html -->
<form class="form-horizontal" id="myForm1" action="demo.php" method="post">
    <div class="form-group">
        <label for="input1" class="col-sm-2 control-label">单位名称</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input1" data-verify="required|title" placeholder="单位名称">
        </div>
    </div>
    <div class="form-group">
        <label for="input1" class="col-sm-2 control-label">电子邮件</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input1" data-verify="required|email" placeholder="电子邮件">
        </div>
    </div>
    <div class="form-group">
        <label for="input2" class="col-sm-2 control-label">通讯地址</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" id="input2" data-verify="required" placeholder="通讯地址">
        </div>
    </div>
    <div class="form-group">
        <label for="input2" class="col-sm-2 control-label">备注</label>
        <div class="col-sm-10">
            <textarea rows="8" class="form-control" placeholder="备注"></textarea>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </div>
</form>
<!-- js -->
<script type="text/javascript">
auxui(['form'], function (){
        
    $('#myForm1').verify({

        //自定义验证规则
        title: function(value, item){ //value：表单的值、item：表单的DOM对象
            if(value.length < 6){
                alert('标题不能小于6个字符');
                return false;   //错误时必须返回 false
            }
            if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                alert('标题不能有特殊字符');
                return false;   //错误时必须返回 false
            }
        },

        //系统自带规则错误定义
        error : function(ruleType, item){ //ruleType：规则类型、item：表单的DOM对象

            var t = "["+$(item).parent('div').parent('.form-group').find('.control-label').text()+"]";
                
            if(ruleType == 'required'){
                alert(t + '必须填写');

            }else if(ruleType == 'email'){
                alert(t + '格式不正确');

            }

        },

        //元素合集，获取哪些元素验证成功或者验证失败，做些高亮处理
        eleCallback: function(d) {

            console.log(d);

            var i = 0;
            $.each(d, function(index, el) {

                //el.ruleType  规则类型
                //el.item  表单的DOM对象
                //el.iserr 表单验证结果：true 为验证错误 false 为验证通过

                $(el.item).parent('div').parent('.form-group').removeClass('has-success has-error');
                if(el.iserr == true){
                    i++;
                    $(el.item).parent('div').parent('.form-group').addClass('has-error');
                }else{
                    $(el.item).parent('div').parent('.form-group').addClass('has-success');
                }
                
            });

            alert('一共有' + i + '个错误');
        }
   
    });

}); 
</script>

ajaxForm 和 ajaxSubmit表单提交

这两种方法主要的区别是ajaxForm不能主动提交form，只是为提交表单做准备需要以submit来触发提交，而ajaxSubmit会主动提交表单，同时可以在点击其他按钮时也可以触发提交，不一定是submit按钮。

<form class="form-horizontal" id="myForm2" action="demo2.php" method="post">
    <div class="form-group">
        <label for="input3" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="user" id="input3" placeholder="登录身份">
        </div>
    </div>
    <div class="form-group">
        <label for="input4" class="col-sm-2 control-label">口令</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="password" id="input4" placeholder="登录口令">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </div>
</form>
<script type="text/javascript">
auxui(['form'], function (){
        
    $('#myForm2').submit(function () {
        $(this).ajaxSubmit({
            url : 'demo3.php',
            target : '#box',
            type : 'POST',
            dataType : null,
            data : {  //增加额外的数据提交
                aaa : 'bbb',
            },
            beforeSubmit : function (formData, jqForm, options) {
                alert('表单正在提交中');
            },
            success : function (responseText, statusText) {
                alert(responseText + statusText);
            },
            error : function (event, errorText, errorType) {  //请求错误
                alert(errorText + errorType);
            },
            complete : function (event, errorText, errorType) {
                alert('请求完成后，不管是否失败成功  都要执行');
            },
        });
        return false;  //阻止表单跳转，阻止默认行为
    });

}); 
</script>

ajaxForm 和 ajaxSubmit选项

名称	类型/默认值	描述
beforeSerialize	function/null	在序列化之前要调用的回调函数 `示例` beforeSerialize: function($form, options) {}
beforeSubmit	function/null	在提交表单之前调用的回调函数 `示例` beforeSubmit: function(arr, $form, options) {}
error	function/null	在错误时调用的回调函数
clearForm	Boolean/null	如果提交成功，是否清除表单
data	object/null	额外数据
dataType	string/null	数据类型：`xml`，`json`，`script`
forceSync	Boolean/false	当上传文件时（或使用IFRAMEY选项）设置为true，以在发布窗体之前删除短延迟。延迟用于允许浏览器在执行本机表单提交之前呈现DOM更新。当向用户显示通知时，这会提高可用性，例如“请等待…”
iframe	Boolean/false	使用用隐藏的 IFrame 提交表单
iframeSrc	String/about:blank	当使用IFRAME时，应该用于IFRAME的SRC属性的字符串值
resetForm	Boolean/null	提交成功是否重置表单
success	function/null	在表单提交成功后回调函数 `示例` success: function(responseText, statusText, xhr, element) {}
target	element/null	服务器返回的内容存放在指定元素里
type	String/null	提交方式：`GET`，`POST`
uploadProgress	function/null	上传过程信息，浏览器支持下回调函数 `示例` uploadProgress: function(event, position, total, percentComplete) {}
url	String/null	提交表单数据的URL

表单方法

名称	描述
ajaxSubmit	马上由`AJAX`来提交表单。大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应，`ajaxSubmit`接受0个或1个参数，这个单个的参数既可以是一个回调函数，也可以是一个`Options`对象。 `示例` $('#myFormId').submit(function() { // 提交表单 $(this).ajaxSubmit(); // 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回false return false; });
formSerialize	将表单串行化（或序列化）成一个查询字符串。这个方法将返回以下格式的字符串：name1=value1&name2=value2。 `示例` var queryString = $('#myFormId').formSerialize(); // 现在可以使用$.get、$.post、$.ajax等来提交数据 $.post('myscript.php', queryString);
fieldSerialize	将表单的字段元素串行化（或序列化）成一个查询字符串。当只有部分表单字段需要进行串行化（或序列化）时，这个就方便了。这个方法将返回以下格式的字符串：name1=value1&name2=value2。 `示例` var queryString = $('.specialFields').fieldSerialize();
fieldValue	返回匹配插入数组中的表单元素值。从0.91版起，该方法将总是以数组的形式返回数据。如果元素值被判定可能无效，则数组为空，否则它将包含一个或多于一个的元素值。 `示例` // 取得密码输入值 var value = $('#myFormId :password').fieldValue(); alert(value[0]);
resetForm	通过调用表单元素原有的DOM方法，将表单恢复到初始状态。 `示例` $('#myFormId').resetForm();
clearForm	清除表单元素。该方法将所有的文本（text）输入字段、密码（password）输入字段和文本区域（textarea）字段置空，清除任何select元素中的选定，以及将所有的单选（radio）按钮和多选（checkbox）按钮重置为非选定状态。 `示例` $('#myFormId').clearForm();
clearFields	清除字段元素。只有部分表单元素需要清除时才方便使用。 `示例` $('.specialFields').clearFields();