📄 index.st
字号:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>LiveValidation - Examples</title>
<!-- yahoo user interface css
(reset - resets all defaults to be pretty much identical cross browser)
(fonts - standardises default fonts styles crosss browser)
(grids - provides cross browser positional styles for creating layouts)
see http://developer.yahoo.com/yui/grids/ -->
<link rel="stylesheet" type="text/css" href="Themes/hsnd/../yahooapis/2.3.0/build/reset-fonts-grids/reset-fonts-grids.css" />
<!-- <link rel="stylesheet" type="text/css" href="Themes/hsnd/http://www.livevalidation.com/css/yui.css" /> -->
<!-- <link rel="stylesheet" type="text/css" href="Themes/hsnd/http://www.livevalidation.com/css/standard.css" />
<link rel="stylesheet" type="text/css" href="Themes/hsnd/http://www.livevalidation.com/css/helpers.css" />
<link rel="stylesheet" type="text/css" href="Themes/hsnd/http://www.livevalidation.com/css/validation.css" />
<link rel="stylesheet" type="text/css" href="Themes/hsnd/http://www.livevalidation.com/css/screen.css" /> -->
<link rel="stylesheet" type="text/css" href="Themes/hsnd/css/consolidated_common.css" />
<!--[if IE]>
<style type="text/css">
#main li {
width:auto;
}
/* fix for fieldset background spill bug in all flavours of IE */
fieldset {
position: relative;
margin: 2em 0 1em 0;
}
legend {
position: absolute;
top: -0.5em;
left: 0.2em;
}
</style>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">
#doc {
width:58em;
}
#main .supportBox {
margin-left:40px;
}
</style>
<![endif]-->
<script type="text/javascript" src="Themes/hsnd/livevalidation_standalone.js"></script>
</head>
<body>
本例子由<a href="http://www.blogjava.net/supercrsky" >supercrsky</a>翻译,整理。
(插件源地址:<a href="http://www.livevalidation.com">livevalidation</a>)<br><br>
livevalidation是一个很小的开放源代码,它的作用就是来改善js验证的友好性. 不要再让写验证是一种痛苦，和枯燥。<br>
好了，废话少说 看例子吧。
<br>
我靠！这个太好用了~
<br />
<div id="doc">
<div class="section" id="examplePresence">
输入 hello :
<input type="text" id="sayHello" />
<script type="text/javascript">
var sayHello = new LiveValidation('sayHello', { validMessage: '哦,亲爱的,你终于输对了!', wait: 100});
sayHello.add(Validate.Presence, {failureMessage: "不能为空哦!"});
sayHello.add(Validate.Format, {pattern: /^hello$/i, failureMessage: "请输入hello!" } );
</script>
<br />
</div>
<div class="section" id="examplePresence">
非空 :
<input type="text" id="f1" />
<script type="text/javascript">
var f1 = new LiveValidation('f1');
f1.add(Validate.Presence);
</script>
<br />
</div>
<div class="section" id="examplePresence">
格式 (包含 live ):
<input type="text" id="f3" />
<script type="text/javascript">
var f2 = new LiveValidation('f3');
f2.add(Validate.Format, { pattern: /live/i });
</script>
<br>正则表达式
<br />
</div>
<br /><br />
<div class="section" id="examplePresence">
数字验证(任何数字):
<input type="text" id="f4" />
<script type="text/javascript">
var f3 = new LiveValidation('f4');
f3.add(Validate.Numericality);
</script>
<br />
<div class="section" id="examplePresence">
数字验证(必须为整型):
<input type="text" id="f5" />
<script type="text/javascript">
var f4 = new LiveValidation('f5');
f4.add(Validate.Numericality, { onlyInteger: true } );
</script>
<br />
具体数字验证:
<input type="text" id="f6" />
<script type="text/javascript">
var f5 = new LiveValidation('f6');
f5.add(Validate.Numericality, { is: 2000 } );
</script>
<br />
大于数字验证：
<input type="text" id="f7" />
<script type="text/javascript">
var f6 = new LiveValidation('f7');
f6.add(Validate.Numericality, { minimum: 2000 } );
</script>
<Br>
小于数字验证 :
<input type="text" id="f8" />
<script type="text/javascript">
var f7 = new LiveValidation('f8');
f7.add(Validate.Numericality, { maximum: 2000 } );
</script>
<Br>
在2个数字之间..能用小数(2000--2003)：
<input type="text" id="f9" />
<script type="text/javascript">
var f8 = new LiveValidation('f9');
f8.add(Validate.Numericality, { minimum: 2000, maximum: 2003 } );
</script>
<Br>
在2个数字之间..不能用小数(2000--2003)：
<input type="text" id="f10" />
<script type="text/javascript">
var f9 = new LiveValidation('f10');
f9.add(Validate.Numericality, { minimum: 2000, maximum: 2003, onlyInteger: true } );
</script>
<Br> <Br> <Br> <Br>
长度验证(等于4位)：
<input type="text" id="f11" />
<script type="text/javascript">
var f10 = new LiveValidation('f11');
f10.add(Validate.Length, { is: 4 } );
</script>
<Br>
长度验证(大于等于4位)：
<input type="text" id="f12" />
<script type="text/javascript">
var f11 = new LiveValidation('f12');
f11.add(Validate.Length, { minimum: 4 } );
</script>
<Br>
长度验证(小于等于4位)：
<input type="text" id="f13" />
<script type="text/javascript">
var f11 = new LiveValidation('f13');
f11.add(Validate.Length, { maximum: 4 } );
</script>
<Br>
长度验证(4和8个字符长度)：
<input type="text" id="f14" />
<script type="text/javascript">
var f13 = new LiveValidation('f14');
f13.add(Validate.Length, { minimum: 4, maximum: 8 } );
</script>
<Br> <Br> <Br>
精确匹配(输入cssrain或者our或者cake): <input type="text" id="f15" />
<script type="text/javascript">
var f14 = new LiveValidation('f15');
f14.add(Validate.Inclusion, { within: [ 'cssrain' , 'our', 'cake' ] } );
</script>
<Br>部分匹配: <input type="text" id="f16" />
<script type="text/javascript">
var f15 = new LiveValidation('f16');
f15.add(Validate.Inclusion, { within: [ 'cssrain' , 'our', 'cake' ], partialMatch: true } );
</script> <Br><br><br>
跟上面2个例子相反（一个是包括，一个是排除）<br>
排斥精确匹配(输入cssrain或者our或者cake): <input type="text" id="f17" />
<script type="text/javascript">
var f16 = new LiveValidation('f17');
f16.add(Validate.Exclusion, { within: [ 'cssrain' , 'our', 'cake' ] } );
</script>
<Br>排斥部分匹配: <input type="text" id="f18" />
<script type="text/javascript">
var f17 = new LiveValidation('f18');
f17.add(Validate.Exclusion, { within: [ 'cssrain' , 'our', 'cake' ], partialMatch: true } );
</script>
<Br><Br><Br>
验证复选框:
<input type="checkbox" id="f19" value="1" class="checkbox" />
<script type="text/javascript">
var f18 = new LiveValidation('f19');
f18.add(Validate.Acceptance );
</script>
<Br>
密码确认： <input type="password" id="myPasswordField" />
<br />
确认密码:
<input type="password" id="f20" />
<script type="text/javascript">
var f19 = new LiveValidation('f20');
f19.add(Validate.Confirmation, { match: 'myPasswordField'} );
</script> <br>
Email验证:
<input type="text" id="f21" />
<script type="text/javascript">
var f20 = new LiveValidation('f21');
f20.add(Validate.Email );
</script> <br>
Email验证(综合校验不能小于10大于20位) <input type="text" id="f22" />
<script type="text/javascript">
var f21 = new LiveValidation('f22');
f21.add( Validate.Presence );
f21.add( Validate.Email );
f21.add(Validate.Length, { minimum: 10, maximum: 20 } );
</script> <Br><Br><Br>
验证整个表单的提交：
<form action="#" method="post">
<fieldset>
<p><label for="field1" class="displayBlock">Email (optional):</label><input type="text" id="field1" /></p>
<p><label for="field2" class="displayBlock">Acceptance (required):</label><input type="checkbox" id="field2" class="checkbox" /></p>
<p><label for="field3" class="displayBlock">Presence (required):</label><textarea id="field3" class="shallow" rows="2" cols="10"></textarea></p>
<p><input type="submit" class="submit" value="Test me!" /></p>
</fieldset>
</form>
<script type="text/javascript">
var field1 = new LiveValidation( 'field1', {onlyOnSubmit: true } );
field1.add( Validate.Email );
var field2 = new LiveValidation( 'field2', {onlyOnSubmit: true } );
field2.add( Validate.Acceptance );
var field3 = new LiveValidation( 'field3', {onlyOnSubmit: true } );
field3.add( Validate.Presence );
var automaticOnSubmit = field1.form.onsubmit;
field1.form.onsubmit = function(){
var valid = automaticOnSubmit();
if(valid)alert('The form is valid!');
return false;
}
</script> <br>
</div>
</div>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -