Easyui 表单验证
来源:互联网 发布:mysql数据库存储过程 编辑:程序博客网 时间:2024/06/02 04:15
前言
在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的表单可以实时验证,增强了用户体验,还是不错的。
- easyui表单验证easyui-validatebox
- easyui 验证表单
- EasyUI 表单验证注意事项
- easyui 表单验证
- jquery easyui 表单验证
- jquery easyui 表单验证
- easyui表单的验证
- easyui表单验证
- easyUI表单验证扩展
- jquery easyui 表单验证
- easyui表单验证
- jQuery easyui表单验证
- easyui 表单元素验证
- EasyUI表单验证
- easyui js 表单验证
- EasyUI表单验证
- Easyui 表单验证
- EasyUI 表单验证
- [C++]:A*——A Star算法简介
- 小白日记11:kali渗透测试之服务扫描-banner、dmitry、nmap特征库、操作系统识别、SNMP
- 百度SDK公交路线
- linux的一些配置方法
- HDU2602-01背包基础
- Easyui 表单验证
- HDU1248-寒冰王座
- JS跳转页面的方法总结
- LeetCode 395 Longest Substring with At Least K Repeating Characters
- IOS Present View Controller 详解
- 非标自动化设备开发流程
- 薪金问题中的四舍五入算法的实现
- leetcode之389. Find the Difference(C++解法)
- 文章标题 UVALive 7035: Built with Qinghuai and Ari Factor(水)