Jquery.validation.js学习

来源：互联网发布：深圳软件外包公司排名编辑：程序博客网时间：2024/05/19 00:54

导入 js 库

<script src="../js/jquery.js" type="text/javascript"></script><script src="../js/jquery.validate.js" type="text/javascript"></script>

默认校验规则

序号规则描述1required:true必须输入的字段。2remote:"check.php"使用 ajax 方法调用 check.php 验证输入值。3email:true必须输入正确格式的电子邮件。4url:true必须输入正确格式的网址。5date:true必须输入正确格式的日期。日期校验 ie6 出错，慎用。6dateISO:true必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。7number:true必须输入合法的数字（负数，小数）。8digits:true必须输入整数。9creditcard:必须输入合法的信用卡号。10equalTo:"#field"输入值必须和 #field 相同。11accept:输入拥有合法后缀名的字符串（上传文件的后缀）。12maxlength:5输入长度最多是 5 的字符串（汉字算一个字符）。13minlength:10输入长度最小是 10 的字符串（汉字算一个字符）。14rangelength:[5,10]输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。15range:[5,10]输入值必须介于 5 和 10 之间。16max:5输入值不能大于 5。17min:10输入值不能小于 10。

详细接扫见：http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

<script type="text/javascript"src="../js/jquery-1.10.2.min.js"></script><script src="../js/validation/jquery.validate.js" type="text/javascript"></script><script src="../js/validation/messages_cn.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="../css/validation/validation.css">

label.error{background: url("../../images/setting/nwwo_ico.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);    background-position: -548px -290px;    color: #dd3c10;    font-size: 12px;    height: 27px;    line-height: 27px;    padding: 0 5px 0 20px;}

$(function() {$("#pass-account").validate({        rules: {        account:{        required: true,        minlength: 4        },        email: {    required: true,    email: true,    remote: {        url: "../check/email.do",     //后台处理程序        type: "post",               //数据发送方式        dataType: "json",           //接受数据格式           data: {                     //要传递的数据            email: function() {                return $("#input_email").val();            }    }    }   },   password: {    required: true,    minlength: 6  },  password2: {    required: true,    minlength: 6,    equalTo: "#input_passwd"  }    }    });$("#account-button").click(function(){if($("#pass-account").valid()){register();}});});function register(){var url="${contextPath}/register/register.do";var form = $("#pass-account");var params = form.serialize();$.post(url, params, function(data) {if (data.flag) {success();$(".success").fadeIn(1000,function(){$(".success").fadeOut(3000,function(){location.href ="${contextPath}/register/success.do";});});} else {alert("fail");}});}

注意：1.js文件的导入顺序，jquery 不能重复加载，要不然容易出错误

2.最后提交按钮可以对valid（）属性进行判断

3.remote里面的data值要用function

0 0