深入学习jQuery Validate表单验证(二)
本文实例介绍了jQueryValidate表单验证,分享给大家供大家参考,具体内容如下
一、添加一个另外一个插件jquery.validate.messages_cn.js。
改变默认提示方式。
/*
*TranslateddefaultmessagesforthejQueryvalidationplugin.
*Language:CN
*Author:FaylandLam<faylandatgmaildotcom>
*/
jQuery.extend(jQuery.validator.messages,{
required:"必选字段",
remote:"请修正该字段",
email:"请输入正确格式的电子邮件",
url:"请输入合法的网址",
date:"请输入合法的日期",
dateISO:"请输入合法的日期(ISO).",
number:"请输入合法的数字",
digits:"只能输入整数",
creditcard:"请输入合法的信用卡号",
equalTo:"请再次输入相同的值",
accept:"请输入拥有合法后缀名的字符串",
maxlength:jQuery.format("请输入一个长度最多是{0}的字符串"),
minlength:jQuery.format("请输入一个长度最少是{0}的字符串"),
rangelength:jQuery.format("请输入一个长度介于{0}和{1}之间的字符串"),
range:jQuery.format("请输入一个介于{0}和{1}之间的值"),
max:jQuery.format("请输入一个最大为{0}的值"),
min:jQuery.format("请输入一个最小为{0}的值")
});
二、jQuery表单验证插件----通过name属性来关联字段来验证,将校验规则写到js代码中。
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jQuery表单验证插件----通过name属性来关联字段来验证</title>
<scriptsrc="../../scripts/jquery-1.3.1.js"type="text/javascript"></script>
<scriptsrc="lib/jquery.validate.js"type="text/javascript"></script>
<scriptsrc="lib/jquery.validate.messages_cn.js"type="text/javascript"></script>
<styletype="text/css">
*{font-family:Verdana;font-size:96%;}
label{width:10em;float:left;}
label.error{float:none;color:red;padding-left:.5em;vertical-align:top;}
p{clear:both;}
.submit{margin-left:12em;}
em{font-weight:bold;padding-right:1em;vertical-align:top;}
</style>
<scripttype="text/javascript">
$(document).ready(function(){
$("#commentForm").validate({
rules:{
username:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
url:"url",
comment:"required"
}
});
});
</script>
</head>
<body>
<formclass="cmxform"id="commentForm"method="get"action="">
<fieldset>
<legend>jQuery表单验证插件----通过name属性来关联字段来验证</legend>
<p>
<labelfor="cusername">姓名</label>
<em>*</em><inputid="cusername"name="username"size="25"/>
</p>
<p>
<labelfor="cemail">电子邮件</label>
<em>*</em><inputid="cemail"name="email"size="25"/>
</p>
<p>
<labelfor="curl">网址</label>
<em></em><inputid="curl"name="url"size="25"value=""/>
</p>
<p>
<labelfor="ccomment">你的评论</label>
<em>*</em><textareaid="ccomment"name="comment"cols="22"></textarea>
</p>
<p>
<inputclass="submit"type="submit"value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>
以上就是本文的全部内容,希望对大家学习jQueryValidate表单验证有所帮助。