玩转EasyUI之ValidateBox

需求背景

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

邮箱地址的代码：

<tr style="font-size: 14px;">
      <th style="width: 190px; text-align: right; font-weight: normal">手机号:</th>

      <th style="width: 190px;">

      <input class ="easyui-validatebox"  data-options="required:true,validType:'Mobile'" maxlength=11 style="width:190px" id="TelNum" type="text"value="@ViewData["TelNum"]"  required="required" />

      </th>

       <th style="width: 190px; text-align: right; font-weight: normal">邮箱地址:</th>
       <th style="width: 220px;">

            <input class ="easyui-validatebox" data-options="validType:'email'" style="width:208px" id="Email" type="text" value="@ViewData["Email"]" required="required" maxlength=30 />

       </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.'
    },
})