This commit is contained in:
2025-04-26 11:07:05 +08:00
commit abf553c41b
4942 changed files with 930993 additions and 0 deletions

View File

@@ -0,0 +1,38 @@
body {font: 100%/1.5 "Helvetica", "Arial", "Microsoft Yahei";}
input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea,
[contenteditable] {
width:250px; height:26px; line-height: 26px;
padding: 0;
padding-left: 5px;
box-sizing: border-box;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
[contenteditable]:focus {
outline: none;
border-color: #1E90FF;
box-shadow: 0 0 4px rgba(30,144,255,.5);
}
[contenteditable] {display: inline-block; overflow: hidden; white-space: nowrap;}
.form {max-width:600px;margin: 40px 20px;}
.form h3 {font-weight: 400; margin: 1.2em 0 .8em;}
.form p {margin: .8em 0;}
.form .note {color:#ccc; font-weight:200; font-size: .9em}
.form-item {margin: .8em 0;}
.form-item .label {display:block; margin:10px 0 2px; font-size:14px;}
.form-item .n-invalid {border:1px solid #c00;}
.form-item .n-invalid:focus {outline: none; border-color:#c00; box-shadow: 0 0 4px rgba(192,0,0,0.5);}
.form-item button {padding:5px 20px;}
.form-item .input-sm {width:120px;}

View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Full Example</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<form class="form" data-validator-option="{timely:2, focusCleanup:true}">
<div class="form-item">
<label class="label">Username</label>
<input type="text" name="username"
data-rule="required;username;"
data-rule-username="[/^[\w\d]{3,12}$/, 'Please enter 3-12 digits, letters, underscores']"
data-tip="You can use letters, numbers and periods"
>
</div>
<div class="form-item">
<label class="label">Password</label>
<input type="password" name="pwd"
data-rule="Password: required; length(8~16)"
data-tip="Please fill in at least eight characters"
>
</div>
<div class="form-item">
<label class="label">Verify Password</label>
<input type="password" name="pwdAgain" data-rule="Verify Password: required; match(pwd)">
</div>
<div class="form-item">
<label class="label">Gender</label>
<select name="gender" data-rule="required">
<option value="">select ...</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Other</option>
</select>
</div>
<div class="form-item">
<label class="label">Email</label>
<input type="text" name="email" data-rule="required;email">
</div>
<div class="form-item">
<label class="label">Interest</label>
<label><input type="checkbox" name="interest" data-rule="checked">sports</label>
<label><input type="checkbox" name="interest">movie</label>
<label><input type="checkbox" name="interest">game</label>
</div>
<div class="form-item">
<label class="label">Note</label>
<textarea data-rule="required;"></textarea>
</div>
<div class="form-item">
<label><input type="checkbox" id="agree_arguments" data-rule="checked">I agree to the service agreement.</label>
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script src="../dist/jquery.validator.min.js?local=en"></script>
</body>
</html>

View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Load By RequireJS</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<form id="form1" class="form">
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<input type="password" name="password" data-rule="required;" placeholder="Password">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/requirejs/2.1.22/require.min.js"></script>
<script>
requirejs.config({
baseUrl: '../',
paths: {
jquery: 'https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min',
validator: 'dist/local/zh-CN'
},
shim: {
validator: ['../dist/jquery.validator.js?css']
}
});
// Way 1: Use plugin methods
require(['jquery', 'validator'], function($){
$('#form1').validator({
timely: 2,
stopOnError: true,
theme: 'yellow_right'
});
});
// Way 2: Just include nice-validator
// require(['validator']);
// Way 3: Define a module dependency nice-validator
// define('some-module', ['jquery', 'validator'], function($){
// // some code
// });
</script>
</body>
</html>

View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Load in Global</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<form class="form" data-validator-option="{timely:2}">
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<input type="password" name="password" data-rule="required;" placeholder="Password">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script src="../dist/jquery.validator.js?local=en"></script>
</body>
</html>

View File

@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display</title>
<link rel="stylesheet" href="demo.css">
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script src="../dist/jquery.validator.js?local=en"></script>
</head>
<body>
<form class="form" data-validator-option="{timely:2}">
<h3>Default behavior</h3>
<p class="note">data-rule="required"</p>
<div class="form-item">
<input type="text" name="name" data-rule="required">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:2}">
<h3>Set the field display by rule string</h3>
<p class="note">data-rule="Name: required"</p>
<div class="form-item">
<input type="text" name="name" data-rule="Name:required">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:2}">
<h3>Set the field display by bind display</h3>
<p class="note">data-rule="required" data-display="Name"</p>
<div class="form-item">
<input type="text" name="name" data-rule="required" data-display="Name">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" id="form4">
<h3>Dynamic get field display.</h3>
<div class="form-item">
<label class="label">Name</label>
<input type="text" name="name" data-rule="required">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<script>
$('#form4').validator({
timely:2,
display: function(el) {
return $(el).closest('.form-item').find('label.label').text();
}
});
</script>
</body>
</html>

View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Target</title>
<link rel="stylesheet" href="demo.css">
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script src="../dist/jquery.validator.js?local=en"></script>
</head>
<body>
<form class="form" data-validator-option="{timely:2, theme:'yellow_right'}">
<h3>Target to other input</h3>
<div class="form-item">
<label class="label">Name</label>
<input type="text" class="input-sm" name="firstName" data-target="#lastName" data-rule="required" placeholder="First Name">
<input type="text" class="input-sm" name="lastName" id="lastName" data-rule="required" placeholder="Last Name">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:2, theme:'simple_right'}">
<h3>Target to "msg-box"</h3>
<div class="form-item">
<input type="text" name="name" data-rule="Name:required" data-target="#holdMsg" placeholder="Name">
</div>
<div class="form-item">
<button type="submit">Submit</button>
<span class="msg-box" id="holdMsg"></span>
</div>
</form>
<form class="form" data-validator-option="{timely:2}">
<h3>Target to a container</h3>
<div id="msgContainer"></div>
<div class="form-item">
<input type="text" name="name" data-rule="Name:required" data-target="#msgContainer">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" id="form4">
<h3>Dynamic message place.</h3>
<div class="form-item">
<label class="label">Name</label>
<input type="text" class="input-sm" name="firstName" data-rule="required" placeholder="First Name">
<input type="text" class="input-sm" name="lastName" data-rule="required" placeholder="Last Name">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<script>
$('#form4').validator({
timely:2,
stopOnError: true,
display: function(input) {
return $(input).attr('placeholder');
},
target: function(input) {
var $formitem = $(input).closest('.form-item'),
$msgbox = $formitem.find('span.msg-box');
if (!$msgbox.length) {
$msgbox = $('<span class="msg-box"></span>').appendTo($formitem);
}
return $msgbox;
}
});
</script>
</body>
</html>

View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Themes</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<form class="form" data-validator-option="{timely:2}">
<h3>Default theme</h3>
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<input type="password" name="password" data-rule="required;length(6~16)" placeholder="Password">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:2, theme:'yellow_right'}">
<h3>Tip on right</h3>
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<input type="password" name="password" data-rule="required;length(6~16)" placeholder="Password">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:2, theme:'yellow_right_effect'}">
<h3>Tip with an effect</h3>
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:2, theme:'yellow_top'}">
<h3>Tip on top</h3>
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:2, theme:'simple_right', showOk:''}">
<h3>Simple message on right</h3>
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:2, theme:'simple_bottom'}">
<h3>Simple message on bottom</h3>
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script src="../dist/jquery.validator.min.js?local=en"></script>
</body>
</html>

