首页 > 代码库 > jQuery表单验证插件——validation(实现行为和结构分离)

jQuery表单验证插件——validation(实现行为和结构分离)

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<style type="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;
}
/**/
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
em.error {
background:url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
em.success {
background:url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
</style>
</head>
<body>
<form method="get" action="#" id="commentForm" class="cmxForm">
<fieldset>
<legend>一个简单的验证带有验证信息评论例子</legend>
<p>
<label for="cusername">姓名</label><em>*</em>
<input type="text" name="username" size="25" id="cusername" >
</p>
<p>
<label for="cemail">电子邮箱</label><em>*</em>
<input type="text" name="email" size="25" id="cemail" >
</p>
<p>
<label for="curl">网址</label><em>*</em>
<input type="text" name="url" size="25" id="curl" >
</p>
<p>
<label for="ccomment">评论</label><em>*</em>
<textarea name="comment" cols="22" id="ccomment" ></textarea>
</p>
<p>
<label for="cvalcode">验证码</label><em>*</em>
<input type="text" name="valcode" size="25" value="" id="cvalcode" />7+9
</p>
<p><input type="submit" name="" value="http://www.mamicode.com/提交" class="submit"></p>
</fieldset>
</form>
<script type="text/javascript" src="http://www.mamicode.com/scripts/jquery-1.3.1.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/scripts/lib/jquery.validate.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/scripts/lib/jquery.validate.messages_cn.js"></script>
<script type="text/javascript">
/*(1)$("#commentForm").validate()方法中增加rules属性
(2)通过每个字段的name属性匹配验证规则
(3)定义验证规则:例如:required:true,minlength:2
*/
$(function(){
$("#commentForm").validate({
  rules: {
    username:{
      required:true,
      minlength:2
    },
    email:{
      required:true,
      email:true
    },
    url:"url",
    comment:"required",
    valcode: {formula:"7+9"}//调用验证规则

  },
  messages: {
    username:{
      required:‘请输入你的名字‘,
      minlength:‘请输入至少两个字符‘
    },
    email:{
      required:‘请输入你的email‘,
      email:‘请输入正确的邮箱格式‘
    },
    url:"请输入正确的网址格式",
    comment:"请输入评论"
  },
  errorElement:"em", //用来创建错误提示信息标签
  success: function(label){ //验证成功后执行的回调函数
  //label指向上面那个错误提示信息标签em
  label.text("").addClass(‘success‘); //清空错误信息,加上自定义的class
}

});
  //自定义一个验证方法
  $.validator.addMethod(
  "formula",//验证方法名
  function(value,element,param){//验证规则
    return value =http://www.mamicode.com/= eval(param);
  },
  ‘请输入正确的数学公式计算后的结果‘ //验证提示信息
  )
});
</script>
</body>
</html>

jQuery表单验证插件——validation(实现行为和结构分离)