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

前言

    在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
});

常用属性

常用方法

验证规则

验证规则通过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的表单可以实时验证，增强了用户体验，还是不错的。