View File

@@ -0,0 +1,105 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Timely</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<form class="form" data-validator-option="{timely:0}">
<h3>timely: 0 <span class="note">(only validation on submit)</span></h3>
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:1, focusCleanup:true}">
<h3>timely: 1 <span class="note">(default, validation on blur)</span></h3>
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:2, focusCleanup:true}">
<h3>timely: 2 <span class="note">(validation on input)</span></h3>
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:3, focusCleanup:true}">
<h3>timely: 3 <span class="note">(validation on input and blur)</span></h3>
<p>Unlike "timely:2", when focusout an empty field.</p>
<div class="form-item">
<input type="text" name="user[email]"
data-rule="required;email"
data-tip="Please fill a email." placeholder="Email">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:8, focusCleanup:true, theme:'yellow_right'}">
<h3>timely: 8 <span class="note">(validation on input, show every rule message)</span></h3>
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{timely:9, focusCleanup:true, theme:'yellow_right'}">
<h3>timely: 9 <span class="note">(validation on input and blur, show every rule message)</span></h3>
<p>Unlike "timely:8", when focusout an empty field.</p>
<div class="form-item">
<input type="text" name="user[email]" data-rule="required;email" placeholder="Email">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form class="form" data-validator-option="{focusCleanup:true, theme:'yellow_right'}">
<h3>Set different timely value in one form</h3>
<div class="form-item">
<input type="text" name="field0" data-rule="required;length(6~)" data-timely="0" placeholder="timely:0, submit">
</div>
<div class="form-item">
<input type="text" name="field1" data-rule="required;length(6~)" data-timely="1" placeholder="timely:1, submit / focusout" data-ok="">
</div>
<div class="form-item">
<input type="text" name="field2" data-rule="required;length(6~)" data-timely="2" placeholder="timely:2, submit / input" data-tip="Just a test!">
</div>
<div class="form-item">
<input type="text" name="field3" data-rule="required;length(6~)" data-timely="3" placeholder="timely:3, submit / input / focusout">
</div>
<div class="form-item">
<input type="text" name="field8" data-rule="required;length(6~)" data-timely="8" placeholder="timely:8, submit / input">
</div>
<div class="form-item">
<input type="text" name="field9" data-rule="required;length(6~)" data-timely="9" placeholder="timely:9, submit / input / focusout">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script src="../dist/jquery.validator.js?local=en"></script>
</body>
</html>

