jQuery Validate form validation plug-in adds verification in the form of class attribute

jQuery Validate form validation plug-in adds verification in the form of class attribute_jquery

WBOY

Release： 2016-05-16 15:19:35

Original

1581 people have browsed it

The example in this article introduces the jQuery Validate form verification plug-in, adding verification in the form of class attributes, and shares it with everyone for your reference. The specific content is as follows
The effect is as follows:

1. jQuery form validation plug-in, add verification in the form of class attribute

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证插件----添加class属性形式的校验</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.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 type="text/javascript">
 $(document).ready(function(){
  $("#commentForm").validate();
 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----添加class属性形式的校验</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25" class="required email" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" class="url" value="" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

Copy after login

2. Default rules
Default verification rules:

(1)required:true Required fields
(2)remote:"check.php" Use the ajax method to call check.php to verify the input value
(3)email:true You must enter an email in the correct format
(4)url:true You must enter the URL in the correct format
(5)date:true You must enter the date in the correct format. There is an error in date verification ie6, use with caution
(6)dateISO:true You must enter the date (ISO) in the correct format, for example: 2009-06-23, 1998/01/22 Only the format is verified, not the validity
(7)number:true You must enter a legal number (negative number, decimal)
(8)digits:true You must enter an integer
(9)creditcard: You must enter a legal credit card number
(10)equalTo:"#field" The input value must be the same as #field
(12)maxlength:5 Enter a string with a maximum length of 5 (Chinese characters count as one character)
(13)minlength:10 Enter a string with a minimum length of 10 (Chinese characters count as one character)
(14)rangelength:[5,10] The input length must be a string between 5 and 10") (Chinese characters count as one character)
(15)range:[5,10] The input value must be between 5 and 10
(16)max:5
(17)min:10 The input value cannot be less than 10
Default prompt:

The above is the entire content of this article, I hope it will be helpful to everyone’s study.