Easyui 表单验证「建议收藏」

全栈程序员-站长 • 2022年4月25日上午6:00 • 未分类 • 阅读 37

大家好，又见面了，我是你们的朋友全栈君。

前言

在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" >

效果图：

Easyui 表单验证「建议收藏」

2.手机号验证

<input id="StudentCellphone" class="easyui-validatebox" type="text" data-options="validType:'Mobile'">

效果图：

Easyui 表单验证「建议收藏」

3.数字验证

<input id="StudentCode" class="easyui-validatebox" type="text" data-options="validType:'Number'">

效果图：

Easyui 表单验证「建议收藏」

4.字符长度验证

<input id="StudentName" class="easyui-validatebox" type="text" data-options="validType:'length[1,4]'">

效果图：

Easyui 表单验证「建议收藏」

总结

总体来说，easyui简单，易学，也非常好用，相比asp.net的验证控件和我们手动编写的一些验证规则来说，easyui的表单可以实时验证，增强了用户体验，还是不错的。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/105723.html原文链接：https://javaforall.net

Easyui 表单验证「建议收藏」

前言

用法

常用属性

常用方法

验证规则

总结

相关推荐

MASQUERADE

Latex常见符号对照表

关于COM类工厂80070005和8000401a错误分析及解决办法

Hive学习之Hive数据类型

php 0xffffffff,[已解决]怎么随机出0xFF000000 – 0xFFFFFFFF 之间的数？

Windows编译ollvm_windows交叉编译linux

发表回复