Easyui 表单验证「建议收藏」

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

前言

在BS模式的项目中，客户中验证是否为空，是否为数字时，都是通过代码进行一系列的判断来实现的。后来接触到asp.net中的验证控件，瞬间觉得又提升了一个档次，我们可以通过控件来进行相应的验证。但是在html界面上却没有验证控件，引入了easyui后，也有了相应的解决办法，就是我们今天要介绍的easyui表单验证。

用法

1.从标记创建验证框

代码语言：javascript复制

<input id="name" class="easyui-validatebox" data-options="required:true">

2.用JavaScript创建验证框

代码语言：javascript复制

<input id="name">   //添加输入框

代码语言：javascript复制

//对输入的文本进行验证
$('#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个字符。

除了以上可以直接拿来用的验证规则，我们也可以自定义想要的验证规则，比如我们常用的一些规则：

首先自定义验证规则

代码语言：javascript复制

$.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.必填项验证

代码语言：javascript复制

<input id="StudentName" class="easyui-validatebox" type="text" data-options="required:true" >

效果图：

2.手机号验证

代码语言：javascript复制

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

效果图：

3.数字验证

代码语言：javascript复制

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

效果图：

4.字符长度验证

代码语言：javascript复制

<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

javascript 编程算法 asp.net https java

0 人点赞