jquery-validate的使用（一）

来源：互联网发布：动态截图软件编辑：程序博客网时间：2024/06/09 14:15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery-validate表单验证</title>
<scriptsrc="jquery-1.11.1.min.js"></script>
<scriptsrc="jquery-validation-1.14.0"></script>
<scriptsrc="messages_zh.js"></script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>输入您的名字，邮箱，URL，备注。</legend>
<p>
<labelfor="cname">Name (必需, 最小两个字母)</label>
<inputid="cname" name="name" minlength="2" type="text" required>
</p>
<p>
<labelfor="cemail">E-Mail (必需)</label>
<inputid="cemail"type="email"name="email"required>
</p>
<p>
<labelfor="curl">URL (可选)</label>
<inputid="curl" type="url" name="url">
</p>
<p>
<labelfor="ccomment">备注 (必需)</label>
<textareaid="ccomment"name="comment"required></textarea>
</p>
<p>
<inputclass="submit"type="submit"value="Submit">
</p>
</fieldset>
</form>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>验证完整的表单</legend>
<p>
<labelfor="firstname">名字</label>
<inputid="firstname"name="firstname"type="text">
</p>
<p>
<labelfor="lastname">姓氏</label>
<inputid="lastname"name="lastname"type="text">
</p>
<p>
<labelfor="username">用户名</label>
<inputid="username"name="username"type="text">
</p>
<p>
<labelfor="password">密码</label>
<inputid="password"name="password"type="password">
</p>
<p>
<labelfor="confirm_password">验证密码</label>
<inputid="confirm_password"name="confirm_password"type="password">
</p>
<p>
<labelfor="email">Email</label>
<inputid="email" name="email" type="email">
</p>
<p>
<labelfor="agree">请同意我们的声明</label>
<inputtype="checkbox"class="checkbox"id="agree" name="agree">
</p>
<p>
<labelfor="newsletter">我乐意接收新信息</label>
<inputtype="checkbox"class="checkbox"id="newsletter"name="newsletter">
</p>
<fieldsetid="newsletter_topics">
<legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示
让它可见</legend>
<labelfor="topic_marketflash">
<inputtype="checkbox"id="topic_marketflash"value="marketflash"name="topic">Marketflash
</label>
<labelfor="topic_fuzz">
<inputtype="checkbox"id="topic_fuzz"value="fuzz"name="topic">Latest fuzz
</label>
<labelfor="topic_digester">
<inputtype="checkbox"id="topic_digester"value="digester"name="topic">Mailing list digester
</label>
<labelfor="topic"class="error">Please select at least two topics you'd like to receive.</label>
</fieldset>
<p>
<inputclass="submit"type="submit"value="提交">
</p>
</fieldset>
</form>


<script>

$(function(){
/*jQuery Validate提供了中文信息提示包，位于下载包的 dist/localization/messages_zh.js，内容如下：*/
/*(function(factory){
if(typeof define === 'function' && define.amd ) {
define(['jquery','../jquery.validate'],factory);
}else{
factory(jQuery);
}
})(function($){
$.extend($.validator.messages, {
required:'这是必填字段',
remote:"请修正此字段",
email:"请输入有效的电子邮箱地址",
date:"请输入有效的日期",
dateISO:"请输入有效的日期(YYYY-MM-DD)",
number:"请输入有效数字"，
digits:"只能输入数字",
creditcard:"请输入有效的信用卡号码",
equalTo:"你的输入不相同",
extension:"请输入有效的后缀",
maxlength:$.validator.format("最多可以输入 {0} 个字符"),
minlength:$.validator.format("最少输入 {0} 个字符"),
rangelength:$.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
range:$.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
max: $.validator.format("请输入不大于 {0} 的数值"),
min:$.validator.format("请输入不小于 {0} 的数值")
});
});*/
/*你可以将该本地化信息文件 dist/localization/messages_zh.js 引入到页面：*/
/*<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js">
</script>*/

// 1.将校验规则写在控件中
$.validator.setDefaults({
submitHandler: function(){
alert("提交事件");
}
});
$().ready(function(){
$("#commentForm").validate();
});

// 2.将校验规则写在js代码中
$().raedy(function(){
$("#signupForm").validate({
rules:{
firstname:'required'，
lastname:'required',
username:{
required:true,
minlength:2
},
password:{
required:true,
minlength:5
},
confirm_password:{
required:true,
minlength:5,
equalTo:'#password'
},
email:{
required:true,
email:true
},
topic:{
required:'#newsletter:checked',
minlength:2
},
agree:'required'
},
messages: {
firstname:'请输入您的名字',
lastname:'请输入您的姓氏',
username:{
required:'请输入用户名',
minlength:'用户名必须由两个字母主城'
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母",
equalTo: "两次密码输入不一致"
},
email: "请输入一个正确的邮箱",
agree: "请接受我们的声明",
topic: "请选择两个主题"
}
})
})
/*
required:true 值是必须的。
required：’#aa:checked' 表达式的值为真，则需要验证。
required：function（）{}返回为真，表示需要验证。
后两种常用于，表单中需要同时填或不填的元素。
*/
// 常用方法及注意问题
// 1、用其他方式替代默认的 SUBMIT

$().ready(function() {
$("#signupForm").validate({
submitHandler:function(form){
alert("提交事件!");
form.submit();
} 
});
});

// 使用 ajax 方式

$(".selector").validate({
submitHandler: function(form) 
{ 
$(form).ajaxSubmit();
} 
}) 

// 可以设置 validate 的默认值，写法如下：

$.validator.setDefaults({
submitHandler: function(form) { alert("提交事件!");form.submit(); }
});
// 如果想提交表单, 需要使用 form.submit()，而不要使用 $(form).submit()。




})
</script>
</body>
</html>
阅读全文
0 0