jquery的Validation插件

最新推荐文章于 2023-07-25 20:44:49 发布

guwen1991

最新推荐文章于 2023-07-25 20:44:49 发布

阅读量577

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/oGuWen1/article/details/12656533

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!-- charset-->
<script src="../../dreamweaver/jquery.min.js"></script>
<script src="jquery.validate.js"></script>
<script src="jquery.metadata.js"></script>
<script src="jquery.validate.messages_cn.js"></script> <!-- 验证信息的中文信息库-->
<title>Validation插件</title>
<script>
$(document).ready(function(){
   $.validator.addMethod(
	"formula", //验证方法名称
	function(value, element, param) {//验证规则
		return value==eval(param);
	}, 
	'请正确输入数学公式计算后的结果'//验证提示信息
	);
 // $("#myform").validate({meta:"validate"});  //不同的调用方式
 $("#myform").validate({
     rules:{
		      id:{
			   required:true,
			   minlength:6
			  },
			  mima:{
			   required:true,
			   minlength:7
			  },
			  youxiang:"email", 
			  wangzhi:"url",
			  yanzhengma:{formula:"7+3"}
			},
	  errorElement: "em", 
	  success: function(label) {		
			label.text(" ")				
				.addClass("success");},
	  messages:{
	     id:"自定义,长度必须大于6",
		 mima:"自定义：长度必须大于7",
		 yanzhengma:"自定义：请输入正确验证码"
	  }
	 });
 
       
});
</script>
<style>
em.error{
   background-image: url(../源码/锋利的jquery源码/《锋利的jQuery》实例源码/实例下载/07第七章/第七章例子/7-1-Validation/images/unchecked.gif);
   background-repeat:no-repeat;
   padding-left:20px;
   color:red;
}
em.success{
   background-image:url(../源码/锋利的jquery源码/《锋利的jQuery》实例源码/实例下载/07第七章/第七章例子/7-1-Validation/images/checked.gif);
   background-repeat:no-repeat;
    padding-left:20px;
}
</style>
</head>

<body>
<form action="#" method="get" id="myform"><fieldset>
<legend>Validation插件</legend>
<!--<p>
<label>用户名：</label>
<input name="id" class="{validate:{required:true,minlength:5}}" type="text" size="100" />
</p>

<p>
<label>密码：  </label>
<input name="mima" class="{validate:{required:true,minlength:6}}" type="password" size="100" />
</p>

<p>
<label>邮箱：  </label>
<input name="youxiang" class="{validate:{required:true,email:true}}"type="text" size="100" />
</p>

<label>网址：  </label>
<input name="wangzhi" class="{validate:{required:true,url:true}}" type="text" size="100" />

<p> 
  <input name="mysubmit" type="submit" />
</p>-->


<p>
<label>用户名：</label>
<input name="id"  type="text" size="100" />
</p>

<p>
<label>密码：  </label>
<input name="mima"  type="password" size="100" />
</p>

<p>
<label>邮箱：  </label>
<input name="youxiang" type="text" size="100" />
</p>

<label>网址：  </label>
<input name="wangzhi"  type="text" size="100" />


<p>
<label>验证码：  </label>
<input name="yanzhengma" type="text" size="100" value=""/>
<label> 7+3 </label>

</p>

<p> 
  <input name="mysubmit" type="submit" />
</p>
</fieldset>
</form>
</body>
</html>

guwen1991

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的Validation插件

Validation插件$(document).ready(function(){ $.validator.addMethod( "formula", //验证方法名称 function(value, element, param) {//验证规则 return value==eval(param); }, '请正确输入数学公式计算后的结果'//验证提示信息
复制链接

扫一扫

专栏目录