20、Semantic-UI之数据验证
2024-10-19 00:12:29
20.1 实现数据验证
在很多前端框架中都提供了数据验证的操作，比如jQuery的验证框架等，但是jQuery的验证框架js文件太多；在使用Semantic-UI框架的时候只需要导入semantic.js文件就可以实现数据验证，当然必须导入jQuery才可以。
示例：定义表单
<div class="ui container">
<div class="ui grid">
<div class="four wide column">
<form action="" method="post" class="ui form">
<div class="field">
<i class="user icon"></i>
<label for="name">姓名</label>
<input type="text" name="name" id="name" placeholder="请输入姓名...">
</div>
<div class="field">
<i class="id badge icon"></i>
<label for="name">年龄</label>
<input type="text" name="age" id="age" placeholder="请输入年龄...">
</div>
<div class="field">
<i class="compass icon"></i>
<label for="name">密码</label>
<input type="text" name="passwd" id="passwd" placeholder="请输入密码...">
</div>
<button class="ui green button">注册</button>
</form>
</div>
</div>
</div>
示例：定义验证规则
<script>
$(function () {
$(".ui.form").form({
fields:{
name:{
indentfier:"name",
rules:[{
type:"empty",
}]
},
age:{
indentfier:"age",
rules:[{
type:"integer",
}]
},
passwd:{
indentfier:"age",
rules:[{
type:"empty",
}]
}
}
})
})
</script>
上述验证规则只适合在Semantic-UI中使用。
最新文章
- 获取真实Ip地址
- Struts学习总结-02 类型转换
- memcached学习笔记——存储命令源码分析上篇
- 导致flash屏幕重绘的几种方式及避免重绘的方法
- 基于visual Studio2013解决算法导论之055拓扑排序
- bootstrap常见类的总结
- Java 代码学习之数组的初始化
- php+redis 学习 六 订阅
- javascript this 的工作原理
- 解决 WordPress“正在执行例行维护，请一分钟后回来”
- 史上最走心webpack4.0中级教程——配置之外你应该知道的事
- C++版 - 剑指offer 面试题31：连续子数组的最大和 题解
- 修改sqlserver的数据库名、物理名称和逻辑文件名
- Linux Shell 编程 教程 常用命令
- [Unity官方文档翻译]Primitive and Placeholder Objects Unity原生3D物体教程
- mtr语言真是逆天了
- 用MYSQLworkbench导出数据excel
- sqlserver 并发机制
- 【Leetcode】【Easy】Pascal's Triangle
- Django聚合函数