데이터 검증 DWZ 와 vaidator
67011 단어 Validator
validato
<!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 로 설정 합 니 다.
새로운 검사 형식 을 추가 하려 면 zhCN. 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('|', ','));
}
}
});2. 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>좋은 웹페이지 즐겨찾기
