列表单布局

文本只读

单个文本禁用

多个文本禁用

数字输入校验

表单序列化

表单重置

通过规范好的HTML结构及CSS类,来组装成各式各样的表单元素,并通过内置的 form模块 来完成各种交互。
列表单布局

● 结合内置的十二栅格横向弹性布局,可实现单列、多列表单元素的响应式布局。
● 为了保证在各浏览器的显示效果一致,表单元素的写法必须严格遵循下面示例中的规范,不能混用,少用。
● label字段名称默认宽度自适应,制作多行表单时,如果同一列字段字符长度不一样,应自设合理一致的宽度(一般以最长的字符为宜,推荐每个字符14px),否则会对不齐。

● 内置的表单元素布局为响应式的,而label标题的宽度是固定不变的,默认为auto,你也可以自定义设置。
● 一般为了排版的美观,同一列的label宽度设置相等,一个字符宽度通常设置为14px。
● 为了优化兼容性,我们推荐用英文冒号(:)。

文本只读
单个文本禁用
属性 输入 适用元素 事件绑定 表单序列取值
readonly 禁用 input/textarea 阻止输入事件,保留其它事件 支持
disabled 禁用 所有表单元素 阻止焦点(focus)和点击(click/mousedown) 不支持
class="wj_disabled" 禁用 所有元素 禁止所有事件,支持模拟事件 支持
class="wj_hide" 隐藏 所有元素 禁止所有事件,支持模拟事件 支持
注:多个文本设定只读属性时,可给父元素加class名:wj_form_read
数字输入校验

● Sweet通过class名绑定blur(失去焦点)事件和正则表达式,内置了数字校验规则。

class名 规则
only_num 可输入任意数字
only_num num_int 只能输入整数
only_num num_plus 只能输入正数
only_num num_int num_plus 只能输入正整数
only_num num_neg 只能输入负数
only_num num_int num_neg 只能输入负整数
only_num num_cut 自动修改为千分位金额
表单序列化

sweet.getFormDatas("ele"),内置的表单序列化取值方法,可用于form表单批量取值,没有form不会调用。
● 该方法通过name属性取值,并将name属性值作为关键字,最终以键值对形式返回。
● 我们推荐表单元素都要设置name属性,同一个form中name不能重复(radio和checkbox类型除外)。
● 设置了disabled属性的字段元素,不能通过表单序列化方法取值。

sweet.giveFormDatas("ele",data),内置的表单序列化赋值方法,可用于form表单批量取值,没有form不会调用。
● 该方法接收键值对,以name属性值为键匹配字段赋值。