semantic-ui的表单使用
semantic-ui 的表单使用
最近找了一款ui库,jquery可以使用的。可以进行个性化定制,感觉还不错。
现状
简单阐述下该ui的现状吧,目前止步于2.4的版本,github商讨了一波。大致是死掉了,很久没有再接着更新了,留下了一些问题。接着便有人基于该库进行继续迭代link,赞一个
基于上述说法,个人推荐直接使用网友接着开发的,之前的功能保留,而且还在持续添加新的组件。同时历史遗留的bug也得以解决
form使用 demo
- form表单使用,一般涉及到如下几个
- 校验规则
- 你有我无
- 跳转到指定的错误位置
- 获取值
- 同一个意思涉及到多种表单类型(eg: 有其他时,输入,于是上面的单选框就不用进行校验)
现针对上面的一一进行处理
校验规则
$('.ui.form').form({
on: 'blur',
fields: {}
})
目前有两种显示错误方式
- 当前表单下方,需要添加
<div class="ui error message"></div>
- 设置
inline: true
校验规则两种写法
- 简单方法
fields: {
name : 'empty',
skills : ['minCount[2]', 'empty'],
terms : 'checked'
}
- 复杂点【可以进行自定义】
fields: {
name: {
identifier: 'name',
rules: [
{
type : 'empty',
prompt : 'Please enter your name'
}
]
},
skills: {
identifier: 'skills',
rules: [
{
type : 'minCount[2]',
prompt : 'Please select at least two skills'
}
]
},
terms: {
identifier: 'terms',
rules: [
{
type : 'checked',
prompt : 'You must agree to the terms and conditions'
}
]
}
}
- 简单方法
- 当前表单下方,需要添加
你有我无【动态添加校验规则】
目前直接通过值的判断,来进行控制是否显示
$('#input').on('input', (e) => {
const value = e.target.value
if (value) {
$('.ui.form').form('remove rule', 'language')
/**
* 有点版本还需要手动去清除样式
* 有些可以使用 validate field 进行单独校验即可
*/
} else {
$('.ui.form').form('add rule', 'language', {
rules: [
{
type: 'checked',
prompt: '选择一门你喜欢的语言'
}
]
})
$('.ui.form').form('validate field', 'language')
}
})
跳转到指定的错误位置
由于使用了该库的样式,导致获取错误信息的位置
scrollTop
为0
,主要原因是对html
设置了height: 100%
因而需要尝试其他方式在
onFailure
中进行处理setTimeout(function() {
// 获取第一个错误位置
var res = $('.field.error')[0].getBoundingClientRect()
var top = document.scrollingElement.scrollTop + res.y
// 此处有一个疑惑点 为何需要 -120 目前没有深入研究
$(document.scrollingElement).scrollTop(top - 120)
}, 16)
获取值
一般的都可以通过在onSuccess
中的fields
可以拿到所有name
的值,但是针对checkbox
多选时,一直拿到的是最后一个值,按道理是数组,多个值才对,因而需要注意其使用规范html
<input type="checkbox" name="books[]" value="自传">
校验
books: {
identifier: 'books[]',
rules: [{
type: 'checked',
prompt: '选择喜欢的书籍'
}]
}
之后通过上面的
fields
便可以拿到值,只是需要过滤一下false
情况即可同一个意思涉及到多种表单类型
类似
你有我无
的处理方式,只是在获取值时,需要有一个侧重点,是否是输入了其他,上面的单选框就失效,还是怎么的。反正两个值都可以拿到,只是在传给后台时,稍微处理一下即可
细节处理
针对 type=radio
和 type=checkbox
校验,若是需要显示错误信息,目前尽可能使用第二种方式,不然提示信息会默认选择第一个值作为错误信息显示,这样明显有问题,只有采用第二种才可以进行自定义错误信息显示
总结
semantic-ui的表单使用的更多相关文章
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- element ui form表单清空规则
公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...
- Easy UI form表单提交 IE浏览器不执行success ,以及 datagrid 展示过慢
最近在做一个Easy ui的项目 发现了一些问题,在这里总结下 1.表单提交,后端代码 public ActionResult Save(Request model) { ResultInfo _in ...
- vue+element ui 重置表单
<el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...
- element ui FORM表单
form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...
- easy ui 给表单元素赋值input,combobox,numberbox
①给input控件 class="easyui-textbox" <input class="easyui-textbox" data-options=& ...
- 20151124 Jquery UI form 表单变成dialog
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- UI自动化测试表单重要代码
public class frame { public static void main(String[] args) { // TODO Auto-generated method stub Sys ...
- Ionic4.x 中的 UI 组件(UI Components)表单相关组件
1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...
- semantic-ui 表单
1.定义表单 先看一个基础的表单,再讲解一下: <form class="ui form" method="post" action="&quo ...
随机推荐
- TCP慢启动
慢启动定义 慢启动,是传输控制协议使用的一种阻塞控制机制.慢启动也叫做指数增长期.慢启动是指每次TCP接收窗口收到确认时都会增长.增加的大小就是已确认段的数目.这种情况一直保持到要么没有收到一些段,要 ...
- oracle 获取时间
1.获取当前时间的前24小时的各小时时间段 select to_char(to_date(to_char(sysdate ) ,'yyyy-mm-dd hh24') || ':00:00','yyyy ...
- Nginx配置记录【例3】
C服务器,例: [root@82_www_db_2 conf.d]# egrep -v "^#|^$" /etc/nginx/nginx.conf user nginx; work ...
- Hibernate动态条件查询(Criteria Query)
1.创建一个Criteria实例net.sf.hibernate.Criteria这个接口代表对一个特定的持久化类的查询.Session是用来制造Criteria实例的工厂. Criteria cri ...
- Spring的jsp标签库
1,主要有两个 一个用于渲染HTML表单标签, 这些标签会绑定model中的某个属性 另一个包换了一些工具类标签 2,将表单绑定到模型上 包含了14个标签,海报一个人为用户展现错误的标签,它会将错误信 ...
- 套接字之send系统调用
send系统调用只是对sendto系统调用进行了封装,传递的参数不包含目的地址信息,数据会发送到已经建立连接的另一端的地址: /* * Send a datagram down a socket. * ...
- MySQL 数据库 常用函数
一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ABS(x) 返回x的绝对值 SELECT ABS(-1) -- 返回1 CEIL(x),CEILING(x) 返回大于或等于x的最小整数 ...
- Windows 10 无法访问共享的解决办法大全
本文前面介绍 Windows 10 操作系统无法访问其他电脑的共享文件夹,而其他电脑访问该共享可以访问的解决办法. 简单点说就是,你的操作系统是 Win10 ,你访问不了某台电脑的共享,但是别人可以. ...
- tomcat gc和内存
tomcat启动参数,将JVM GC信息写入tomcat_gc.log CATALINA_OPTS='-Xms512m -Xmx4096m -XX:PermSize=64M -XX:MaxNewSiz ...
- 我们公司的delphi代码(胆不是我写的!),看看,你觉得怎么样
unit unt_LotBill_dyc; interface uses windows, SysUtils, Classes, ComCtrls, Forms, Controls, StrUtils ...