玩转EasyUI之ValidateBox

最新推荐文章于 2019-07-11 21:41:48 发布

彭薄

最新推荐文章于 2019-07-11 21:41:48 发布

阅读量3k

点赞数

文章标签： easyui

本文链接：https://blog.youkuaiyun.com/cxl0921/article/details/48137273

版权

本文探讨了在EasyUI中实现手机号验证的过程，通过自定义验证规则解决了未找到内置Mobile验证的问题，分享了从学习到实践再到总结的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求背景

在如下界面中，要求客户端能自动验证用户输入的内容是否符合要求。其效果就是图中邮箱地址的效果，如果不符合要求，则用easyUI本身的样式来提示。这里邮箱的验证已经完成，可手机号码的验证却没有成功。

邮箱地址的代码：

</th>

</th>

</tr>

------------------------------------------------------------------------------------------------------

问题分析

验证的问题之前在学习ASP.Net的时候已经用到过了，ASP.Net中把验证封装成为验证控件，作用于某个具体的需要被验证的控件。所以类比学习，EasyUI的封装也应该是这个道理。可是现在ValidType中email能用，Mobile不能用，为什么呢？

可以可能的是问题一定是出现在EasyUI这里了。当找不到问题的根源时，只能提出基于一定知识和能力基础下的假想了。

可能1：EasyUI可能不是使用Mobile这个关键字。

可能2：EasyUI可能根本没有封装手机号的验证方法。

--------------------------------------------------------------------------------------------------

实践过程

可能1：

我把Mobile中的M采用小写试了试，同样不能用，果断放弃。

可能2：

面对第二种可能性，我去网上转了转。果然有不少介绍类似问题的文章，于是现学现卖。

1、新建一个JS文件

2、编写代码如下：

$.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: 'Please enter your mobile phone number correct.'
    },

}）

3、界面引用新建的JS文件

刷新网页，测试成功！

------------------------------------------------------------------------------------------------------

思考总结

1、EasyUI虽然已经很强大，但它也不是万能的。不要迷信权威。

2、学会思考比掌握知识要重要，因为前一个代表未来，后一个代表过去。

3、学习过程中要善于做Demo。在学习过程中肯定会遇到暂时不是很明白的问题，做一个小Demo也许能让我们入门，然后快速提高。再打的问题都能分解，然后逐个突破。

------------------------------------------------------------------------------------------------------

知识补充

更多拓展EasyUI验证的方法

$.extend($.fn.validatebox.defaults.rules, {
    //验证汉字
    CHS: {
        validator: function (value) {
            return /^[\u0391-\uFFE5]+$/.test(value);
        },
        message: 'The input Chinese characters only.'
    },
    //移动手机号码验证
    Mobile: {//value值为文本框中的值
        validator: function (value) {
            var reg = /^1[3|4|5|8|9]\d{9}$/;
            return reg.test(value);
        },
        message: 'Please enter your mobile phone number correct.'
    },
    //国内邮编验证
    ZipCode: {
        validator: function (value) {
            var reg = /^[0-9]\d{5}$/;
            return reg.test(value);
        },
        message: 'The zip code must be 6 digits and 0 began.'
    },
    //数字
    Number: {
        validator: function (value) {
            var reg = /^[0-9]*$/;
            return reg.test(value);
        },
        message: 'Please input number.'
    },
})