View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Required By Condition</title>
<link rel="stylesheet" href="demo.css">
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script src="../dist/jquery.validator.min.js?local=en"></script>
</head>
<body>
<form id="form1" class="form" data-validator-option="{timely:3,focusCleanup:true}">
<h3>required( dependency-expression )</h3>
<div class="form-item">
<label for="isCompany"><input type="checkbox" id="isCompany" checked>Company</label>
</div>
<div class="form-item">
<input type="text" name="companyName" data-rule="required(#isCompany:checked)">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<form id="form2" class="form">
<h3>required( dependency-callback )</h3>
<div class="form-item">
<label><input type="checkbox" id="isPersonal" checked>Personal</label>
</div>
<div class="form-item">
<input type="text" name="email">
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<script>
$('#form2').validator({
timely: 3,
focusCleanup: true,
rules: {
isPersonal: function() {
return $('#isPersonal').prop('checked');
}
},
fields: {
email: 'required(isPersonal); email'
}
});
</script>
</body>
</html>

View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Required From Group</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<form class="form" data-validator-option="{timely:2,showOk:''}">
<div class="form-item">
<input type="text" class="contact" name="mobile" placeholder="手机号"
data-rule="required(from, .contact); mobile"
data-msg-required="请至少填写一种联系方式">
</div>
<div class="form-item">
<input type="text" class="contact" name="tel" placeholder="电话"
data-rule="required(from, .contact); tel">
</div>
<div class="form-item">
<input type="text" class="contact" name="email" placeholder="邮箱"
data-rule="required(from, .contact); email">
</div>
<div class="form-item">
<button type="submit">提交</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script src="../dist/jquery.validator.min.js?local=zh-CN"></script>
</body>
</html>

View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contenteditable</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<form id="form1" class="form" data-validator-option="{timely:2}">
<div class="form-item">
<div contenteditable id="email" data-rule="required;email"></div>
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script src="../dist/jquery.validator.js?local=en"></script>
<script>
$('#form1').on('valid.form', function(){
alert('ok')
});
</script>
</body>
</html>

