数据校验validator 与　DWZ

时间：2023-03-08 16:52:21
数据校验validator 与　DWZ

在做系统时经常会用到数据校验，数据校验可以自己写，也可以用现在成的，现在记录下两种类库使用方法，

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

  <meta http-equiv="pragma" content="no-cache">

  <meta http-equiv="cache-control" content="no-cache">

  <meta http-equiv="expires" content="0">

  <meta http-equiv="keywords" content="<%=keywords%>">

  <meta http-equiv="description" content="<%=description%>">

  <META http-equiv="X-UA-Compatible" content="IE=10" >

  <!--加载jquery类-->

  <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

  <script>

  if (!window.jQuery) {

  var script = document.createElement('script');

  script.src = "js/jquery-1.7.1.min.js";

  document.body.appendChild(script);

  }

  </script>

  <!--加载样式，可不加-->

  <link rel="stylesheet" href="validator-0.7.0/jquery.validator.css">

  <!--加载validator类-->

  <script type="text/javascript" src="validator-0.7.0/jquery.validator.js"></script>

  <script type="text/javascript" src="validator-0.7.0/local/zh_CN.js"></script>

</head>

<body style="background:#fff;">

  <form role="form" action="user/updatesUser" enctype="multipart/form-data" method="post" validate="true" >

    <input type="text" id="a" data-rule="required"/><br/>

    <input type="text" id="b" data-rule="required ID_card"/><br/>

    <input type="text" id="c" data-rule="required"/><br/>

    <input type="text" id="d" data-rule="required email"/><br/>

    <input type="text" id="e" data-rule="tel"/><br/>

    <input type="text" id="f" data-rule="doubles"/><br/>

    <input type="text" id="g" data-rule="digits"/><br/>

    <input type="submit"/>

  </form>

</body>

</html>

用data-rule设置数据校验的格式，

如要加新的校验类型只要在 zh_CN.js文件中添加正则表达式即可。

如下（部分代码）

rules: {

      digits: [/^\d+$/, "请输入整数数字"]

  ,doubles:[/^[0-9]*[.]{0,1}[0-9]*$/,"请输入数字"]

  ,positiveinteger:[/^[1-9][0-9]*$/,"请输入正整数"]

  ,letters: [/^[a-z]+$/i, "{0}只能输入字母"]

  ,tel: [/^(?:(?:1[3-9]\d{9})|(?:0\d{2,3}[- ]?[1-9]\d{6,7})|(?:[48]00[- ]?[1-9]\d{6}))$/, "联系电话格式不正确"]

  ,mobile: [/^1[3-9]\d{9}$/, "手机号格式不正确"]

  ,email: [/^(?:[a-z0-9]+[_\-+.]?)*[a-z0-9]+@(?:([a-z0-9]+-?)*[a-z0-9]+\.)+([a-z]{2,})+$/i, "邮箱格式不正确"]

  ,qq: [/^[1-9]\d{4,}$/, "QQ号格式不正确"]

  ,date: [/^\d{4}-\d{1,2}-\d{1,2}$/, "请输入正确的日期,例:yyyy-mm-dd"]

  ,time: [/^([01]\d|2[0-3])(:[0-5]\d){1,2}$/, "请输入正确的时间,例:14:30或14:30:00"]

  ,ID_card: [/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z]|\d{3}[a-z])$/, "请输入正确的身份证号码"]

  ,url: [/^(https?|ftp):\/\/[^\s]+$/i, "网址格式不正确"]

  ,postcode: [/^[1-9]\d{5}$/, "邮政编码格式不正确"]

  ,chinese: [/^[\u0391-\uFFE5]+$/, "请输入中文"]

  ,contentsixty: [/^.[1-60]+$/, "不于大于60个字"]

  ,username: [/^\w{3,12}$/, "请输入3-12位数字、字母、下划线"]

  ,password: [/^[0-9a-zA-Z]{6,16}$/, "密码由6-16位数字、字母组成"]

  ,accept: function (element, params){

    if (!params) return true;

    var ext = params[0];

    return (ext === '*') ||

         (new RegExp(".(?:" + (ext || "png|jpg|jpeg|gif") + ")$", "i")).test(element.value) ||

         this.renderMsg("只接受{1}后缀", ext.replace('|', ','));

  }

    }

  });

