当前位置:网站首页>Easyui 表单验证「建议收藏」
Easyui 表单验证「建议收藏」
2022-08-09 21:43:00 【全栈程序员站长】
大家好,又见面了,我是你们的朋友全栈君。
前言
在BS模式的项目中,客户中验证是否为空,是否为数字时,都是通过代码进行一系列的判断来实现的。后来接触到asp.net中的验证控件,瞬间觉得又提升了一个档次,我们可以通过控件来进行相应的验证。但是在html界面上却没有验证控件,引入了easyui后,也有了相应的解决办法,就是我们今天要介绍的easyui表单验证。
用法
1.从标记创建验证框
<input id="name" class="easyui-validatebox" data-options="required:true">
2.用JavaScript创建验证框
<input id="name"> //添加输入框
//对输入的文本进行验证
$('#name').validatebox({
required: true
});
常用属性
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
required | boolean | 定义是否字段应被输入。 | false |
validType | string,array | 定义字段的验证类型,比如 email、url,等等。可能的值: | null |
missingMessage | string | 当文本框为空时出现的提示文本。 | 200 |
invalidMessage | string | 当文本框的内容无效时出现的提示文本。 | 该字段是必需的。 |
novalidate | boolean | 当设置为 true 时,则禁用验证。 | null |
常用方法
名称 | 参数 | 描述 |
---|---|---|
destroy | none | 移除并销毁该组件。 |
validate | none | 进行验证以判定文本框的内容是否有效。 |
isValid | none | 调用 validate 方法并且返回验证结果,true 或者 false。 |
enableValidation | none | 启用验证。该方法自版本 1.3.4 起可用。 |
disableValidation | none | 禁用验证。该方法自版本 1.3.4 起可用。 |
验证规则
验证规则通过validType来实现,有一些easyui已经封装好的规则:
1.email:匹配email正则表达式规则。
2.url:匹配URL正则表达式规则。
3.length[0,100]:允许输入0到100个字符。
除了以上可以直接拿来用的验证规则,我们也可以自定义想要的验证规则,比如我们常用的一些规则:
首先自定义验证规则
$.extend($.fn.validatebox.defaults.rules, {
//移动手机号码验证
Mobile: {//value值为文本框中的值
validator: function (value) {
var reg = /^1[3|4|5|8|9]\d{9}$/;
return reg.test(value);
},
message: '请输入正确的手机号'
},
//数字验证
Number:{
validator: function (value) {
var reg = /^[+]?[1-9]+\d*$/i;
return reg.test(value);
},
message: '请输入数字'
},
});
定义输入框与验证规则交互
1.必填项验证
<input id="StudentName" class="easyui-validatebox" type="text" data-options="required:true" >
效果图:
2.手机号验证
<input id="StudentCellphone" class="easyui-validatebox" type="text" data-options="validType:'Mobile'">
效果图:
3.数字验证
<input id="StudentCode" class="easyui-validatebox" type="text" data-options="validType:'Number'">
效果图:
4.字符长度验证
<input id="StudentName" class="easyui-validatebox" type="text" data-options="validType:'length[1,4]'">
效果图:
总结
总体来说,easyui简单,易学,也非常好用,相比asp.net的验证控件和我们手动编写的一些验证规则来说,easyui的表单可以实时验证,增强了用户体验,还是不错的。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/105723.html原文链接:https://javaforall.cn
边栏推荐
- MySQL跨表、多表更新SQL语句总结
- Deceptive Dice(期望计算)
- Pagoda measurement - building LightPicture open source map bed system
- Cookie, session, token
- SecureCRT强制卸载
- Interpretation of the paper (DropEdge) "DropEdge: Towards Deep Graph Convolutional Networks on Node Classification"
- 4D Summary: 38 Knowledge Points of Distributed Systems
- ACM MM 2022 | Cloud2Sketch: 长空云作画,AI笔生花
- 在VMware上安装win虚拟机
- Cookie、session、token
猜你喜欢
abstract class or interface
Xiaohei's leetcode journey: 94. Inorder traversal of binary trees (supplementary Morris inorder traversal)
线段相交的应用
AI Knows Everything: Building and Deploying a Sign Language Recognition System from Zero
AI+Medical: Using Neural Networks for Medical Image Recognition and Analysis
Converting angles to radians
SQLi-LABS Page-2 (Adv Injections)
Pagoda measurement - building LightPicture open source map bed system
简单问题窥见数学
Skywalking系列学习之Trace Profiling源码分析
随机推荐
Bean生命周期
筑牢安全防线 鹤壁经济技术开发区开展安全生产培训
小黑leetcode之旅:94. 二叉树的中序遍历(补充Morris 中序遍历)
How to Make Your Company Content GDPR Compliant
哪款C语言编译器(IDE)适合初学者?
Word第一页不要页眉怎么设置?设置Word首页不要页眉方法教程
重要的不是成为海贼王,而是像路飞一样去冒险
上海控安SmartRocket系列产品推介(三):SmartRocket iVerifier计算机联锁系统验证工具
PMP每日一练 | 考试不迷路-8.8(包含敏捷+多选)
Excel如何打出正负号?Excel打出正负号的方法
Word文档怎么输入无穷大符号∞
【stack】【queue】【priority_queue】【deque】Detailed explanation
Pagoda measurement - building LightPicture open source map bed system
MySQL慢查询的多个原因
题解:Edu Codeforces 109(div2)
Daily practice of PMP | Do not get lost in the exam -8.8 (including agility + multiple choice)
Ehrlich screening method: Counting the number of prime numbers
SecureCRT sets the timeout period for automatic disconnection
Sudoku | Backtrack-7
Technology Sharing | How to use the JSON Schema mode of interface automation testing?