用JQueryValidate制作一个表单弹窗校验

最新推荐文章于 2022-05-26 17:58:20 发布

zjx102938

最新推荐文章于 2022-05-26 17:58:20 发布

阅读量429

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zjx102938/article/details/8137387

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

试题：

代码：

JQuery的部分比较关键，另外JQuery.js和JQuery.validate.js的匹配值得注意

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
 <script src="../jquery.js" type="text/javascript"></script>
 <script src="../jquery.validate.js" type="text/javascript"></script>
 <script src="../jquery.metadata.js" type="text/javascript"></script>
 <script src="../jquery.form.js" type="text/javascript"></script>
 
<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; }
</style>

<script language="javascript">

  $(document).ready(function () {
  $("#test").validate({
	 submitHandler: function() {
		alert("submitted!");
	},
  rules: {
  name: { required: true },
  email: { required: true }
  },
  messages: {
  name: { required: "用户名不能为空" },
  email: { required: "邮箱不能为空" }
  },
  showErrors: function(errorMap, errorList) {  
            if(errorList.length>0){		
            alert(errorList[0].message);
            return false;
            }
    },
   onfocusout: false,
   onkeyup: false
  });
  });
  </script>
</head>
<body>
 <form method="get" action="" id="test">
 <fieldset>
  <legend>A simple comment form with submit validation and default messages</legend>
  <p>
  <label for="firstname">Name</label>
  <em>*</em><input  id="cname" name="name" size="25" />
  </p>
  <p>
  <label for="cemail">E-Mail</label>
  <em>*</em><input id="cemail" name="email" size="25" />
  </p>
  <p>
  <input type="submit" value="Submit"/>
  </p>
 </fieldset>
 </form>
</body>
</html>