Validate笔记一：初识表单验证插件Validate

来源：互联网发布：网页快速抢购js脚本编辑：程序博客网时间：2024/06/01 09:05

Validate插件是一个表单验证插件。

下载地址:

http://download.csdn.net/detail/qq_20867981/9897790

在使用时，首先要导入插件:

<script type="text/javascript" src="<%=basePath %>js/jquery-1.8.3.min.js"></script><script type="text/javascript" src="<%=basePath %>js/jquery.form.js"></script><script type="text/javascript" src="<%=basePath %>js/jquery.validate.js"></script><script type="text/javascript" src="<%=basePath %>js/messages_zh.js"></script>

然后，确定哪个表单需要被验证:

$("#Form2").validate();

表单HTML：

 <form id="Form2" name="Form2" action="<%=basePath%>mlc/validate1">      <p>        <label for="firstname">Firstname</label>        <input id="firstname" name="firstname" class="required" />      </p>      <p>        <label for="email">EMail</label>        <input id="email" name="email" class="required email" />      </p>      <p>        <label for="password">Password</label>        <input id="password" name="password" type="password" class="required" minlength="5"/>      </p>      <p>        <label for="phone">Phone</label>        <input id="phone" name="phone" class="required " />      </p>       <p>        <input class="submit" type="submit" value="提交"/>      </p> </form>

也可以将表单内的class移出到script中:

$(function(){//console.log('${weekJob.tjzt}');$("#Form2").validate({     rules:{        firstname:{           required:true        },        email:{          required:true,          email:true        },        password:{          required:true,          minlength:5        },        phone:{          required:true        }     }});});

 <form id="Form2" name="Form2" action="<%=basePath%>mlc/validate1">      <p>        <label for="firstname">Firstname</label>        <input id="firstname" name="firstname"  />      </p>      <p>        <label for="email">EMail</label>        <input id="email" name="email"  />      </p>      <p>        <label for="password">Password</label>        <input id="password" name="password" type="password" />      </p>      <p>        <label for="phone">Phone</label>        <input id="phone" name="phone"  />      </p>       <p>        <input class="submit" type="submit" value="提交"/>      </p> </form>

实际效果:

阅读全文

0 0