数据验证validator 与 DWZ
在进行系统经常使用的数据验证。数据验证可以编写自己的，它也可以用来作为现在。现在，记录这两个库的使用，
validator
<!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>
效果也很不错。不过个人还是比较喜欢第一个，用的方便，其原因是更有可能使用。
版权声明：本文博主原创文章。博客，未经同意不得转载。
数据验证validator 与 DWZ的更多相关文章
- springboot（11）使用SpringBoot validator进行数据验证
简介: 数据验证是作为一个企业级项目架构上设计的最基础的模块,前辈们曾说过:界面上传递到后台的数据没有百分之百值得相信的!为什么这么说呢?往往我们在编写程序的时候都会感觉后台的验证无关紧要,这样就会给 ...
- MVC数据验证原理及自定义ModelValidatorProvider实现无编译修改验证规则和错误信息
Asp.net MVC中的提供非常简单易用的数据验证解决方案. 通过System.ComponentModel.DataAnnotations提供的很多的验证规则(Required, StringLe ...
- struts 数据验证
1. validate()验证 将对页面表单验证的内容写到validate()方法中,实现验证和业务处理内容的分离 在Action中添加 validate()方法 public void vali ...
- spring mvc 4数据校验 validator
注解式控制器的数据验证.类型转换及格式化——跟着开涛学SpringMVC http://jinnianshilongnian.iteye.com/blog/1733708Spring4新特性——集成B ...
- SpringMVC学习系列（6） 之 数据验证
在系列(4).(5)中我们展示了如何绑定数据,绑定完数据之后如何确保我们得到的数据的正确性?这就是我们本篇要说的内容 —> 数据验证. 这里我们采用Hibernate-validator来进行验 ...
- 【Win10】使用 ValidationAttribute 实现数据验证
WPF 中数据验证的方式多种多样,这里就不说了.但是,在 Windows Phone 8.1 Runtime 中,要实现数据验证,只能靠最基础的手动编写条件判断代码来实现.如果用过 ASP.NET M ...
- SpringMVC数据验证
SpringMVC数据验证——第七章 注解式控制器的数据验证.类型转换及格式化——跟着开涛学SpringMVC 资源来自:http://jinnianshilongnian.iteye.com/blo ...
- [转]MVC自定义数据验证（两个时间的比较）
本文转自:http://www.cnblogs.com/zhangliangzlee/archive/2012/07/26/2610071.html Model: public class Model ...
- 使用Data Annotations进行手动数据验证
Data Annotations是在Asp.Net中用于表单验证的 它通过Attribute直接标记字段的有效性,简单且直观.在非Asp.Net程序中(如控制台程序),我们也可以使用Data Anno ...
随机推荐
- PPS2013校园招聘笔试题
转载请标明出处,原文地址:http://blog.csdn.net/hackbuteer1/article/details/11473405 一.简答题 (1)一位老师有2个推理能力很强的学生,他告诉 ...
- 仿ios版微信应用源代码
仿微信基本功能. 基于XMPPserver的即时通信以及交友client. ----第一期代码的功能例如以下---- 1.新用户注冊 2.登陆并连接XMPPserver 握手 保持 ...
- TWinControl的消息覆盖函数大全（41个WM_函数和31个CM_函数，它的WndProc就处理鼠标(转发)、键盘(取消拖动)、焦点、和WM_NCHITTEST一共4类消息）
注意,这些函数只有Private一种形式(也就是不允许覆盖,但仍在动态表格中): 其中TWinControl对TControl有10个消息进行了覆盖(红色标记),其中有2个是WM_消息,8个是CM_消 ...
- Java程序员须知的七个日志管理工具(转)
Splunk vs. Sumo Logic vs. LogStash vs. GrayLog vs. Loggly vs. PaperTrails vs. Splunk>Storm 英文原文:T ...
- TD-SCDMA风雨20年:中国3G标准的由来以及国家通信战略
.国际电信标准是咋回事? 当年作为通信专业的学生,我曾长期困惑一个问题,为什么同一项通信技术总会有美国和欧洲两种国际标准?比如电话语音的数字化就有欧洲A律和美国u(谬)律两种. 学习后发现,两种标准的 ...
- IE与FF脚本兼容性问题
(1) window.event: 表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象 (2) 获取事件源 IE用srcElement获取事件源,而FF用target获取 ...
- Android在ListView显示图片（重复混乱闪烁问题）
Android在ListView显示图片(重复混乱闪烁问题) 1.原因分析 ListView item缓存机制: 为了使得性能更优,ListView会缓存行item(某行相应的View). ListV ...
- Android 调用谷歌语音识别
調用谷歌语音识别其实很简单,直接利用 intent 跳转到手机里面的谷歌搜索 代码也很简单,直接调用方法 startVoiceRecognitionActivity() 如果大家手机里面没有谷歌搜索, ...
- 依据二度人脉推荐好友sql
friend表结构 DROP TABLE IF EXISTS FRIEND; create table friend( uid bigint not null comment ' ...
- Android JNI 获取应用程序签名
使用Android JNI 获取应用程序签名. 获取基础上生成自己的签名password,这可以防止别人反编译找到自己的源代码password. jstring Java_com_masonsdk_j ...