Skip to content

样式 #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

样式 #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7a84d5d
add index.html
hongjhong Apr 22, 2016
f25041d
some css changes
hongjhong Apr 22, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@
<script src="jvalidator.min.js"></script>
<style>
input { outline:none; border:1px solid #000; }
h2 { width:150px;height:24px;display:block;float:left;line-height:20px;}
form { clear:both;width:600px;min-height:100px;display:block;float:right;margin-right: 50px;border-bottom: 1px solid #fff;}
</style>
<script>

Expand Down Expand Up @@ -55,7 +57,7 @@
}
</script>
</head>
<body style="padding:10px;">
<body style="padding:10px; width:50%; margin:0 auto; background:rgb(239,213,141);">

<h2>简单表单验证</h2>

Expand Down
333 changes: 333 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,333 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Qunar.com</title>
<meta name="Robots" content="index,follow,NOODP" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<script src="jvalidator.min.js"></script>
<style>
input { outline:none; border:1px solid #000; }
</style>
<script>

$.jvalidator.addPattern('must',{
message : '必须写成12345' ,
validate : function( value , done ) {
done( value == "12345" );
}
});

function initForm( formSelector , options ) {
var jv = $(formSelector).jvalidator();
options = options || {};

$(formSelector).find('input:button').bind('click',function(evt){
jv.validateAll(function( result , elements ){
if( result ) {
alert('验证通过.');
} else {
var msg = ['验证未通过.']
for(var i=0; i<elements.length; i++){
msg.push( elements[i].getMessage() )
}
alert( msg.join('\n') );
}
});
});

if( options.events ) {
jv.when( options.events );

jv.success(function(){
$(this.element).css('border','1px solid #000');
});

jv.fail(function( $event , errors ){
$(this.element).css('border','1px solid #f00');
});
}

return jv;
}
</script>
</head>
<body style="padding:10px;">

<h2>简单表单验证</h2>

<form id="form1">
<pre>required</pre>
<input name="name" data-jvalidator-pattern="required" />
<input type="button" value="验证" />
</form>

<form id="form2">
<pre>numeric</pre>
<input name="name" data-jvalidator-pattern="numeric" />
<input type="button" value="验证" />
</form>

<form id="form3">
<pre>numeric&greater_than[5] 必须大于5才可以</pre>
<input name="name" data-jvalidator-pattern="numeric&greater_than[5]" />
<input type="button" value="验证" />
</form>

<form id="form4">
<pre>non-required|numeric|alpha</pre>
<input name="name" data-jvalidator-pattern="non-required|numeric|alpha" />
<input type="button" value="验证" />
</form>

<script>
initForm('#form1');
initForm('#form2');
initForm('#form3');
initForm('#form4');
</script>

<h2>单框验证事件</h2>

<form id="form5">
<pre>numeric|alpha，<i>blur</i> 时触发</pre>
<input name="name" data-jvalidator-pattern="numeric|alpha" />
</form>

<script>
var f = initForm('#form5',{
events : ['blur']
});
</script>

<form id="form6">
<pre>numeric|alpha，<i>keypress</i> 时触发</pre>
<input name="name" data-jvalidator-pattern="numeric|alpha" />
</form>

<script>
var f = initForm('#form6',{
events : ['keyup']
});
</script>

<form id="form6_1">
<pre>自定义规则：值必须为<i>12345</i></pre>
<input name="name" data-jvalidator-pattern="must" />
<input type="button" value="验证" />
</form>

<script>
var f = initForm('#form6_1');
</script>

<h2>高级验证规则</h2>

<form id="form7">
<pre>重复密码</pre>
<input name="pass" data-jvalidator-cname="密码" data-jvalidator-pattern="alpha_numeric" />
<input name="repass" data-jvalidator-pattern="match[@pass]" />
<input type="button" value="验证" />
</form>

<script>
var f = initForm('#form7');
</script>

<form id="form8">
<pre>重复密码，单框验证</pre>
<input name="pass" data-jvalidator-pattern="alpha_numeric" />
<input name="repass" data-jvalidator-pattern="match[@pass]" />
</form>

<script>
var f = initForm('#form8',{
events : ['keyup','blur']
});
</script>

<h2>不仅是 input</h2>

<form id="form9">
<pre>select, checkbox, radiobox, textarea</pre>
<select data-jvalidator-pattern="match[aaa]">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
</select> 必须选择 aaa
<br />
<label><input name="chk" type="checkbox" value="1" data-jvalidator-pattern="contain[1]|contain[2]" />1</label>
<label><input name="chk" type="checkbox" value="2" />2</label>
<label><input name="chk" type="checkbox" value="3" />3</label>
<label><input name="chk" type="checkbox" value="4" />4</label>
<label><input name="chk" type="checkbox" value="5" />5</label>
必须包含 1 或 2
<br />
<label><input name="rdo" type="radio" value="1" data-jvalidator-pattern="match[1]|match[2]" />1</label>
<label><input name="rdo" type="radio" value="2" />2</label>
<label><input name="rdo" type="radio" value="3" />3</label>
<label><input name="rdo" type="radio" value="4" />4</label>
<label><input name="rdo" type="radio" value="5" />5</label>
必须选择 1 或 2
<br />
<textarea data-jvalidator-pattern="required"></textarea>
必须有内容
<br />
<input type="button" value="验证" />
</form>

<script>
var f = initForm('#form9');
</script>


<form id="form10">
<pre>组合验证 1： a.第一个框必须是字母或数字 b.判断第二个框是否与第一个相同</pre>
<input name="pwd" type="password" data-jvalidator-pattern="alpha_numeric" />
<input name="repwd" type="password" data-jvalidator-pattern="match[@pwd]" />
<input type="button" value="验证" />
</form>

<script>
var f = initForm('#form10');
</script>


<form id="form11">
<pre>组合验证 2： input中必须包含select选择的内容</pre>
<select name="name">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
</select>
<input data-jvalidator-pattern="contain[@name]" />
<input type="button" value="验证" />
</form>

<script>
var f = initForm('#form11');
</script>

<form id="form12">
<pre>组合验证 3： 如果select选择的是aaa，那么input必须是111. 如果select选择的是bbb，那么input必须是222. </pre>
<em>城市：</em>
<select data-jvalidator-cname="城市" name="name">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
</select>
<input data-jvalidator-pattern="(@name[aaa]&match[111])|(@name[bbb]&match[222])" />
<input type="button" value="验证" />
</form>

<script>
var f = initForm('#form12');
</script>

<form id="form13">
<pre>组合规则 4： 如果选择身份证，则按身份证规则校验。 如果选择护照，则按护照规则校验（0到20位字母或数字）</pre>
<label><input name="type" type="radio" value="idcard" checked="checked" />身份证</label>
<label><input name="type" type="radio" value="passport" />护照</label>
<br />
<input data-jvalidator-pattern="(@type[idcard]&idcard)|(@type[passport]&passport)" />
<input type="button" value="验证" />
</form>

<script>
var f = initForm('#form13');
</script>


<h2>提示信息</h2>

<form id="form14">
<pre>默认提示信息</pre>
<input data-jvalidator-pattern="required&numeric" /><em></em>
<br />
<input type="button" value="验证" />
</form>

<script>
var f = initForm('#form14');
f.setMessage( 'required' , '亲，你必须写点儿内容。' )
f.setMessage( 'numeric' , '亲，你不能填写%val的，这里必须是数字哦。' )
</script>

<form id="form16">
<pre>使用自定义提示信息变量</pre>
<select name="city" data-jvalidator-cname="城市">
<option value="北京">北京</option>
<option value="上海">上海</option>
</select>
姓名：<input name="name" data-jvalidator-cname="姓名" data-jvalidator-pattern="required" />
护照：<input name="passport" data-jvalidator-pattern="required" />
<input type="button" value="验证" />
</form>

<script>
var f = initForm('#form16');
f.setMessage( '@name' , 'required' , '(required提示) %cname(%name)字段必须写哦，而且我也知道你选的@city是=@city哦。' )
f.setMessage( '@passport' , 'required' , '(required提示) 护照必须填的亲！' )
</script>

<h2>其它</h2>

<form id="form17">
<pre>关于placeholder. 正确：随便输入点儿什么</pre>
<input data-jvalidator-placeholder="请输入文字" value="请输入文字" data-jvalidator-pattern="required" />
<input type="button" value="验证" />
</form>

<script>
var f = initForm('#form17');
</script>


<form id="form17_1">
<pre>异步验证：必须是数字，且等3秒才会验证成功</pre>
<input data-jvalidator-pattern="numeric&checked" />
<input type="button" value="验证" />
</form>

<script>
var f = initForm('#form17_1');
$.jvalidator.addPattern('checked',{
message : "异步验证" ,
validate : function( value , done ){
setTimeout(function(){
done(true)
},3000)
}
});
</script>

<form id="form18">
<pre>异步+组合验证. 正确：输入身份证或`北京`</pre>
<label><input name="type" type="radio" value="idcard" checked="checked" />身份证</label>
<label><input name="type" type="radio" value="beijing" />ip北京</label>
<br />
<input data-jvalidator-pattern="(@type[idcard]&idcard)|(@type[beijing]&beijing)" />
<input type="button" value="验证" />
</form>

<script>
var f = initForm('#form18');
$.jvalidator.addPattern('beijing',{
message : "当前位置必须是在北京" ,
validate : function( value , done ){
$.ajax({
url : "http://ws.qunar.com/ips.jcp" ,
dataType : "jsonp" ,
jsonpCallback : "callback" ,
success : function( data, textStatus, jqXHR ){
done( data.city == value );
}
});
}
});
</script>



</body>
</html>