View File

@@ -0,0 +1,94 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Used With Bootstrap</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.n-bootstrap .msg-wrap {font-size: 14px; margin-top: 3px}
</style>
</head>
<body>
<div class="container" style="margin-top:30px">
<div class="col-md-5 col-md-offset-2">
<form id="form1" data-validator-option="{theme:'bootstrap', timely:2, stopOnError:true}">
<div class="form-group">
<label class="control-label">Username</label>
<input type="text" class="form-control" name="username"
data-rule="required;username;"
data-rule-username="[/[\w\d]{4,30}/, 'Please enter 3-12 digits, letters, underscores']"
data-tip="You can use letters, numbers and periods"
>
</div>
<div class="form-group">
<label class="control-label">Password</label>
<input type="password" class="form-control" name="pwd"
data-rule="Password: required; length(8~16)"
data-tip="Please fill in at least eight characters"
>
</div>
<div class="form-group">
<label class="control-label">Verify Password</label>
<input type="password" class="form-control" name="pwdAgain" data-rule="Verify Password: required; match(pwd)">
</div>
<div class="form-group">
<label class="control-label">Gender</label>
<select class="form-control" name="gender" data-rule="required">
<option value="">select ...</option>
<option value="1">Male</option>
<option value="2">Female</option>
<option value="3">Other</option>
</select>
</div>
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" class="form-control" name="email" data-rule="required;email">
</div>
<div class="form-group">
<label class="control-label">Interest</label>
<div class="">
<label class="checkbox-inline"><input type="checkbox" name="interest" data-rule="checked">sports</label>
<label class="checkbox-inline"><input type="checkbox" name="interest">movie</label>
<label class="checkbox-inline"><input type="checkbox" name="interest">game</label>
</div>
</div>
<div class="form-group">
<label class="control-label">Note</label>
<textarea class="form-control" data-rule="required;"></textarea>
</div>
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" id="agree_arguments" data-rule="checked">I agree to the service agreement.</label>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">reset</button>
</div>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script src="../dist/jquery.validator.js?local=en"></script>
<script>
$(function(){
// Custom theme
$.validator.setTheme('bootstrap', {
validClass: 'has-success',
invalidClass: 'has-error',
bindClassTo: '.form-group',
formClass: 'n-default n-bootstrap',
msgClass: 'n-right'
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Used With jQuery Form Plugin</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<form id="form1" class="form" data-validator-option="{timely:2, focusCleanup:true}">
<div class="form-item">
<label class="label">Username</label>
<input type="text" name="username"
data-rule="required; username;"
data-rule-username="[/[\w\d]{4,30}/, 'Please enter 3-12 digits, letters, underscores']"
data-tip="You can use letters, numbers and periods"
>
</div>
<div class="form-item">
<label class="label">Password</label>
<input type="password" name="pwd"
data-rule="Password: required; length(8~16)"
data-tip="Please fill in at least eight characters"
>
</div>
<div class="form-item">
<button type="submit">Submit</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.form/3.51/jquery.form.min.js"></script>
<script src="../dist/jquery.validator.js?local=en"></script>
<script>
$(function(){
// See: http://malsup.com/jquery/form/#api
// Way 1: use .ajaxForm() directly
$('#form1').ajaxForm({
url: 'http://www.mocky.io/v2/5703d5b52700006b2606b00e',
success: function(d) {
alert(d.message)
}
});
// Way 2: use .ajaxSubmit() after valid form
/*$('#form1').on('valid.form', function(){
$(this).ajaxSubmit({
url: 'http://www.mocky.io/v2/5703d5b52700006b2606b00e',
success: function(d) {
alert(d.message)
}
});
});*/
// Way 3: ditto
/*$('#form1').validator({
valid: function(){
$(this).ajaxSubmit({
url: 'http://www.mocky.io/v2/5703d5b52700006b2606b00e',
success: function(d) {
alert(d.message)
}
});
}
});*/
});
</script>
</body>
</html>