首页 > 代码库 > jquery.validate的使用
jquery.validate的使用
在页面上面引用
<script type="text/JavaScript" src=http://www.mamicode.com/"js/jQuery.js"></script><script type="text/JavaScript" src=http://www.mamicode.com/"js/jquery.form.js"></script><script type="text/JavaScript" src=http://www.mamicode.com/"js/jquery.validate.js"></script><script type="text/JavaScript" src=http://www.mamicode.com/"validator/jquery.metadata.js"></script><script type="text/JavaScript" src=http://www.mamicode.com/"js/localization/messages_cn.js"></script>
页面html代码
<form id=‘form1‘> <fieldset> <legend>jquery.validate+jquery.form</legend> <p> <label for=‘cusername‘> 姓名</label><em>*</em> <input id=‘cusername‘ name=‘username‘ class="{required:true,minlength:5}" size=‘25‘ /> </p> <p> <label for=‘cemail‘> 电子邮件</label><em>*</em> <input id=‘cemail‘ name=‘email‘ class="{required:true,email:true}" size=‘25‘ /> </p> <p> <input class=‘submit‘ type=‘submit‘ value=http://www.mamicode.com/‘提交‘> </p> </fieldset> </form>
执行js代码
$().ready( function() { $(function() { //表单验证JS $("#form1").validate({ //出错时添加的标签 errorElement: "span", success: function(label) { //正确时的样式 label.text(" ").addClass("success"); } }); }); });
在html的代码中input的class属性为{required:true,email:true}意思是在js/localization/messages_cn.js里面有说明,代码如下
jQuery.extend(jQuery.validator.messages, { required: "必填字段", remote: "请修正该字段", email: "请输入正确格式的电子邮件", url: "请输入合法的网址", date: "请输入合法的日期", dateISO: "请输入合法的日期 (ISO).", number: "请输入合法的数字", digits: "只能输入整数", creditcard: "请输入合法的信用卡号", equalTo: "请再次输入相同的值", accept: "请输入拥有合法后缀名的字符串", maxlength: jQuery.validator.format("请输入一个长度最多是 {0} 的字符串"), minlength: jQuery.validator.format("请输入一个长度最少是 {0} 的字符串"), rangelength: jQuery.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"), range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"), max: jQuery.validator.format("请输入一个最大为 {0} 的值"), min: jQuery.validator.format("请输入一个最小为 {0} 的值")});
如果需要将提交方式改成ajax提交
<form id=‘form1‘> <fieldset> <legend>jquery.validate+jquery.form</legend> <p> <label for=‘cusername‘> 姓名</label><em>*</em> <input id=‘cusername‘ name=‘username‘ class="{required:true,minlength:5}" size=‘25‘ /> </p> <p> <label for=‘cemail‘> 电子邮件</label><em>*</em> <input id=‘cemail‘ name=‘email‘ class="{required:true,email:true}" size=‘25‘ /> </p> <p> <input type=‘button‘ id=‘btnSubmit‘ value=‘提交‘> </p> </fieldset> </form>
js代码是
$("#btnSubmit").click(function () { var param = $("#form1").serialize();//序列化 if ($("#form1").valid()) {//通过验证才进入ajax $.ajax( { url: "xxx.ashx", type: "get", data: param, dataType: "json", success: function(data) { alert(data); } }); }});
jquery.validate的使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。