首页 > 代码库 > Jquery easyui的validatebox控件和正则表达式

Jquery easyui的validatebox控件和正则表达式

2024-07-10 16:52:19   222人阅读

        Validatebox是EasyUI的验证控件，它支持很多验证，比如说是否是email、是否是url等，保证我们输入的数据在进行处理前能够确保其完整性和正确性。验证可以实现在数据层和业务规则层，但应当在表现层进行前端的“保护”，因此，我们通常在UI层为用户提供友好的、可以交互的验证体验，避免在应用程序中进行不必要的网络间的往返验证。在前期ASP.NET中，我们接触了六种验证控件，根据这六种验证控件，几乎能够实现所有的验证。那现在说的Validatebox是怎么实现验证的呢？

       仔细观察jquery.validatebox.js文件，会发现它的验证其实还是采用的正则表达式，比如说验证长度限制吧，在jquery.validatebox.js里面是这么写的：

length:{validator:function(_2d,_2e){
var len=$.trim(_2d).length;
return len>=_2e[0]&&len<=_2e[1];
},message:"Please enter a value between {0} and {1}."}
至于，界面效果，我就不用说了。

        Validatebox控件提供的验证有限，如果我们想要更多的验证表达式，该怎么办？是不是能够改写jquery.validatebox.js文件，按照jquery.validatebox.js文件中的格式，为这个控件提供更多的验证效果。

        经过一番实验和查找，还真有办法来为这个Validatebox控件提供更多的验证信息，具体操作如下。

        对jquery.validatebox.js进行扩展，新建js文件，可以取名为：validatebox.js，这个文件中的内容如下：

//扩展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.'
    },
})
        HTML页面：

<!DOCTYPE html>
<html>
<head>
	<meta charset="gb2312">
	<title>Basic ValidateBox - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href=http://www.mamicode.com/themes/default/easyui.css">>实现效果如下：
                       
总结
      根据验证表达式，扩展Validatebox默认的验证类型，然后修改Validatebox的属性——validType，实现你想要的任何一种验证。


联系
我们