jQuery使用简单示例 validate 插件
2016-12-16 21:57
691 查看
摘录自：http://blog.csdn.net/u010320371/article/details/51104783用户登录
用户名
密码
确认密码
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery Validation 插件</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<form id="demoForm">
<fieldset>
<legend>用户登录</legend>
<p id="info"></p>
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">密码</label>
<input type="password" id="password" name="password"/>
</p>
<p>
<label for="confirm-password">确认密码</label>
<input type="password" id="confirm-password" name="confirm-password"/>
</p>
<p>
<input type="submit" value="登录"/>
</p>
</fieldset>
</form>
<script src="vendor/jquery-1.10.0.js"></script>
<script src="vendor/jquery.validate-1.13.1.js"></script>
<script>
var validator1;
$(document).ready(function () {
validator1 = $("#demoForm").validate({
debug: true,
rules: {
username: {
required: true,
minlength: 2,
maxlength: 10
},
password: {
required: true,
minlength: 2,
maxlength: 16
},
"confirm-password": {
equalTo: "#password"
}
},
messages: {
username: {
required: '请输入用户名',
minlength: '用户名不能小于2个字符',
maxlength: '用户名不能超过10个字符',
remote: '用户名不存在'
},
password: {
required: '请输入密码',
minlength: '密码不能小于2个字符',
maxlength: '密码不能超过16个字符'
},
"confirm-password": {
equalTo: "两次输入密码不一致"
}
},
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
$(element).fadeOut().fadeIn();
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
},
submitHandler: function (form) {
console.log($(form).serialize())
}
});
$("#check").click(function () {
console.log($("#demoForm").valid() ? "填写正确" : "填写不正确");
});
});
</script>
</body>
</html>
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery Validation 插件</title>
<link rel="stylesheet" href="style.css"/>
<script src="/Public/js/jquery-1.10.0.js"></script>
<script src="/Public/js/jquery.validate-1.13.1.js"></script>
</head>
<body>
<form id="demoForm">
<fieldset>
<legend>用户登录</legend>
<p id="info"></p>
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">密码</label>
<input type="password" id="password" name="password"/>
</p>
<p>
<label for="confirm-password">确认密码</label>
<input type="password" id="confirm-password" name="confirm-password"/>
</p>
<p>
<label for="email">邮箱</label>
<input type="text" id="email" name="email"/>
</p>
<p>
<label for="phone">手机</label>
<input type="text" id="phone" name="phone"/>
</p>
<p>
<input type="submit" value="登录"/>
</p>
</fieldset>
</form>
<script>
$(document).ready(function(){
$("#demoForm").validate({
rules:{
username:{
required:true,
minlength:2,
maxlength:10,
},
password:{
required:true,
minlength:2,
maxlength:16,
},
email:{
required:true,
email:true,
},
phone:{
required:true,
rangelength:[11,11],
number:true
},
"confirm-password":{
equalTo:"#password"
}
},
messages:{
username:{
required:'请输入用户名！',
minlength:'最小为两个字符！',
maxlength:'最大为十个字符！'
},
password:{
required:'请输入密码！',
minlength:'最小为两个字符！',
maxlength:'最大为十六个字符！'
},
email:{
required:'邮箱必填！',
email:'email格式填写不正确!'
},
phone:{
required:'请输入手机号码！',
rangelength:'手机号码为11位',
number:'手机号必须为数字'
},
'confirm-password':{
equalTo:'两次输入密码不一致！'
}
},
submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
alert("提交表单");
},
});
});
</script>
</body>
</html>
用户名
密码
确认密码
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery Validation 插件</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<form id="demoForm">
<fieldset>
<legend>用户登录</legend>
<p id="info"></p>
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">密码</label>
<input type="password" id="password" name="password"/>
</p>
<p>
<label for="confirm-password">确认密码</label>
<input type="password" id="confirm-password" name="confirm-password"/>
</p>
<p>
<input type="submit" value="登录"/>
</p>
</fieldset>
</form>
<script src="vendor/jquery-1.10.0.js"></script>
<script src="vendor/jquery.validate-1.13.1.js"></script>
<script>
var validator1;
$(document).ready(function () {
validator1 = $("#demoForm").validate({
debug: true,
rules: {
username: {
required: true,
minlength: 2,
maxlength: 10
},
password: {
required: true,
minlength: 2,
maxlength: 16
},
"confirm-password": {
equalTo: "#password"
}
},
messages: {
username: {
required: '请输入用户名',
minlength: '用户名不能小于2个字符',
maxlength: '用户名不能超过10个字符',
remote: '用户名不存在'
},
password: {
required: '请输入密码',
minlength: '密码不能小于2个字符',
maxlength: '密码不能超过16个字符'
},
"confirm-password": {
equalTo: "两次输入密码不一致"
}
},
highlight: function(element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
$(element).fadeOut().fadeIn();
},
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
},
submitHandler: function (form) {
console.log($(form).serialize())
}
});
$("#check").click(function () {
console.log($("#demoForm").valid() ? "填写正确" : "填写不正确");
});
});
</script>
</body>
</html>
[html] view plain copy
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jQuery Validation 插件</title>
<link rel="stylesheet" href="style.css"/>
<script src="/Public/js/jquery-1.10.0.js"></script>
<script src="/Public/js/jquery.validate-1.13.1.js"></script>
</head>
<body>
<form id="demoForm">
<fieldset>
<legend>用户登录</legend>
<p id="info"></p>
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username"/>
</p>
<p>
<label for="password">密码</label>
<input type="password" id="password" name="password"/>
</p>
<p>
<label for="confirm-password">确认密码</label>
<input type="password" id="confirm-password" name="confirm-password"/>
</p>
<p>
<label for="email">邮箱</label>
<input type="text" id="email" name="email"/>
</p>
<p>
<label for="phone">手机</label>
<input type="text" id="phone" name="phone"/>
</p>
<p>
<input type="submit" value="登录"/>
</p>
</fieldset>
</form>
<script>
$(document).ready(function(){
$("#demoForm").validate({
rules:{
username:{
required:true,
minlength:2,
maxlength:10,
},
password:{
required:true,
minlength:2,
maxlength:16,
},
email:{
required:true,
email:true,
},
phone:{
required:true,
rangelength:[11,11],
number:true
},
"confirm-password":{
equalTo:"#password"
}
},
messages:{
username:{
required:'请输入用户名！',
minlength:'最小为两个字符！',
maxlength:'最大为十个字符！'
},
password:{
required:'请输入密码！',
minlength:'最小为两个字符！',
maxlength:'最大为十六个字符！'
},
email:{
required:'邮箱必填！',
email:'email格式填写不正确!'
},
phone:{
required:'请输入手机号码！',
rangelength:'手机号码为11位',
number:'手机号必须为数字'
},
'confirm-password':{
equalTo:'两次输入密码不一致！'
}
},
submitHandler: function(form){ //表单提交句柄,为一回调函数，带一个参数：form
alert("提交表单");
},
});
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery使用简单示例 validate 插件
- jQuery.Validate表单验证插件的使用示例详解
- jquery.validate-表单验证插件的使用示例
- jquery.validate.js插件使用简单说明
- jQuery表格插件ParamQuery简单使用方法示例
- jquery validate 插件：(2)简单示例
- jQuery表格插件ParamQuery简单使用方法示例
- jquery上传插件AjaxUpload使用示例
- jquery的验证插件jquery.validate.js使用总结
- jQuery 兼容ie6的固定定位插件，使用简单
- 使用JQuery validate插件进行客户端验证
- 时时刷新 jQuery Timers插件 提供定时执行的功能，使用非常简单
- jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
- jquery的Dtree树插件简单使用
- JQuery扩展插件Validate 1 基本使用方法并打包下载
- ASP.NET jQuery 食谱12 (通过使用jQuery validation插件简单实现用户注册页面验证功能)
- 使用JQuery validate插件进行客户端验证
- jQuery文字高亮插件，使用简单，功能强大，支持FF/IE等主流浏览器
- 使用JQuery blockUI插件示例(加载数据时使用相当于updateprogress)
- jquery.query.js 插件（示例及简单应用）