当前位置:网站首页>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

原网站

版权声明
本文为[全栈程序员站长]所创,转载请带上原文链接,感谢
https://cloud.tencent.com/developer/article/2069286