easyui的validatebox

来源：互联网发布：通达信布林线指标源码编辑：程序博客网时间：2024/09/21 08:56

对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="../../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>         <span style="font-family:Courier New;"> </span><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>

实现效果如下：

总结

根据验证表达式，扩展Validatebox默认的验证类型，然后修改Validatebox的属性——validType，实现你想要的任何一种验证。

1 0