２.DWZ数据校验

html代码如下

<html>

<head>

  <title>validate</title>

  <style>

    span.error {

    overflow: hidden;

    width: 165px;

    height: 21px;

    padding: 0 3px;

    line-height: 21px;

    background: #F00;

    color: #FFF;

    top: 5px;

    left: 318px;

    }

    input.required, textarea.required { background-position:100% 0;}

    .textInput, input.focus, input.required, input.error, input.readonly, input.disabled, textarea.focus, textarea.required, textarea.error, textarea.readonly, textarea.disabled {

    background: url(themes/azure/images/form/input_bg.png) right no-repeat scroll;

    }

  </style>

<!--

<link href="themes/default/style.css" rel="stylesheet" type="text/css" media="screen"/>

<link href="themes/css/core.css" rel="stylesheet" type="text/css" media="screen"/>

<link href="themes/css/print.css" rel="stylesheet" type="text/css" media="print"/>

<link href="uploadify/css/uploadify.css" rel="stylesheet" type="text/css" media="screen"/>

-->

<!--[if IE]>

<link href="themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>

<![endif]-->

<!--[if lte IE 9]>

<script src="js/speedup.js" type="text/javascript"></script>

<![endif]-->

<script src="js/speedup.js" type="text/javascript"></script><!-- 【可选】js加速-->

<script src="js/jquery-1.7.2.js" type="text/javascript"></script><!--【必须】jQuery库-->

<script src="js/jquery.cookie.js" type="text/javascript"></script><!--【可选】js操作cookie, 目前用于记住用户选择的theme风格-->

<script src="js/jquery.validate.js" type="text/javascript"></script><!--【必须】表单验证-->

<script src="js/jquery.bgiframe.js" type="text/javascript"></script><!--【可选】用于IE6弹出层不能盖住select问题-->

<script src="xheditor/xheditor-1.2.1.min.js" type="text/javascript"></script><!--【可选】xheditor在线编辑器-->

<script src="uploadify/scripts/jquery.uploadify.min.js" type="text/javascript"></script><!--【可选】用于文件批量上传-->

<script src="js/dwz.min.js" type="text/javascript"></script><!-- 【必须】DWZ框架js压缩包-->

<script src="js/dwz.regional.zh.js" type="text/javascript"></script> <!--【可选】 用于国际化-->

</head>

<body>

<div style="height:100px"></div>

