jquery validate验证插件_jquery启动对标签的验证-CSDN博客

本文链接：https://blog.csdn.net/B_qxzb/article/details/48339851

前言

jquery验证插件是基于jquery的，所以必须引用相应版本的jquery。

开发步骤

1、引入jquery文件；

2、引入jquery validate文件；

3、调用验证函数启动验证即可；

4、提交表单时，

1）如果验证失败，则会触发验证消息；

2）如果验证成功，则会提交表单。

具体使用细节

1、普通的html标签

a.单个验证条件

class="required"

b.多个验证条件

class = "{required:true,minlength:5}"

注：多个验证条件，必须还要引入 jquery.metadata.js

示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

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

<script type="text/javascript">
  $(function(){
     // 启动表单验证
     $("#form1").validate();
  });
</script>

</head>






<body>

  <form id="form1">
  <!-- 表单字段-->
  <input type="text" name="username" id="username" class="required"/><br/>
  <input type="text" name="password" id="password" class="required"/><br/>

  <!-- 提交按钮-->
  <input type="submit" value="Submit"/>
  </form>

</body>
</html>

2、sturts2标签

a.单个验证条件

cssClass ="required"

b.多个验证条件

cssClass ="required" maxlength ="64"

示例代码

					<tr>
						<td width="125" align="right">项目信息：<div id="projectcodeLink"></div></td>
						<td width="125" class="clum_title">项目编号:<br> <s:hidden
								name="taskinfo.projectid" id="projectid"></s:hidden> <s:textfield
								name="taskinfo.projectcode" cssClass="required" maxlength="32"
								id="projectcode" cssStyle="width:200;color:gray;" value="请选择"
								οnclick="selectProjectInfo()" /><br> 项目简称:<br> <s:textfield
								name="taskinfo.projectname" cssClass="required" maxlength="64"
								id="projectname" οnclick="selectProjectInfo()"
								cssStyle="width:200;color:gray;" value="请选择" /></td>

						<td width="125" class="clum_title" align="right">工作计划:</td>
						<td width="125"><s:hidden name="taskinfo.workplanid"
								id="workplanid" /> 计划名称:<br> <s:textfield name="planname"
								cssClass="required" maxlength="64" id="planname"
								cssStyle="width:214;color:gray;" value="请选择"
								οnclick="selectWorkPlanInfo('add')" /><br> 计划拟制人:<br>
							<s:textfield name="workplanname" cssClass="" maxlength="64"
								id="workplanname" cssStyle="width:214;color:gray;" value="请选择"
								οnclick="selectWorkPlanInfo('add')" /></td>
						<td width="125" class="clum_title" align="right">任务名称:</td>
						<td><s:textfield name="taskinfo.taskname" cssClass="required"
								maxlength="64" cssStyle="width:180" /></td>
					</tr>

提交表单时如何判断是否验证成功

前面提到了，提交表单时，会出现2种情况，一种是验证失败，一种是验证成功。那么这个流程具体是怎么样的的呢。

1、在进入该页面的时候，就应该首先要开启表单验证功能

  $(function(){
     // 启动表单验证
     $("#form1").validate();
  });

2、然后，在提交表单的时候调用.valid()函数来判断验证是否成功

// 判断验证表单是否成功
	function vForm() {
		var re = $("#myform").valid(); //注：.valid()函数是提交表单的时候用来判断表单验证是否成功，而.validate()函数则是在进入当前页面的时候就要被调用（相当于是开启验证功能），换句话说，如果不开启表单验证功能（即调用.validate函数），那么在判断表单验证是否成功时的返回结果<span style="font-family: Arial, Helvetica, sans-serif;">（即调用.valid函数的返回结果）</span>
始终为true，所以一定要先调用.validate()函数开启验证功能，然后在提交表单的时候调用.valid()时才能得到true或false，最后才能根据为true或false来判断是否提交。
		return re;
	}

参考：http://www.coding123.net/article/20130530/jquery-validate-js-valid-method-note.aspx