简介：

jQuery EasyUI 的ValidateBox控件提供了强大的验证功能，让客户端表单验证变得简单，比如Email、url等，使我们在输入时保证数据的完整性和正确性。

实例：

<input class="easyui-validateBox" data-options="required:true,validType:'url'">
<input class="easyui-validateBox" data-options="
	required:true,validType:['email','length[0,20]']
">

ValidateBox控件提供的验证有限，如果我们想要写自己想要的验证表达式，应该怎么做那？？

做法：

新建一个js文件，对easyui提供的jquery.validateBox.js进行扩展。例如称为validate.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.'  
    },//非负整数
    Integer: {
        validator: function (value) {
            var reg = /^[1-9]\d*|0$/;
            return reg.test(value);
        },message: '请输入非负整数'
    },})

页面：

<!DOCTYPE html>  
<html>  
<head>  
    <Meta charset="gb2312">  
    <title>Basic ValidateBox - jQuery EasyUI Demo</title>  
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">  
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">  
    <link rel="stylesheet" type="text/css" href="../demo.css">  
    <script type="text/javascript" src="../../jquery.min.js"></script>  
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>  
  
        <script src="validateBox.js" type="text/javascript"></script>  <!--引入刚创建的js文件-->  
  
</head>  
<body>  
      
        <h2>常用验证格式</h2>   
    <div style="margin:20px 0;"></div>  
    <div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px">  
        <table cellpadding="10">  
            <tr>  
                <td>User Name:</td>  
                <td><input class="easyui-validateBox textBox" data-options="required:true,validType:'length[3,10]'"></td>  
            </tr>  
            <tr>  
                <td>Email:</td>  
                <td><input class="easyui-validateBox textBox" data-options="required:true,validType:'email'"></td>  
            </tr>  
            <tr>  
                <td>Birthday:</td>  
                <td><input class="easyui-dateBox textBox"></td>  
            </tr>  
            <tr>  
                <td>URL:</td>  
                <td><input class="easyui-validateBox textBox" data-options="required:true,validType:'url'"></td>  
            </tr>  
            <tr>  
                <td>Mobile:</td>  
                <td><input class="easyui-validateBox textBox" data-options="required:true,validType:'Mobile'"></td>  
            </tr>  
            <tr>  
                <td>Length:</td>  
                <td><input class="easyui-validateBox" data-options="required:true,validType:'length[0,2]'"></td>  
            </tr>  
            <tr>  
                <td>Chinese:</td>  
                <td><input name="txtName" class="easyui-validateBox" data-options="required:'true',validType:'CHS'"></td>  
  
            </tr>  
  
            <tr>  
                <td>ZipCode:</td>  
                <td><input name="txtName" class="easyui-validateBox" data-options="required:'true',validType:'ZipCode'"></td>  
  
            </tr>  
            <tr>  
                <td>Number:</td>  
                <td><input name="txtName" class="easyui-validateBox" data-options="required:'true',validType:'Number'"></td>  
  
            </tr>  
  
        </table>  
    </div>  
    <style scoped="scoped">  
        .textBox{  
            height:20px;  
            margin:0;  
            padding:0 2px;  
            Box-sizing:content-Box;  
        }  
    </style>

效果：

总结：

这样你想要什么样的验证都可以有了，希望有所帮助！

Easyui中Validatebox控件和正则表达式

简介：

实例：

做法：

总结：

相关文章