jquery validate

校验规则的提示

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} 的值")
});

 

---

以下是适用代码
             *使用class="{}"的方式必须引 入jquery.metadata.js
              每个要判断的标记都要有name属性

<form id="commentForm" method="post" >

用户名 ：<input id="cname" name="name" class="{required:true,minlength:6,maxlength:12}" />

密码:<input type="password" class="{required:true,minlength:6,maxlength:13}" id="pwd" name="pwd" />

密码确认<input type="password" class="{required:true,minlength:6,maxlength:13,equalTo:'#pwd'}" id="pwd2" name="pwd2" />

Email<input type="text" class="required email" name="email" id="email" />

手机：<input type="text" id="tel" class="required" name="tel"/>

性别:男<input type="radio" name="sex" id="sex" class="" value="boy"/>
女<input type="radio" name="sex" id="sex" class="" value="gril" />

出生年月：<input type="text" class="required" name="year" id = "year" readonly="readonly" />

籍贯: <select name="contry" class="required">
<option value="">请选择</option>
<option value="cn">中国</option>
<option value="jbbw">津巴布韦</option>
<option value="cn">海地</option>
<option value="medf">马尔代夫</option>
</select>

简介<textarea id="ccomment" name="comment" class="required" cols="50"></textarea>
<input type="submit" value="Submit"/>
</form>

 

$().ready(function() {
     $("#commentForm").validate();
});

 

---

第二种将校验规则写到代码中

$().ready(function() {
 $("#commentForm").validate({
rules: {
   name: "required",
   email: {
    required: true,
    email: true
   },
   pwd: {
    required: true,
    minlength: 5
   },
   pwd2: {
    required: true,
    minlength: 5,
    equalTo: "#password"
   }
  },
        messages: {
   name: "请输入姓名",
   email: {
    required: "请输入Email地址",
    email: "请输入正确的email地址"
   },
   pwd: {
    required: "请输入密码",
    minlength: jQuery.format("密码不能小于{0}个字符")
   },
   pwd2: {
    required: "请输入确认密码",
    minlength: "确认密码不能小于5个字符",
    equalTo: "两次输入密码不一致"
   }
  }
    });
});

 

---

由于默认是submit提交，以下为更改后代码来替代默认

 $("#commentForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });

 

---

debug参数
    如果这个参数为true，那么表单不会提交，只进行检查

$("#commentForm").validate({
debug:true
});

 

---

关于样式
        样式可自定义，以下是这次的样式

div.error{ color:#F03; position: absolute; font-weight:600}
span.error{ color:#F03; position: relative; top:16px;}
span.errorImg{background:url(warning.gif) no-repeat;}//提示信息前的图片
input.error,textarea.error,select.error{ background:url(invalid_line.gif) repeat-x scroll center bottom #FFFFFF;border:2px solid #DD7870; }//错误时input的样式