<div class="pageContent" style="height:1000px">

  <form action="http://www.baidu.com" class="pageForm required-validate" onsubmit="return validateCallback(this,dialogAjaxDone,'required-validate')">

    <input type="text" value="321">

    <input type="text" name="name" maxlength="20" class="required" />

    <input type="text" name="email" class="required email" alt="请输入您的电子邮件"/>

    <input type="text" name="phone" class="required phone" alt="请输入您的电话"/>

    <input type="submit"/>

  </form>

  <br><br><br>

  <form method="post" action="demo/common/ajaxDone.html" class="pageForm required-validate" onsubmit="return validateCallback(this,dialogAjaxDone,'required-validate')">

    <div class="pageFormContent nowrap" layoutH="200" >

      <dl>

        <dt>必填：</dt>

        <dd>

          <input type="text" name="name" maxlength="20" class="required" />

          <span class="info">class="required"</span>

        </dd>

      </dl>

      <dl>

        <dt>必填+邮箱：</dt>

        <dd>

          <input type="text" name="email" class="required email" alt="请输入您的电子邮件"/>

          <span class="info">class="required email"</span>

        </dd>

      </dl>

      <dl>

        <dt>电话：</dt>

        <dd>

          <input type="text" name="phone" class="phone" alt="请输入您的电话"/>

          <span class="info">class="phone"</span>

        </dd>

      </dl>

      <dl>

        <dt>密码：</dt>

        <dd>

          <input id="w_validation_pwd" type="password" name="password" class="required alphanumeric" minlength="6" maxlength="20" alt="字母、数字、下划线 6-20位"/>

          <span class="info">class="required alphanumeric" minlength="6" maxlength="20"</span>

        </dd>

      </dl>

      <dl>

        <dt>确认密码：</dt>

        <dd>

          <input type="password" name="repassword" class="required" equalto="#w_validation_pwd"/>

          <span class="info">class="required" equalto="#xxxId"</span>

        </dd>

      </dl>

      <dl>

        <dt>整数：</dt>

        <dd>

          <input type="text" name="digits" class="digits" />

          <span class="info">class="digits"</span>

        </dd>

      </dl>

      <dl>

        <dt>浮点数：</dt>

        <dd>

          <input type="text" name="number" class="number" />

          <span class="info">class="number"</span>

        </dd>

      </dl>

      <dl>

        <dt>最小值：</dt>

        <dd>

          <input type="text" name="min" min="1"/>

          <span class="info">min="1"</span>

        </dd>

      </dl>

      <dl>

        <dt>最大值：</dt>

        <dd>

          <input type="text" name="max" max="10"/>

          <span class="info">max="10"</span>

        </dd>

      </dl>

      <dl>

        <dt>最小值-最大值：</dt>

        <dd>

          <input type="text" name="min_max" min="1" max="10"/>

          <span class="info">min="1" max="10"</span>

        </dd>

      </dl>

      <dl>

        <dt>最小长度：</dt>

        <dd>

          <input type="text" name="minlength_maxlength6" minlength="6" />

          <span class="info">min="6"</span>

        </dd>

      </dl>

      <dl>

        <dt>最大长度：</dt>

        <dd>

          <input type="text" name="minlength_maxlength10" maxlength="10"/>

          <span class="info">max="10"</span>

        </dd>

      </dl>

      <dl>

        <dt>最小长度-最大长度：</dt>

        <dd>

          <input type="text" name="minlength_maxlength" minlength="6" maxlength="20"/>

          <span class="info">minlength="6" maxlength="20"</span>

        </dd>

      </dl>

      <dl>

        <dt>信用卡：</dt>

        <dd>

          <input type="text" name="creditcard" class="creditcard" />

          <span class="info">class="creditcard"</span>

        </dd>

      </dl>

      <dl>

        <dt>字母、数字、下划线：</dt>

        <dd>

          <input type="text" name="alphanumeric" class="alphanumeric" />

          <span class="info">class="alphanumeric"</span>

        </dd>

      </dl>

      <dl>

        <dt>字母：</dt>

        <dd>

          <input type="text" name="lettersonly" class="lettersonly" />

          <span class="info">class="lettersonly"</span>

        </dd>

      </dl>

      <dl>

        <dt>网址：</dt>

        <dd>

          <input type="text" name="url" class="url" />

          <span class="info">class="url"</span>

        </dd>

      </dl>

      <dl>

        <dt>remote：</dt>

        <dd>

          <input type="text" name="remote" remote="validate_remote.html"/>

          <span class="info">唯一性验证input添加属性：remote="xxxUrl"</span>

        </dd>

      </dl>

      <!--

      <dl>

        <dt>customvalid+remote：</dt>

        <dd>

          <input type="text" name="remote2" remote="validate_remote.html" customvalid="customvalidXxx(element)"/>

          <span class="info">customvalid="customvalidXxx(element)" | remote="xxxUrl"</span>

        </dd>

      </dl>

      -->

      <div class="divider"></div>

      <p>自定义扩展请参照：dwz.validate.method.js</p>

      <p>错误提示信息国际化请参照：dwz.regional.zh.js</p>

    </div>

    <div class="formBar">

      <ul>

        <li><div class="buttonActive"><div class="buttonContent"><button type="submit">提交</button></div></div></li>

        <li><div class="button"><div class="buttonContent"><button type="button" class="close">取消</button></div></div></li>

      </ul>

    </div>

  </form>

</div>

  <br><br><br>

  <br><br><br>

  <br><br><br>

</body>

</html>

相关文章